文档介绍：Bootstrap 的基本的 HTML 模板
作者:大菽
Bootstrap
一、HTML 5 文档类型(Doctype){Bootstrap 使用了一些 HTML5 元素和 CSS 属性}
<!DOCTYPE html>
<html>
....
</html>
二、为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=">
三、响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
Bootstrap
四、全局显示、排版和链接
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: ;
color: #333333;
background-color: #ffffff;
}
第一条规则设置 body 的默认字体样式为"Helvetica Neue", Helvetica, Arial, sans-serif。
第二条规则设置文本的默认字体大小为 14 像素。
第三条规则设置默认的行高度为 。
第四条规则设置默认的文本颜色为#333333。
最后一条规则设置默认的背景颜色为白色。
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
所以,当鼠标悬停在链接上,或者点击过的链接,颜色会被设置为#2a6496。同时,会呈现一条下划线。
除此之外,点击过的链接,会呈现一个颜色码为#333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽,且对于基于 webkit 浏览器有一个-webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为-2 像素。
以上所有这些样式都可以在 中找到。
Bootstrap
Bootstrap
容器(Container)
<div class="container">
...
</div>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
content: " ";
}
Bootstrap
媒体查询
/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询*/
/* 小型设备(平板电脑,768px 起) */
***@media (min-width: ***@screen-sm-min) { ... }
/* 中型设备(台式电脑,992px 起) */
***@media (min-width: ***@screen-md-min) { ... }
/* 大型设备(大台式电脑,1200px 起) */
***@media (min-width: ***@screen-lg-min) { ... }
基本的网格结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
Bootstrap