bootstrap学习（一）

一、全局样式style.css

移除body的maigin
背景白色
设置了基本的字体样式
设置全局链接样式，鼠标悬停时才会出现下划线

二、标题

重置h1~h6样式

重置了margin-top（h1_{h3：20px；h4}h6：10px）
重置了margin-bottom（10px）
所有标题行高1.1（font-size的1.1），颜色字体继承父级
固定字体大小
h1：36px
h2：30px
h3：24px
h4：18px
h5：14px
h6：12px

标题演示

标题类名

效果与h1~h6标签相同

<div class="h1">hello world</div>
<div class="h2">hello world</div>
<div class="h3">hello world</div>
<div class="h4">hello world</div>
<div class="h5">hello world</div>
<div class="h6">hello world</div>

标题类名

副标题

字体大小继承父级的65%

<div class="h1">hello world<small>This is first bootstrap class</small></div>

副标题

三、强调内容

.lead一般配合段落标签使用

<p class="lead">我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

lead强调

颜色强调相关的类

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

<h1 class="text-muted">hello world</h1>
<h2 class="text-primary">hello world</h2>
<h3 class="text-success">hello world</h3>
<h4 class="text-info">hello world</h4>
<h5 class="text-warning">hello world</h5>
<h6 class="text-danger">hello world</h6>

颜色强调

四、文本对齐

.text-left：左对齐
.text-right：右对齐
.text-center：居中
.text-justify：两端对齐（这个没出效果，汗~~）

<p class="text-left">我是段落</p>
<p class="text-center">我是段落</p>
<p class="text-right">我是段落</p>
<p class="text-justify">我是段落</p>

对齐方式

五、列表

.list-unstyled：ul、ol除去序列样式
.list-inline：ul、ol水平列表
.dl-horizontal：dl水平列表

六、代码风格

多行代码中用.pre-scrollable使超出部分用滚动条控制显示

<pre class="pre-scrollable">
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
    function something(){
        console.log('haha')
    }
</pre>

代码滚动条

七、表格

基础表格

.table

原始样式

附加样式表格

.table-striped：斑马线

斑马线

.table-bordered：带边框

边框

.table-hover：鼠标悬停高亮

悬停高亮

.table-condensed：紧凑型（高度变小）

紧凑

响应式表格

当视窗宽度小于768px，且文字需要换行时出现滚动条

.responsive

响应式

八、图片

.img-responsive：响应式图片

响应式

.img-rounded：圆角风格

圆角

.img-cicle：圆形风格

圆形

.img-thumbnail：缩略图片（外边多个1px边框）

缩略

九、图标

Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

这些样式可以加载在任何标签中，不过通常来说都是使用的span标签

图标样式地址

标签样式

通过.glyphicon来实现获取

<span class="glyphicon glyphicon-road"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-log-in"></span>
<span class="glyphicon glyphicon-user"></span>

标签样式举例

bootstrap学习（一）