Bootstrap之CSS篇(1)

本篇我們來學習bootstrap在CSS布局中的使用。

bootstrap CSS概述

Bootstrap的開發中使用了HTML5元素和CSS屬性，為了保證在瀏覽器中的兼容性，強列建議在所有的Bootstrap項目中使用HTML5的文檔類型，否則將不能確保項目的效果。

Bootstrap 3對移動設備進行了優化，以前需要引入一個移動設備的CSS資源，新的版本默認就可以支持移動設備。

移動設備優先適配，其次才是面桌設備，這個特點讓Bootstrap更適合開發移動設備網頁應用。

Bootstrap開發移動設備網站時，需要在head中聲明viewport meta標簽

width屬性，控制設備寬度，確保它能正確呈現在不同的設備上

initial-scale=1.0 以1：1比例呈現，無縮放效果

我們能過viewport meta標簽來，禁止移動設備瀏覽器使用縮放功能，讓網站擁有原生應用一樣的效果只能上下滑動。

為img標簽添加img-responsive這個類，即可讓圖像擁有非常友好的響應式布局支持。

分析.img-responsive這個class包含的CSS屬性

.img-responsive?{ ????display:block; ????height:auto; ????max-width:100%; }

img元素將以block塊級元素顯示，并且高度為瀏覽器自適應，最大寬度為100%，這些屬性可以讓圖像按比例縮放不超過父級標簽，從而非常友好的支持響應式布局。

如果圖像需要水平居中，可以在追加.center-block類，因為display:block所以不能使用.text-center來實現居中

Bootstrap默認的全局樣式

body{ ????font-family:?"Helvetica?Neue",?Helvetica,?Arial,?sans-serif; ????font-size:?14px; ????line-height:?1.428571429; ????color:?#333333; ????background-color:?#ffffff; }

我們還可以通過body{margin:0}來取消body默認8px的邊距

Bootstrap默認的排版樣式

@font-family-base @font-size-base @line-height-base

以上三個屬性設置了基本的排版樣式

Bootstrap默認的鏈接樣式

為鏈接設置了基本顏色@link-color，并且當鏈接處于:hover狀態時才添加下劃線

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; }

上述的幾個基本樣式都可以在scaffolding.less文件中找到

Normalize.css是一個很小的css文件，它在HTML元素樣式上提供了跨瀏覽器的高度一致性。

Normalize.css它是為HTML5準備的，是CSS reset優質的替代方案。

-- Bootstrap使用Normalize來建立跨瀏覽器一致性

保護有用的瀏覽器樣式

為大部份html元素提供一般化的樣式

修復瀏覽器自身的bug

通常在Bootstrap中我們使用Container class來放置網頁的主體內容

......