bootstrap讲义.docx
《bootstrap讲义.docx》由会员分享，可在线阅读，更多相关《bootstrap讲义.docx（22页珍藏版）》请在冰点文库上搜索。
bootstrap讲义
排版样式
一．页面排版
Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。
1.页面主体
Bootstrap将全局font-size设置为14px，line-height行高设置为1.428（即
20px）；
段落元素被设置等于1/2行高（即10px）；颜色被设置为#333。
2.标题
//内联元素使用标题字体
Bootstrap
在h1~h6元素之间，还可以嵌入一个small元素作为副标题，
//在标题元素内插入small元素
Bootstrap框架Bootstrap小标题
在h1~h6下的small样式也进行了改变，颜色变成淡灰色：
#777，行高为1，粗度为400。
3.内联文本元素
//添加标记，元素或.mark类
Bootstrap框架
//各种加线条的文本
Bootstrap框架//删除的文本
Bootstrap框架//无用的文本
Bootstrap框架//插入的文本
Bootstrap框架//效果同上，下划线文本
//各种强调的文本
Bootstrap框架//标准字号的85%
Bootstrap框架//加粗700
Bootstrap框架//倾斜
4.对齐
//设置文本对齐
Bootstrap框架
//居左
Bootstrap框架
//居中
Bootstrap框架
//居右
Bootstrap框架
//两端对齐，支持度不佳
Bootstrap框架
//不换行
5.大小写
//设置英文文本大小写
Bootstrap框架
//小写
Bootstrap框架
//大写
Bootstrap框架
//首字母大写
6.缩略语
//缩略语
Bootstrap框架
7.地址文本
//设置地址，去掉了倾斜，设置了行高，底部20px
Twitter,Inc.
795FolsomAve,Suite600
SanFrancisco,CA94107
P:
（123）456-7890
8.引用文本
//默认样式引用，增加了做边线，设定了字体大小和内外边距
Bootstrap框架
//反向
Bootstrap框架
9.列表排版
//移出默认样式
Bootstrap框架Bootstrap框架Bootstrap框架Bootstrap框架Bootstrap框架//设置成内联
Bootstrap框架Bootstrap框架Bootstrap框架Bootstrap框架Bootstrap框架//水平排列描述列表
BootstrapBootstrap提供了一些常规设计好的页面排版的样式供开发者使用。10.代码
//内联代码
<section>
//用户输入
pressctrl+,
//代码块
<p>Pleaseinput...</p>
Bootstrap还列举了表示标记变量，表示程序输出，只不过没有重新复写CSS。
表格和按钮
一．表格
Bootstrap提供了一些丰富的表格样式供开发者使用。
1.基本格式
//实现基本的表格样式
注：
我们可以通过Firebug查看相应的CSS。
2.条纹状表格
//让
里的行产生一行隔一行加单色背景效果
注：
表格效果需要基于基本格式.table
3.带边框的表格
//给表格增加边框
4.悬停鼠标
//让
下的表格悬停鼠标实现背景效果
5.状态类
//可以单独设置每一行的背景样式
注：
一共五种不同的样式可供选择。
样式说明
active鼠标悬停在行或单元格上
success标识成功或积极的动作
info标识普通的提示信息或动作
warning标识警告或需要用户注意
danger表示危险或潜在的带来负面影响的动作
6.隐藏某一行
//隐藏行
7.响应式表格
//表格父元素设置响应式，小于768px出现边框
二．按钮
Bootstrap提供了很多丰富按钮供开发者使用。
1.可作为按钮使用的标签或元素
//转化成普通按钮
Link
Button
注意事项有三点：
（1）.针对组件的注意事项
虽然按钮类可以应用到和
（2）.链接被作为按钮使用时的注意事项
如果元素被作为按钮使用--并用于在当前页面触发某些功能--而不是用于
链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button"属性。
（3）.跨浏览器展现
我们总结的最佳实践是：
强烈建议尽可能使用
另外，我们还发现了Firefox<30版本的浏览器上出现的一个bug，其表现是：
阻
止我们为基于元素所创建的按钮设置line-height属性，这就导致在
Firefox浏览器上不能完全和其他按钮保持一致的高度。
2.预定义样式
//一般信息
Button
样式说明
btn-default默认样式
btn-success成功样式
btn-info一般信息样式
btn-warning警告样式
btn-danger危险样式
btn-primary首选项样式
btn-link链接样式
3.尺寸大小
//从大到小的尺寸
Button
Button
Button
Button
4.块级按钮
//块级换行
Button
Button
5.激活状态
//激活按钮
Button
6.禁用状态
//禁用按钮
Button
表单和图片
一．表单
Bootstrap提供了一些丰富的表单样式供开发者使用。
1.基本格式
//实现基本的表单样式
注：
只有正确设置了输入框的type类型，才能被赋予正确的样式。
支持的输入框控件包括：
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
2.内联表单
//让表单左对齐浮动，并表现为inline-block内联块结构
注：
当小于768px，会恢复独占样式
3.表单合组
//前后增加片段
￥
.00
4.水平排列
//让表单内的元素保持水平排列
电子邮件
入您的电子邮件">
注：
这里用到了col-sm栅格系统，后面章节会重点讲解，而control-label表示和父元素样式同步。
5.复选框和单选框
//设置复选框，在一行
体育
音乐
//设置禁用的复选框
音乐
//设置内联一行显示的复选框
体育
音乐
//设置单选框
男
6.下拉列表
//设置下拉列表
7.校验状态
//设置为错误状态
注：
还有其他状态如下
has-error错误状态
has-success成功状态
has-warning警告状态
//label标签同步相应状态
Inputwithsuccess
8.添加额外的图标
//文本框右侧内置文本图标
注：
除了glyphicon-ok外，还有几个如下表：
glyphicon-ok成功状态
glyphicon-warning-sign警告状态
glyphicon-remove错误状态
9.控制尺寸
//从大到小
注：
也可以设置父元素form-group-lg、form-group-sm，来调整。
二．图片
Bootstrap提供了一些丰富的图片样式供开发者使用。
1.图片形状
//三种形状
//响应式图片
栅格系统
一．移动设备优先
在HTML5的项目中，我们做了移动端的项目。
它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。
//分别为：
屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
maximum-scale=1,user-scalable=no">
二．布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器。
由于padding等属性的原因，这两种容器类不能相互嵌套。
//固定宽度
...
//100%宽度
...
栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多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-*不存在，也影响大屏幕设备。
//创建一个响应式行
...
//创建最多12列的响应式行
1
2
3
4
5
6
7
8
9
10
11
12
//为了显示明显的CSS
.a{
height:
100px;
background-color:
#eee;
border:
1pxsolid#ccc;
}
//总列数都是12，每列分配多列
1-4
5-8
9-12
1-8
9-12
栅格参数表
如上图所示，栅格系统最外层区分了四种宽度的浏览器：
超小屏（<768px）、小屏
（>=768px）、中屏（>=992px）和大屏（>=1200px）。
而内层.container容器的自适应宽度为：
自动、750px、970px和1170px。
自动的意思为，如果你是手机屏幕，则全面独占一行显示。
//四种屏幕分类全部激活
4
4
4
4
4
4
4
4
4
4
4
4
//有时我们可以设置列偏移，让中间保持空隙
展开阅读全文
相关搜索
资源标签