欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrap入門(mén)教程(二)之固定的內(nèi)置樣式

 更新時(shí)間：2016年09月19日 10:06:50   投稿：mrr  
這篇文章主要介紹了BootStrap入門(mén)教程(二)之固定的內(nèi)置樣式的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧

相關(guān)閱讀：

BootStrap入門(mén)教程(一)之可視化布局

HTML5文檔類(lèi)型（Doctype）

Bootstrap使用了一些HTML5元素和CSS屬性，所以需要使用HTML5文檔類(lèi)型。

<!DOCTYPE html>
<html>
....
</html>

移動(dòng)設(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)頁(yè)加載時(shí)，以1:1的比例呈現(xiàn)。

　　可以為viewport meta標(biāo)簽添加user-scalable=no來(lái)禁止其縮放功能。

<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è)置有好有壞，難免嘛。

　　不想要下劃線的話(huà)可以在a鏈接上加一個(gè)名為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，會(huì)創(chuàng)建一個(gè)匿名的table-cell和一個(gè)新的塊格式化上下文。:before偽元素防止上邊距崩塌，:after偽元素清除浮動(dòng)。content:” ”修復(fù)一些Opera bug。

.container:after {
clear: both;
}

　　另外還有申請(qǐng)相應(yīng)的媒體查詢(xún)：

@media (min-width: 768px) {
.container {
width: 750px;
　　}
}

Bootstrap瀏覽器/設(shè)備支持

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 瀏覽器。

參考：http://www.runoob.com/bootstrap/bootstrap-css-overview.html

以上所述是小編給大家介紹的BootStrap入門(mén)教程(二)之固定的內(nèi)置樣式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論