真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Bootstrap排版樣式-創(chuàng)新互聯(lián)

頁面排版
Bootstrap 提供了一些常規(guī)設(shè)計(jì)好的頁面排版的樣式供開發(fā)者使用。
1.頁面主體
Bootstrap 將全局 font-size 設(shè)置為 14px,line-height 行高設(shè)置為 1.428(即
20px);

段落元素被設(shè)置等于 1/2 行高(即 10px);顏色被設(shè)置為#333。
//創(chuàng)建包含段落突出的文本

Bootstrap 框架


Bootstrap 框架


Bootstrap 框架


Bootstrap 框架


Bootstrap 框架

創(chuàng)新互聯(lián)建站憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn),為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù),我們始終認(rèn)為:好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),以良好的商業(yè)信譽(yù),完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

2.標(biāo)題
//從 h2 到 h7

Bootstrap 框架

//36px

Bootstrap 框架

//30px

Bootstrap 框架

//24px
Bootstrap 框架
//18px
Bootstrap 框架
//14px
Bootstrap 框架 //12px

我們從 Firebug 查看元素了解到,Bootstrap 分別對(duì) h2 ~ h7 進(jìn)行了 CSS 樣式的重構(gòu), 并且還支持普通內(nèi)聯(lián)元素定義 class=(.h2 ~ h7)來實(shí)現(xiàn)相同的功能。
//內(nèi)聯(lián)元素使用標(biāo)題字體
Bootstrap

注:通過 Firebug 查看元素還看到,字體顏色、字體樣式、行高均被固定了,從而保證了統(tǒng)一性,而原生的會(huì)根據(jù)系統(tǒng)內(nèi)置的選字體決定,顏色是最黑色。

在 h2 ~ h7 元素之間,還可以嵌入一個(gè) small 元素作為副標(biāo)題,
//在標(biāo)題元素內(nèi)插入 small 元素

Bootstrap 框架 Bootstrap 小標(biāo)題

Bootstrap 框架 Bootstrap 小標(biāo)題


Bootstrap 框架 Bootstrap 小標(biāo)題


Bootstrap 框架 Bootstrap 小標(biāo)題

Bootstrap 框架 Bootstrap 小標(biāo)題

Bootstrap 框架 Bootstrap 小標(biāo)題

通過 Firebug 查看,我們發(fā)現(xiàn) h2 ~ h4 下 small 元素的大小只占父元素的 65%,那么通過計(jì)算(查看 Firebug 計(jì)算后的樣式),h2 ~ h4 下的 small 為 23.4px、19.5px、15.6px; h5 ~ h7 下 small 元素的大小只占父元素的 75% ,分別為:13.5px、10.5px、9px。
在 h2 ~ h7 下的 small 樣式也進(jìn)行了改變,顏色變成淡灰色:#777,行高為 1,粗度為 400。

3.內(nèi)聯(lián)文本元素
//添加標(biāo)記,元素或.mark 類

Bootstrap框架

//各種加線條的文本
Bootstrap 框架 //刪除的文本
Bootstrap 框架 //無用的文本
Bootstrap 框架 //插入的文本
Bootstrap 框架 //效果同上,下劃線文本

//各種強(qiáng)調(diào)的文本
Bootstrap 框架 //標(biāo)準(zhǔn)字號(hào)的 85%
Bootstrap 框架 //加粗 700
Bootstrap 框架 //傾斜

4.對(duì)齊
//設(shè)置文本對(duì)齊

Bootstrap 框架

//居左

Bootstrap 框架

//居中

Bootstrap 框架

//居右

Bootstrap 框架

//兩端對(duì)齊,支持度不佳

Bootstrap 框架

//不換行

5.大小寫
//設(shè)置英文文本大小寫

Bootstrap 框架

//小寫

Bootstrap 框架

//大寫

Bootstrap 框架

//首字母大寫

6.縮略語
//縮略語
Bootstrap框架

7.地址文本
//設(shè)置地址,去掉了傾斜,設(shè)置了行高,底部 20px


Twitter, Inc.
795 Folsom Ave, Suite 600

San Francisco, CA 94107

P: (123) 456-7890

8.引用文本
//默認(rèn)樣式引用,增加了做邊線,設(shè)定了字體大小和內(nèi)外邊距


Bootstrap 框架

//反向


Bootstrap 框架

9.列表排版
//移出默認(rèn)樣式


  • Bootstrap 框架

  • Bootstrap 框架

  • Bootstrap 框架

  • Bootstrap 框架

  • Bootstrap 框架

//設(shè)置成內(nèi)聯(lián)


  • Bootstrap 框架

  • Bootstrap 框架

  • Bootstrap 框架

  • Bootstrap 框架

  • Bootstrap 框架

//水平排列描述列表


Bootstrap

Bootstrap 提供了一些常規(guī)設(shè)計(jì)好的頁面排版的樣式供開發(fā)者使用。

10.代碼
//內(nèi)聯(lián)代碼

//用戶輸入
press ctrl + ,

//代碼塊

Please input...

Bootstrap 還列舉了表示標(biāo)記變量,表示程序輸出,只不過沒有重新復(fù)寫 CSS。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。


分享名稱:Bootstrap排版樣式-創(chuàng)新互聯(lián)
文章分享:http://weahome.cn/article/googo.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部