1.container和container-fluid的区别:前者的width是用媒体查询获得的动态尺寸,而且自己会实现响应式布局,后者的width是100%显示。
2.建议给html的根元素指定为lang属性。
3.若需要出现IE兼容模式的代码 : <meta http-equiv="X-UA-Comatible" content="IE=Edge">
4.媒体查询:
/* 超小屏幕(手机,小于 768px) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
@media (min-width: @screen-lg-min) { ... }
代码例子如下:
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
5.在使用<h1>的标题标签时可以同时用<small>的副标题标签
6.将全局布局中的font-size:14px;line-height:1.428,
添加lead类将内容突出,mark标签添加文本,del标签用于被删除的文本,ins标签额外插入,em标签表示斜体
7.可通过对text-属性,可对文本进行直接操作,lowercase文本小写,uppercase文本大写,capitalize文本首字母大写
8.首字母缩略语,添加initialism类,可以让font-size再小一点,abbr表示基本缩略语
9.引用方式:<blockquote>,也可添加命名,即为在<footer>中添加<cite>标签,也可直接通过.blockquote-reverse直接实现右对齐操作
10.无序<ul>,有序<ol>
11.描述短语列表,dl中的.dl-horizontal的效果可以让标题和内容一行显示
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
12.用<code>标签包裹内联样式的代码,<kdb>标签标记用户通过键盘输入的内容,<samp>标记程序输出的内容
13.表格应用:
.table-striped可以实现每一行的斑马线效果,.table-hover实现鼠标悬停效果,.table-condensed实现表格紧缩效果
响应式表格应用,.table-responsive
14.表单应用:
内联表单是form-inline,在大的form下可以套div来书写表单每一行,多选框checkbox单选框radio
标记了multiple属性的<select>控件,会直接显示所有的多选项
静态控件,给p标签属性添加.form-control-static就可以让其变成静态
焦点状态就是默认focus,禁用状态是给输入框设置disabled属性,为<fileldset>设置disabled属性,可以禁用所有控件
只读状态readonly,通过input-lg和input-sm等可以创建控件尺寸大小
15.按钮应用:
default默认样式,primary首选项,success成功,warning警告,info一般信息,link链接
按钮被按下的状态可以通过在class中添加active属性,禁用状态添加disabled属性
16.响应式图片
用img-responsive属性中让图片居中用.center-block
17.辅助工具
关闭按钮:
<button
type=
"button"
class=
"close"
aria-label=
"Close"
><span
aria-hidden=
"true"
>
×
</span></button>
三角符号:
<span
class=
"caret"
></span>
快速浮动:
<div
class=
"pull-left"
>
...
</div>
<div
class=
"pull-right"
>
...
</div>
内容块居中:
<div class="center-block">...</div>
显示隐藏:
<div
class=
"show"
>
...
</div>
<div
class=
"hidden"
>
...
</div>