BootStrap入門教程(二)之固定的內(nèi)置樣式
相關(guān)閱讀：
HTML5文檔類型（Doctype）
Bootstrap使用了一些HTML5元素和CSS屬性，所以需要使用HTML5文檔類型。
<!DOCTYPE html> <html> .... </html>
移動設(shè)備優(yōu)先
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
寬度設(shè)置為device-width可以確保它能正確呈現(xiàn)在不同設(shè)備上。
initial-scale=1.0確保網(wǎng)頁加載時，以1:1的比例呈現(xiàn)。
可以為viewport meta標(biāo)簽添加user-scalable=no來禁止其縮放功能。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
響應(yīng)式圖像
<img src="..." class="img-responsive" alt="響應(yīng)式圖像">
bootstrap.css里設(shè)置了img-responsive的屬性：
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
基本的全局顯示
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
body {margin:0}
鏈接樣式
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
默認(rèn)設(shè)置有好有壞，難免嘛。
不想要下劃線的話可以在a鏈接上加一個名為btn的class，該class的默認(rèn)設(shè)置如下：
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;}
避免跨瀏覽器的不一致
Normalize.css提供了更好的跨瀏覽器一致性。
容器（Container）
<div class=”container”> .. </div>
.container的樣式：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
左右外邊距交由瀏覽器決定。
由于內(nèi)邊距是固定寬度，默認(rèn)情況下容器是不可嵌套的。
.container:before,.container:after {
display: table;
content: " ";
}
設(shè)置display為table，會創(chuàng)建一個匿名的table-cell和一個新的塊格式化上下文。:before偽元素防止上邊距崩塌，:after偽元素清除浮動。content:” ”修復(fù)一些Opera bug。
.container:after {
clear: both;
}
另外還有申請相應(yīng)的媒體查詢：
@media (min-width: 768px) {
.container {
width: 750px;
}
}
Bootstrap瀏覽器/設(shè)備支持
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 瀏覽器。
參考：http://www.runoob.com/bootstrap/bootstrap-css-overview.html
以上所述是小編給大家介紹的BootStrap入門教程(二)之固定的內(nèi)置樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
微信小程序?qū)崿F(xiàn)3D輪播圖效果（非swiper組件）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)3D輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
bootstrap-paginator服務(wù)器端分頁使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap-paginator服務(wù)器端分頁的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Bootstrap模態(tài)框調(diào)用功能實現(xiàn)方法
這篇文章主要介紹了Bootstrap模態(tài)框調(diào)用功能實現(xiàn)方法的相關(guān)資料，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
原生JS實現(xiàn)風(fēng)箱式demo,并封裝了一個運動框架(實例代碼)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)風(fēng)箱式demo,并封裝了一個運動框架(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
Express框架Router?Route?Layer對象使用示例詳解
這篇文章主要為大家介紹了Express框架Router?Route?Layer對象使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
javascript設(shè)置頁面背景色及背景圖片的方法
這篇文章主要介紹了javascript設(shè)置頁面背景色及背景圖片的方法,涉及JavaScript動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript中數(shù)組去重的5種方法，文中講解非常詳細(xì)，實例代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
本篇文章主要是對js中浮點型運算BUG的解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
昨天碰到一道關(guān)于如何解決有序數(shù)組的連接問題，這是一個很常見的問題。但是這里要考慮到代碼的效率問題，因為要連接的數(shù)組都是有序的，這是一個非常重要的前提條件2013-10-10
JavaScript中net::ERR_CONNECTION_REFUSED解決方法大全
在一次測試中遇到了報net::ERR_CONNECTION_REFUSED的錯誤,五哦一下面這篇文章主要給大家介紹了關(guān)于JavaScript中net::ERR_CONNECTION_REFUSED解決方法的相關(guān)資料,需要的朋友可以參考下2022-10-10