相關閱讀:
bootstrap入門教程(一)之視覺化布局
html5文件型別(doctype)
bootstrap使用了一些html5元素和css屬性,所以需要使用html5文件型別。
....
移動裝置優先
寬度設定為device-widt程式設計客棧h可以確保它能正確呈現在不同裝置上。
initial-scale=1.0確保網頁載入時,以1:1的比例呈現。
可以為viewport meta標籤新增user-scalable=no來禁止其縮放功能。
響應式影象
bootstrap.css裡設定了img-responsive的屬性:
.img-responsive
基本的全域性顯示
body
body
鏈結樣式
a:hover,
a:focus
a:focus
預設設定有好有壞,難免嘛。
不想要下劃線的話可以在a鏈結上加乙個名為btn的class,該class的預設設定如下:
a:hover,
a:focus
a:focus
避免跨瀏覽器的不一致
normalize.css提供了更好的跨瀏覽器一致性。
容器(container)
...container的樣式:
.container
左右外邊距交由瀏覽器決定。
由於內邊距是固定寬度,預設情況下容器是不可巢狀的。
.container:before,.container:after
設定display為table,會建立乙個匿名的table-cell和乙個新的塊格式化上下文。:before偽元素防止上邊距崩塌,:after偽元素清除浮動。content:」 」修復一些opera bug。
.container:after
另外還有申請相應的**查詢:
@media (min-width: 768px)
}bootstrap瀏覽器/裝置支援
* bootstrap 支援 internet explorer 8 及更高版本的 ie 瀏覽器。
參考:本文標題: bootstrap入門教程(二)之固定的內建樣式
本文位址: /ruanjian/j**a/163800.html
BootStrap入門教程 二
上講回顧 bootstrap的手腳架 scaffolding 提供了固定 fixed 和流式 fluid 兩種布局,它同時建立了乙個寬達940px和12列的格網系統。基於手腳架 scaffolding 之上,bootstrap的基礎css base css 提供了一系列的基礎html頁面要素,旨在為...
React入門教程(二)
react基礎總結 續 示例 commentbox react createclass hello,world i am a commentbox.reactdom render react createelement commentbox null document getelementbyid ...
Docker 入門教程(二)
首先,讓我們通過下面的命令來檢查docker的安裝是否正確 docker info 如果沒有找到這條命令,則表示docker安裝錯誤。如果安裝正確,則會輸出類似下面的內容 到 這一步docker裡還沒有映象或是容器。所以,讓我們通過使用命令預先構建的映象來建立來乙個 sudo docker pull...