bootstrap讲义Word文件下载.docx
- 文档编号:7774123
- 上传时间:2023-05-09
- 格式:DOCX
- 页数:22
- 大小:166.99KB
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"
//有时我们可以设置列偏移,让中间保持空隙
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- bootstrap 讲义