Bootstrap响应式布局

(一)响应式 Web 设计的 CSS

在网页的头部区域加入下面这行代码：<meta name="viewport" content="width=device-width, initial-scale=1.0">
①视口的 meta 元标签，加载与特定视口相关的样式。
②width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率。
③initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。

通过查找响应式 CSS 文件,许多公共声明后边,有各种以 '@media'(媒体查询技术) 开始的区域。这就是如何编写适用于各种设备的样式。
一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。


(二)排版
使用 Bootstrap 工具包来创建标题、段落、列表和其他内联元素
(三)代码
Bootstrap 允许两种方式显示代码：
第一种 <code> 标签。如果想要内联显示代码，那么应该使用 <code> 标签。
第二种 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，应该用<pre>标签。
请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和 &gt;。
(四)表格
①基本的表格
只带有内边距（padding）和水平分割的基本表，请添加 class .table
②条纹表格,边框表格,悬停表格,精简表格,上下文类表格
③响应式表格:把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
例子:
<div class="table-responsive">(表响应)
  <table class="table">
    <caption>响应式表格布局</caption>(关于表格存储内容的描述或总结)
  </table>
</div>

(五)表单
表单布局:垂直表单,内联表单,水平表单

(六)按钮标签
可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

(七)图片
①Bootstrap提供了三个可对图片应用简单样式的class：
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
②<img> 标签添加 .img-responsive(图片响应) 类来让图片支持响应式设计,图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
例子:<img src="background.jpg" class="img-responsive" alt="Cinque Terre">

(八)辅助类:
文本,背景,浮动,清除浮动,显示隐藏,关闭按钮,插入,屏幕阅读器

(九)响应式实用工具:
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
注意:需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
实例:http://www.runoob.com/try/try2.php?filename=bootstrap3-resonsive-utilies

 

 

Bootstrap布局组件

使用时注意:对于属性的定义，确保全部使用双引号，绝不要使用单引号。

自适应:768--992--1200像素

①字体图标
②下拉菜单
③按钮组
④按钮下拉/上拉菜单
⑤输入框组:大小,带下拉框的按钮组,分割的下拉菜单按钮
⑥导航元素:带有下拉菜单的标签 <nav> 标签是 HTML 5 中的新标签,定义导航链接的部分
⑦导航栏与面包屑导航（Breadcrumbs）:固定在头部底部,或者跟随页面滚动
⑧缩略图
⑨面板:面板标题,面板脚注,带语境色彩的面板,带列表组的面板

Bootstrap 插件
所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery
①滚动监听
②折叠,轮播