bootstrap2文檔的學習

時間 2019-11-26

標籤 bootstrap2 bootstrap 文檔學習欄目 Bootstarp 简体版

原文原文鏈接

就像剛開始的優雅，直觀，強大的前端框架，讓web開發更快，更容易，bootstrap給個人感受就是把經常使用的佈局，組件（導航，列表，按鈕，表格），還有規範化顏色等等，同時它的遍歷不至於此，他還支持了自定義，利用less，全局定義這些變量，讓你自定義區修改，同時還有更多的圖標插件能夠用。在佈局方面，更好的迎合了目前市場上移動端的出現，有了流網格，咱們就不用再去考慮去兼容不一樣屏幕的展現端。

一、框架

bootsrap構建於12列響應式網格，佈局和組件。同時基於html5和jquery

<!DOCTYPE html>

...

</html>

因此文件頭必須是html5

移除了body的margin
設置body的背景顏色爲 background-color: white;
使用@baseFontFamily, @baseFontSize, 和 @baseLineHeight 屬性做爲咱們排版的基礎
經過 @linkColor 設置全局鏈的接顏色, 並適用於:hover狀況下的下劃線

而後在scaffolding.less文件裏設置了一些基礎的全局展現效果、排版、連接樣式

總體佈局分爲兩類，和position屬性是同樣的，分爲默認的網格系統和流式網格系統，主要區別是流式網格系統是按照百分比，每一行都是12個，這個下面會說：

1 網格系統

Bootstrap的網格(柵格)系統在默認狀況下采用 12 列, 可製做寬度爲940px的容器, 同時沒有響應式功能. 當加入響應式CSS文件, 網格會根據視口大小適應724px與1170px寬度. 當視口低於767px寬度, 列會成爲流式, 並上下垂直放置.

對於一個簡單的兩列布局, 建立一個.row和添加帶有(合適)數字的.span*做爲列. 由於這是一個12列的網格, 因此每個 .span* 都是這12個數字, 而且每行的列(span)的數字相加必須等於12 (或者等於該父級).css

<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

在這個例子, 咱們用了 .span4 和 .span8, 一共是12列, 這就造成一個完整的行html

偏移是.offset*屬性，指定單位偏移量

當須要嵌套時，在默認的網格系統裏, 要實現嵌套可對已有的 .span* 內添加一個新的 .row 並加入 .span*. 嵌套在內的列數總和要等於父級列.，固然也能夠不相同。

2 流式網格系統

流式網格的列寬使用百分比, 並非具體像素值. 它對於固定的網格系統具備相同的應對能力, 關鍵是在不一樣屏幕分辨率和設備之間, 又能夠以正確的比例顯示

只須要把.row 改爲.row-fluid ，列的屬性不變，一樣偏移也是相同的，可是嵌套就有點不一樣

嵌套在內的列數總和須要等於12. 這是由於流式網格是用百分比設置寬度, 並非像素值.

3 固定佈局 container

建立一個流式、兩欄的佈局, 只須要 <div class="container-fluid">—這很是適合應用於程序和文檔類的網站.（可是通過測試，若是分紅兩欄，可是內容仍是會有重疊）

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>

4 響應式設計

固然不少時候要檢測用戶使用的屏幕多大，這須要咱們檢測，使用響應式功能更爲方便

在你項目文件中的<head>裏, 添加一個如例子所示的meta標籤和一個響應式樣式表來開始使用響應式. 若是已經在自定義頁面編譯好一個Bootstrap, 那麼只需添加一個meta標籤.前端

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意! Bootstrap在默認狀況下是沒有使用響應式功能的, 由於不是任何狀況都須要使用到. 咱們並非讓開發者移除此功能, 而是最好在須要使用的時候才使用它.html5

二基本css

基礎的css包括排版，代碼輸入，表格，表單，按鈕，圖像，最後還免費提供不少Glyphicons圖標。

1 排版

bootstrap對標題h1-h6都進行了修改，還有全局默認的font-size，line-hegiht 以及段內的行間距。

新定義了突出段落 .lead <p class="lead">...</p>

強調<small> <strong> <em> 還有html5的<b> <i>

對齊 .text-left .text-center .text-right

強調顏色規範了五中顏色 text-warning text-error text-info text-sucess

縮寫很厲害啦， <abbr> 利用title屬性能夠將縮寫包圍的字母顯示全寫，<abbr title="attribute">attr</abbr>，之前都要用link實現的

地址管理，<address> 讓html更加語義化，畢竟html是超文本標記語言

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

*css 層疊樣式表 cascading style sheets

引用 <blockquote>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

列表沒變有序ol 無序 ul，固然還有不少添加的css， .unstyled 無樣式， .inline-block水平排列，

2 代碼

由於須要一些特殊標記，如<>,因此添加了<code>

For example, <code><section></code> should be wrapped as inline

3 表格

添加屬性

.table-striped在表格內部添加條樣，間隔一個一個 .table-bordered（圓角） .table-hover在table內部使用停懸效果 .table-condensed 是得單元格padding減半，讓表格更加緊湊

一樣仍是四個顏色 .success .error .warning .info

4 表單

Label nameExample block-level help text here.Check me out