Bootstrap学习(一)

留坑待用

---

一、排版

1.标题

元素	字体大小	计算比例
h1	36px	14px * 2.60
h2	30px	14px * 2.15
h3	24px	14px * 1.70
h4	18px	14px * 1.25
h5	14px	14px * 1
h6	12px	14px * 0.85

注意：

h1h2h3	margin-top：20px margin-bottom：10px
h4h5h6	margin-top：10px margin-bottom：10px

2.段落

1.Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：

p {
 margin: 0 0 10px;
}

3.强调粗体斜体

小
粗
斜体

1.突出强调.lead (

内容会变大

)

2.强调文本

.text-muted 效果

.text-primary效果

.text-success效果

.text-info效果

.text-warning效果

.text-danger效果

4.文本对齐风格

左对齐text-left
居中text-center
右对齐text-right
两端对齐text-justify

左对齐text-left

居中text-center

右对齐text-right

两端对齐text-justify

5.列表

去点去序号：.list-unstyled
内联一排：.list-inline
水平定义列表就像内联列表一样，Bootstrap可以给

添加类名.dl-horizonta给定义列表实现水平显示效果。屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号

6.代码

1、使用来显示单行内联代码
2、使用

来显示多行块代码

大块显示，原格式不变。代码太多，控制代码块的大小。添加类名“.pre-scrollable”，控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
 
  
 
  
3、使用来显示用户输入代码
 
  
7.表格
 
  
 
   
 
    
 
     
类名
 
     
样式
 
    
 
   
 
   
 
    
 
     
.table
 
     
基础表格
 
    
 
    
 
     
.table-striped
 
     
斑马线表格
 
    
 
    
 
     
.table-bordered
 
     
带边框的表格
 
    
 
    
 
     
.table-hover
 
     
鼠标悬停高亮的表格
 
    
 
    
 
     
.table-condensed
 
     
紧凑型表格
 
    
 
    
 
     
.table-responsive
 
     
响应式表格
 
    
 
   
 
  
 
  
注意: 
 .table-responsive|响应式表格 当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
 
  
用法：
<div class="table-responsive">
<table class="table table-bordered">
   …
table>
div>
 
  
表格的背景颜色
 
  
 
   
 
    
 
     
类名
 
     
描述
 
    
 
   
 
   
 
    
 
     
.active
 
     
表示当前活动的信息
 
    
 
    
 
     
.success
 
     
表示成功或者正确的行为
 
    
 
    
 
     
.info
 
     
表示中立的信息或行为
 
    
 
    
 
     
.warning
 
     
表示警告，需要特别注意
 
    
 
    
 
     
.danger
 
     
表示危险或者可能是错误的行为