Bootstrap分析

Bootstrap的基本的HTML模板作者：大菽Bootstrap一、HTML5文档类型（Doctype）{Bootstrap使用了一些HTML5元素和CSS属性}!DOCTYPEhtmlhtml..../html二、为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签。metaname=viewportcontent=width=device-width,initial-scale=1.0三、响应式图像imgsrc=...class=img-responsivealt=响应式图像.img-responsive{display:inline-block;height:auto;max-width:100%;}Bootstrap四、全局显示、排版和链接body{font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.428571429;color:#333333;background-color:#ffffff;}第一条规则设置body的默认字体样式为HelveticaNeue,Helvetica,Arial,sans-serif。第二条规则设置文本的默认字体大小为14像素。第三条规则设置默认的行高度为1.428571429。第四条规则设置默认的文本颜色为#333333。最后一条规则设置默认的背景颜色为白色。a:hover,a:focus{color:#2a6496;text-decoration:underline;}a:focus{outline:thindotted#333;outline:5pxauto-webkit-focus-ring-color;outline-offset:-2px;}所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为#2a6496。同时，会呈现一条下划线。除此之外，点击过的链接，会呈现一个颜色码为#333的细的虚线轮廓。另一条规则是设置轮廓为5像素宽，且对于基于webkit浏览器有一个-webkit-focus-ring-color的浏览器扩展。轮廓偏移设置为-2像素。以上所有这些样式都可以在scaffolding.less中找到。BootstrapBootstrap容器（Container）divclass=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){...}基本的网格结构divclass=containerdivclass=rowdivclass=col-*-*/divdivclass=col-*-*/div/divdivclass=row.../div/divdivclass=container....BootstrapBootstrapBootstrapBootstrapBootstrap表单布局Bootstrap提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单垂直或基本表单基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：向父form元素添加role=form。把标签和控件放在一个带有class.form-group的div中。这是获取最佳间距所必需的。向所有的文本元素input、textarea和select添加class.form-control。内联表单如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向form标签添加class.form-inline。Bootstrap水平表单水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：向父form元素添加class.form-horizontal。把标签和控件放在一个带有class.form-group的div中。向标签添加class.control-label。支持的表单控件Bootstrap支持最常见的表单控件，主要是input、textarea、checkbox、radio和select。输入框（Input）最常见的表单文本字段是输入框input。用户可以在其中输入大多数必要的表单数据。Bootstrap提供了对所有原生的HTML5的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。适当的type声明是必需的，这样才能让input获得完整的样式。文本框（Textarea）当您需要进行多行输入的时，则可以使用文本框textarea。必要时可以改变rows属性（较少的行=较小的盒子，较多的行=较大的盒子）。Bootstrap选择框（Select）当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。使用select展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。使用multiple=multiple允许用户选择多个选项。BootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrap