Bootstrap 10.10

基本的html模版

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

强调内容

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。用法如下：

我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，

我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。

强调相关的类

在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

• .text-muted：提示，使用浅灰色（#999）
• .text-primary：主要，使用蓝色（#428bca）
• .text-success：成功，使用浅绿色(#3c763d)
• .text-info：通知信息，使用浅蓝色（#31708f）
• .text-warning：警告，使用黄色（#8a6d3b）
• .text-danger：危险，使用褐色（#a94442）

.text-muted 效果
.text-primary效果

文本对齐风格

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

我居左
我居中

列表

Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

☑ 内联列表

☑ 描述列表

☑ 水平描述列表

列表--无序列表、有序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签），在样式方面，Bootstrap只是在此基础上做了一些细微的优化。

列表--去点列表

在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

列表--内联列表

Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

W3cplus
Blog
CSS3
jQuery
PHP

代码

在使用代码时，用户可以根据具体的需求来使用不同的类型：

1. ：一般是针对于单个单词或单个句子的代码

2. ：一般是针对于多行代码（也就是成块的代码）

3. :一般是表示用户要通过键盘输入的内容

正如前面所示，

元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
 
 
源码请查看bootstrap.css第731行~第734行 可修改
 
 
表格
 
 
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。
 
 
刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
 
 
☑ .table：基础表格
 
 
☑ .table-striped：斑马线表格
 
 
☑ .table-bordered：带边框的表格
 
 
☑ .table-hover：鼠标悬停高亮的表格
 
 
☑ .table-condensed：紧凑型表格
 
 
☑ .table-responsive：响应式表格
 
 
表格--表格行的类
 
 
Bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
 
 
 
  
 
   
 
     
   
 
  
 
  

    Paste_Image.png 
  
 
 
 
 
其使用非常的简单，只需要在元素中添加上表对应的类名，就能达到你自己需要的效果：
 
 
 …
 
 
表格--响应式表格
 
 
随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将
置于这个容器当中，这样表格也就具有响应式效果。


…

表单

微信截图_20151010153219.png

用到再学

按钮

基本按钮

Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。难能可贵的是，Bootstrap框架中的考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。

我是一个基本按钮

默认按钮

Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

默认按钮

Paste_Image.png

Paste_Image.png

主要   按钮.btn-primary

按钮大小

Paste_Image.png

大型按钮.btn-lg
正常按钮
小型按钮.btn-sm
超小型按钮.btn-xs 

块状按钮

在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。

大型按钮.btn-lg
正常按钮
小型按钮.btn-sm
超小型按钮.btn-xs

图像

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1. img-responsive：响应式图片，主要针对于响应式设计
2. img-rounded：圆角图片
3. img-circle：圆形图片
4. img-thumbnail：缩略图片

设置图片大小：
由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

图标

这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。

所有名称查看：

请点击：http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行～第2992行查阅。

网格系统

并不能看懂