BootStrap入門教程 二 之固定的內建樣式

2022-10-06 21:24:18 字數 1161 閱讀 5943

相關閱讀:

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...