标签：视觉 分享 网格 删除 trap 字体 nbsp class 大小
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。
既然我们在使用Bootstrap，我们可以通过居中头部元素来使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。
记住：你可以用空格分开多个class来为同一个元素添加多个 class 属性， 就像这样：
<h2 class="red-text text-center">your text</h2>
Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。
通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
这张图阐述了行内元素与块级元素的区别：
注意，这些按钮仍然需要 btn class。
深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。
添加Bootstrap的 btn-primary class 属性到按钮标签上。
注意：这个按钮仍然需要 btn 和 btn-block 属性！
Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上。
在你的 "Like" 按钮下面添加一个文本为 "Info" 的块级Bootstrap按钮，并为其添加 btn-info 和 btn-block class属性。
注意：这些按钮仍然需要 btn 和 btn-block class属性
Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。
创建一个文本为 "Delete" 的按钮，并且给它添加 class btn-danger。
注意：这些标签仍然需要 btn 与 btn-block class
Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：
请注意，在这张图表中，class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
你可以用 span 标签来创建行内元素。还记得我们是怎样使用 .btn-block来创建填满整行的按钮吗？
这张图展示了 inline 元素与 block-level 块级元素的区别：
通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
举例，"Top 3 things cats love" 元素的写法如下：
<p>Top 3 things cats <span class = "text-danger">love:</span></p>
让我们来为Cat Photo 应用做一个导航吧，把标题和惬意的猫图片放在同一行。
记住，Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。
这张图展示了 Bootstrap 的12栏栅格布局是如何工作的：
注意，在此图示中，我们使用了 col-md-* class 。此处 md 代表中等，* 指定了元素宽度应该占用的栏数。 在这个案例中，我们指定了元素在中等大小的屏幕（如笔记本等）上所占用的栏数。
在此应用中，我们将使用 col-xs-*， xs 意味着非常小（比如非常小的手机屏幕）， * 指定了元素宽度应该占用的栏数。
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：
<i class="fa fa-info-circle"></i>
举个例子：
代码如下：
<button class="btn btn-block btn-primary"> <i class="fa fa-thumbs-up"></i>Like</button>
效果如图：
将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽。
Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果，动手写代码体会一下）。
我们除了可以给元素增加 class 属性，还可以给你的每个元素增添一个 id 属性。
每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。
标签：视觉 分享 网格 删除 trap 字体 nbsp class 大小
原文地址：http://www.cnblogs.com/1598f/p/7648811.html
