bootstrap基础知识（一）－－排版

bootstrap基于jquery框架，使用jquery样式

一）排版

1)标题，副标题：

正标题副标题

2)段落强调()即加上class类名：

原样式代码：

.lead {

margin-bottom: 20px;

font-size: 16px;

font-weight: 200;

line-height: 1.4;

}

@media (min-width: 768px) {/*大中型浏览器字体稍大*/

.lead {

font-size: 21px;

  }

}

3)使用strong标签加粗字体

4)使用em或者是i标签来使得变成斜体

5)添加类名改变字体颜色： ·

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

6)添加类名控制文本对其风格：
 .text-left：左对齐

  .text-center：居中对齐

  .text-right：右对齐

  .text-justify：两端对齐

7）无序列表（标题前面是小黑点)

有序列表（标题前面是数字）

去点列表：加上类名：list-unstyled实现有序或者无序列表没有项目符号（即前面的小圆点或者数字）

内联列表：加上类名：list-inline实现列表水名并且去掉项目符号

定义列表：

总标题

解释

如下：

 

水平定义列表：

在定义列表基础上添加类名：dl-horizontal

宽屏效果： 

缩小屏幕：恢复定义列表样式

8)

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

2、

：一般是针对于多行代码（也就是成块的代码）
 
  
3、:一般是表示用户要通过键盘输入的内容
 
  
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于
代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。
 
  
在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
 
  

 
  
9)表格
 
  
添加至tr标签类名，可以改变每一行的颜色
 
  
.active:表示当前活动信息（灰色）
 
  
.success:表示成功或者正确（绿色）
 
  
.info:表示中立的信息或者行为（蓝色）
 
  
.warning:表示警告，特别注意（黄色）
 
  
.danger:表示危险或者可能错误（粉色）
 
  

 
  
 .table：基础表格
 
  
代码：
 
  
 －－－行
 －－－ 标题列
…
 －－－行
 －－－内容列
…
     …
 
  
 
  
 
  
表格标题
 
   
  
 
  
 
  
 
  
 
  
表格单元格
 
   
  
 
   
  
 
  
 
  

 
  
 .table-striped：斑马线表格
 
  
加上类名table table-striped
 
  

 
  
 .table-bordered：带边框的表格
 
  
加上类名table-bordered
 
  

 
  
 .table-hover：鼠标悬停高亮的表格
 
  
加上类名table table-hover
 
  
可以相互交叉使用如："table table-striped table-bordered table-hover“
 
  

 
  
 .table-condensed：紧凑型表格
 
  
添加类名：table table-condensed
 
  

 
  
.table-responsive：响应式表格
 
  
给个容器添加类名table-responsive