Bootstrap概要1.ppt

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=1.0 三、响应式图像 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: 1.428571429; color: #333333; background-color: #ffffff; } 第一条规则设置 body 的默认字体样式为 Helvetica Neue, Helvetica, Arial, sans-serif。 第二条规则设置文本的默认字体大小为 14 像素。 第三条规则设置默认的行高度为 1.428571429。 第四条规则设置默认的文本颜色为 #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 像素。 以上所有这些样式都可以在 scaffolding.less 中找到。 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 Bootstrap Bootstrap Bootstrap Bootstrap 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 form 元