bootstrap讲义Word文件下载.docx
《bootstrap讲义Word文件下载.docx》由会员分享，可在线阅读，更多相关《bootstrap讲义Word文件下载.docx（22页珍藏版）》请在冰点文库上搜索。
/ins>
//插入的文本
u>
/u>
//效果同上，下划线文本
//各种强调的文本
//标准字号的85%
strong>
/strong>
//加粗700
em>
/em>
//倾斜
4.对齐
//设置文本对齐
pclass="
text-left"
//居左
text-center"
//居中
text-right"
//居右
text-justify"
//两端对齐，支持度不佳
text-nowrap"
//不换行
5.大小写
//设置英文文本大小写
text-lowercase"
//小写
text-uppercase"
//大写
text-capitalize"
//首字母大写
6.缩略语
//缩略语
abbrtitle="
Bootstrap"
class="
initialism"
/abbr>
7.地址文本
//设置地址，去掉了倾斜，设置了行高，底部20px
address>
Twitter,Inc.<
br>
795FolsomAve,Suite600<
SanFrancisco,CA94107<
Phone"
P:
（123）456-7890
/address>
8.引用文本
//默认样式引用，增加了做边线，设定了字体大小和内外边距
blockquote>
Bootstrap框架
/blockquote>
//反向
blockquoteclass="
blockquote-reverse"
9.列表排版
//移出默认样式
ulclass="
list-unstyled"
li>
/li>
/ul>
//设置成内联
list-inline"
//水平排列描述列表
dlclass="
dl-horizontal"
dt>
/dt>
dd>
/dd>
/dl>
10.代码
//内联代码
code>
&
lt;
section&
gt;
/code>
//用户输入
press<
kbd>
ctrl+,<
/kbd>
//代码块
pre>
p&
Pleaseinput...&
/p&
/pre>
Bootstrap还列举了<
var>
表示标记变量，<
samp>
表示程序输出，只不过没有重新复写CSS。
表格和按钮
一．表格
Bootstrap提供了一些丰富的表格样式供开发者使用。
1.基本格式
//实现基本的表格样式
tableclass="
table"
注：
我们可以通过Firebug查看相应的CSS。
2.条纹状表格
//让<
tbody>
里的行产生一行隔一行加单色背景效果
tabletable-striped"
表格效果需要基于基本格式.table
3.带边框的表格
//给表格增加边框
tabletable-bordered"
4.悬停鼠标
下的表格悬停鼠标实现背景效果
tabletable-hover"
5.状态类
//可以单独设置每一行的背景样式
trclass="
success"
一共五种不同的样式可供选择。
样式说明
active鼠标悬停在行或单元格上
success标识成功或积极的动作
info标识普通的提示信息或动作
warning标识警告或需要用户注意
danger表示危险或潜在的带来负面影响的动作
6.隐藏某一行
//隐藏行
sr-only"
7.响应式表格
//表格父元素设置响应式，小于768px出现边框
bodyclass="
table-responsive"
二．按钮
Bootstrap提供了很多丰富按钮供开发者使用。
1.可作为按钮使用的标签或元素
//转化成普通按钮
ahref="
###"
btnbtn-default"
Link<
/a>
buttonclass="
Button<
/button>
inputtype="
button"
value="
input"
注意事项有三点：
（1）.针对组件的注意事项
虽然按钮类可以应用到<
a>
和<
button>
元素上，但是，导航和导航条组件只支持
元素。
（2）.链接被作为按钮使用时的注意事项
如果<
元素被作为按钮使用--并用于在当前页面触发某些功能--而不是用于
链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="
属性。
（3）.跨浏览器展现
我们总结的最佳实践是：
强烈建议尽可能使用<
元素来获得在各个浏览器上获得相匹配的绘制效果。
另外，我们还发现了Firefox<
30版本的浏览器上出现的一个bug，其表现是：
阻
止我们为基于<
input>
元素所创建的按钮设置line-height属性，这就导致在
Firefox浏览器上不能完全和其他按钮保持一致的高度。
2.预定义样式
//一般信息
btnbtn-info"
btn-default默认样式
btn-success成功样式
btn-info一般信息样式
btn-warning警告样式
btn-danger危险样式
btn-primary首选项样式
btn-link链接样式
3.尺寸大小
//从大到小的尺寸
btnbtn-lg"
btn"
btnbtn-sm"
btnbtn-xs"
4.块级按钮
//块级换行
btnbtn-block"
5.激活状态
//激活按钮
btnactive"
6.禁用状态
//禁用按钮
btnactivedisabled"
表单和图片
一．表单
Bootstrap提供了一些丰富的表单样式供开发者使用。
//实现基本的表单样式
form>
divclass="
form-group"
label>
电子邮件<
/label>
email"
form-control"
placeholder="
请输入您的电子邮件"
/div>
密码<
password"
请输入您的密码"
/form>
只有正确设置了输入框的type类型，才能被赋予正确的样式。
支持的输入框控件包括：
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
2.内联表单
//让表单左对齐浮动，并表现为inline-block内联块结构
formclass="
form-inline"
当小于768px，会恢复独占样式
3.表单合组
//前后增加片段
input-group"
input-group-addon"
￥<
text"
.00<
4.水平排列
//让表单内的元素保持水平排列
form-horizontal"
labelclass="
col-sm-2control-label"
col-sm-10"
placeholder="
请输
入您的电子邮件"
这里用到了col-sm栅格系统，后面章节会重点讲解，而control-label表示和父元素样式同步。
5.复选框和单选框
//设置复选框，在一行
checkbox"
体育
音乐
//设置禁用的复选框
checkboxdisabled"
disabled>
//设置内联一行显示的复选框
checkbox-inline"
checkbox-inlinedisabled"
//设置单选框
radiodisabled"
radio"
name="
sex"
男
6.下拉列表
//设置下拉列表
selectclass="
option>
1<
/option>
2<
3<
4<
5<
/select>
7.校验状态
//设置为错误状态
form-grouphas-error"
还有其他状态如下
has-error错误状态
has-success成功状态
has-warning警告状态
//label标签同步相应状态
control-label"
Inputwithsuccess<
8.添加额外的图标
//文本框右侧内置文本图标
form-grouphas-feedback"
glyphiconglyphicon-okform-control-feedback"
除了glyphicon-ok外，还有几个如下表：
glyphicon-ok成功状态
glyphicon-warning-sign警告状态
glyphicon-remove错误状态
9.控制尺寸
//从大到小
form-controlinput-lg"
form-controlinput-sm"
也可以设置父元素form-group-lg、form-group-sm，来调整。
二．图片
Bootstrap提供了一些丰富的图片样式供开发者使用。
1.图片形状
//三种形状
imgsrc="
img/pic.png"
alt="
图片"
img-rounded"
img-circle"
img-thumbnail"
//响应式图片
img-responsive"
栅格系统
一．移动设备优先
在HTML5的项目中，我们做了移动端的项目。
它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。
//分别为：
屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
metaname="
viewport"
content="
width=device-width,initial-scale=1,
maximum-scale=1,user-scalable=no"
二．布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器。
由于padding等属性的原因，这两种容器类不能相互嵌套。
//固定宽度
container"
...
//100%宽度
container-fluid"
栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12列。
通过一系列的行（row）与列（column）的组合来创建页面布局。
工作原理如下：
1.“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%
宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.通过“行（row）”在水平方向创建一组“列（column）”。
3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为
行（row）”的直接子元素。
4.类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。
Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
5.通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。
通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，
也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
6.负值的margin就是下面的示例为什么是向外突出的原因。
在栅格列中的内容排成一行。
7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
例如，三个等宽的列可以使用三个.col-xs-4来创建。
8.如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”
所在的元素将被作为一个整体另起一行排列。
9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。
因此，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。
因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。
//创建一个响应式行
row"
//创建最多12列的响应式行
col-md-1a"
6<
7<
8<
9<
10<
11<
12<
//为了显示明显的CSS
.a{
height:
100px;
background-color:
#eee;
border:
1pxsolid#ccc;
}
//总列数都是12，每列分配多列
col-md-4a"
1-4<
5-8<
9-12<
col-md-8a"
1-8<
栅格参数表
如上图所示，栅格系统最外层区分了四种宽度的浏览器：
超小屏（<
768px）、小屏
（>
=768px）、中屏（>
=992px）和大屏（>
=1200px）。
而内层.container容器的自适应宽度为：
自动、750px、970px和1170px。
自动的意思为，如果你是手机屏幕，则全面独占一行显示。
//四种屏幕分类全部激活
col-lg-3col-md-4col-sm-6col-xs-12a"
//有时我们可以设置列偏移，让中间保持空隙
升级会员 