1. 程式人生 > >bootstrap前端框架使用總結分享

bootstrap前端框架使用總結分享

水平滾動 all auto 積極 component 默認 word evel 符號

1、bootstrap 排版

全局樣式style.css:

1、移除body的margin聲明

2、設置body的背景色為白色

3、為排版設置了基本的字體、字號和行高

4、設置全局鏈接顏色,且當鏈接處於懸浮“:hover”狀態時才會顯示下劃線樣式

標題 h1-h6

HTML 中的所有標題標簽,

均可使用。另外,還提供了 .h1 到 .h6 類選擇器,為的是給內聯(inline)屬性的文本賦予標題的樣式。

1、重新設置了margin-top和margin-bottom的值

2、h1~h3重置後的值都是20px;h4~h6重置後的值都是10px

3、所有標題的行高都是1.1(也就是font-size的1.1倍),而且文本顏色和字體都繼承父元素的顏色和字體

4、固定不同級別標題字體大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px

在標題內還可以包含 標簽或賦予 .small 類的元素,可以用來標記副標題。

<h2>Bootstrap heading <small>Secondary Text</small></h2>

Bootstrap heading <small style="color:gray;"> Secondary text</small>

p 標簽

(段落)元素還被設置底部外邊距(margin)10px。

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.


通過添加 .lead 類可以讓段落突出顯示。
<pre style="font-size:21px;font-family:宋體">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</pre>

強調內容的標簽

<lead>一般配合段落標簽使用

強調相關的類

text-muted:  提示,使用淺灰色(#999)
text-primary:主要,使用藍色(#428bca)
text-success:成功,使用淺綠色(#3c763d)
text-info:   通知信息,使用淺藍色(#31708f)
text-warning:警告,使用黃色(#8a6d3b)
text-danger: 危險,使用褐色(#a94442)

文本對齊風格

text-left:   左對齊
text-center: 居中對齊
text-right:  右對齊
text-justify:兩端對齊

列表

1、ul 、 ol <span style="color:red;">去序列</span>:

class=“list-unstyled“

2、ul 、 ol <span style="color:red;">水平排列</span>(把垂直列表換成水平列表,而且去掉項目符號(編號),保持水平顯示)

class=“list-inline”

3、dl水平列表(屏幕大於768px的時候,添加類名“.dl-horizontal”才具有水平定義列表效果)

class=“dl-horizontal”

圖片

使用方法非常簡單,只需要在