旺财速啃H5框架之Bootstrap(五)

在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootstrap.css样式,下面我们来学习常见的CSS操控内容篇幅。。。。

一、响应式图片

基本样式:

<img src="..." class="img-responsive" alt="响应式图片">

Bootstrap.css 937行

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}

定义类img-responsive为块元素、最大宽度100%,height为自动,看出来它没有指定具体宽度,而是限定它的最大宽度不能大于容器的宽度,高度自动是为了保证图片不变形。

当然这是正常放进页面的图片,如果是从数据库取出来的图片,那样的图片可是没有加class=”img-responsive”类的哦,大小可能就会变化了,怎么办呢?   OK,自己附加样式,例如你的内容容器类为content,那么给里面的img写如下样式:

.content  img{
max-width:100%;
Height:auto;
}

这样图片再大也不会超出你的容器了,并且会随容器变化而变化(切记不要给图片加内嵌样式

图片类:

.img-rounded   为图片添加圆角 (IE8 不支持)

.img-circle 将图片变为圆形 (IE8 不支持)

.img-thumbnail 缩略图功能

.img-responsive   图片响应式 (将很好地扩展到父元素)

二、网页显示HTML代码

要想在网站上显示html源码,可以使用code或pre标记

<p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素,请使用 &lt;pre&gt; 标签:</p>
<pre>
&lt;article&gt;
&lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</pre>

查询效果:《猛点这里

三、表单元素

Bootstrap针对表单有三种布局方式:垂直表单(默认)、内联表单、水平表单

添加表单的步骤:

1、向父 <form> 元素添加 role="form"

2、把标签和控件放在一个带有 class .form-group 的 <div> 中。

3、向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

默认表单:

<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

查询效果:《猛点这里

内联表单

原理:向 <form> 标签添加 class .form-inline

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

查看效果:《猛点这里

水平表单

原理:向父 <form> 元素添加 class .form-horizontal

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>

查看效果:《猛点这里

四、按钮

按钮最基本的样式,bootstrap.css 2782行

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom:;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

我们在用bootstrap按钮的时候都加上class=”btn”,看不同的按钮效果:

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button> <!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button> <!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

查看效果:《猛点这里

还有按钮大小、按钮状态的类定义

详细请看:http://noob.d8jd.com/noob/5/113.html

五、字体图标

好,这个我在前面讲过,说直一点,就是用字体做成看上去是图标的样式,好处当然是:矢量,可像操作普通文字那样操作图标,大小、颜色什么的…。

字体图标不是bootstrap所有,很多网站都有自己的一套图标。

阿里巴巴字体图标:http://www.iconfont.cn/

Font Awesome:http://fontawesome.dashgame.com/(很不错的)

Fontello:http://fontello.com/

Icomoon: http://icomoon.io/app/#/select

Glyphicon Halflingshttp://glyphicons.com/

这里说一下bootstrap 3.x版本的字体图标运用方式,所先要把字体图标所须要的文件放到bootstrap.css目录同级目录,文件夹名为fonts,里面的文字有4个。

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

bootstrap.css与字体相关CSS说明,267行:

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height:; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@font-face定义网页引入的字体文件

.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性

使用方法:

<span class="glyphicon glyphicon-search"></span>

查看效果

更多字体图标:http://noob.d8jd.com/noob/5/117.html

OK,今天先到这里…

上一篇:Oracle单机Rman笔记[0]---环境准备


下一篇:[虾扯蛋] android界面框架-Window