bootstrap 學習筆記

時間 2019-11-12

原文原文鏈接

1、bootstrap 入門

一、下載已編譯版 bootstrap

　　地址：http://twitter.github.com/bootstrap/assets/bootstrap.zipcss

二、文檔結構

 1 bootstrap/
 2   ├── css/
 3   │   ├── bootstrap.css
 4   │   ├── bootstrap.min.css     （壓縮版）
 5   ├── js/
 6   │   ├── bootstrap.js
 7   │   ├── bootstrap.min.js      （壓縮版）
 8   └── img/
 9       ├── glyphicons-halflings.png
10       └── glyphicons-halflings-white.png

2、bootstrap 框架

一、全局設置

bootstrap 框架必須基於html5html

1 <!DOCTYPE html>
2 <html lang="en">
3   ...
4 </html>

1.一、bootstrap 配置html5

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Bootstrap 101 Template</title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <!-- Bootstrap 基礎樣式-->
 7     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 8   </head>
 9   <body>
10     <h1>Hello, world!</h1>
11     <script src="http://code.jquery.com/jquery.js"></script>
12     <script src="js/bootstrap.min.js"></script>
13   </body>
14 </html>

二、默認爲格柵佈局

默認狀況下, 採用12 列方式佈局 , 並造成一個寬度爲940px的容器
響應式CSS文件時, 網格會根據可視窗口大小適應724px與1170px寬度. 在可視窗口低於767px寬度, 列會成爲流式, 在垂直方向堆疊

2.一、格柵樣式的基本代碼

建立一個.row 容器
在容器中加入合適數量的 .span* 列便可
全部 .span* 列所跨越的柵格數之和最可能是12(或者等於其父容器的柵格數)。

1 <div class="row"> 
2   <div class="span4">...</div>
3   <div class="span8">...</div>
4 </div>
5

2.二、列偏移jquery

把列向右移動可以使用.offset* （*：表明偏移值）

1 <div class="row">
2   <div class="span4">...</div>
3   <div class="span3 offset2">...</div>
4 </div>
5

以上代碼爲，偏移2列git

2.三、列的嵌套github

在默認的網格系統中, 在已有的.span* 內添加一個新的.row 並加入 .span* 列, 就可實現嵌套. 嵌套在內的每列列數總和要等於父級列.bootstrap

也就是說，把某一列分紅 N 列，N 的數量總和不能大於父列的值。 api

1 <div class="row">
2   <div class="span9">
3     Level 1 column
4     <div class="row">
5       <div class="span6">Level 2</div>
6       <div class="span3">Level 2</div>
7     </div>
8   </div>
9 </div>

三、流式格柵佈局

　　流式柵格系統對每一列的寬度使用百分比而不是像素數量。框架

3.一、流式柵格樣式HTML代碼ide

　　將.row 替換爲.row-fluid ，這樣能方便的在流式與固定柵格之間切換。

1 <div class="row-fluid">
2   <div class="span4">...</div>
3   <div class="span8">...</div>
4 </div>

3.二、流式的列偏移

　　定義方式和固定柵格系統相同: 在任何想偏移的列添加.offset*便可.

1 <div class="row-fluid">
2   <div class="span4">...</div>
3   <div class="span4 offset2">...</div>
4 </div>

3.三、流式的嵌套

　　和固定網格的嵌套有一點不一樣: 嵌套的列數總和不須要等於父級列.

　　相反的, 每一個級別的嵌套列屬性將被重置, 由於嵌套列會佔據父列的100%寬度.

 1 <div class="row-fluid">
 2   <div class="span12">
 3     Fluid 12
 4     <div class="row-fluid">
 5       <div class="span6">
 6         Fluid 6
 7         <div class="row-fluid">
 8           <div class="span6">Fluid 6</div>
 9           <div class="span6">Fluid 6</div>
10         </div>
11       </div>
12       <div class="span6">Fluid 6</div>
13     </div>
14   </div>
15 </div>
16

四、佈局

4.1 固定式佈局

　　常見的固定寬度的佈局方式，只需添加 <div class="container"> 。　　

1 <body>
2   <div class="container">
3     ...
4   </div>
5 </body>
6

4.2 流式佈局

　　只須要<div class="container-fluid">—這很是適合應用於程序和文檔類的網站。

　　如：流式兩列式佈局

 1 <div class="container-fluid">
 2   <div class="row-fluid">
 3     <div class="span2">
 4       <!--Sidebar content-->
 5     </div>
 6     <div class="span10">
 7       <!--Body content-->
 8     </div>
 9   </div>
10 </div>                    
11

五、響應式設計

　　在<head>裏,

添加一個 meta標籤：<meta name="viewport" content="width=device-width, initial-scale=1.0">
添加一個響應式樣式表：<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

5.1 bootstrap 支持的設備

類型	版面寬度	列寬	間隙
大分辨率	大於1200px	70px	30px
默認	大於980px	60px	20px
平板	大於768px	42px	20px
手機到平板	小於767px	流式列, 沒有固定寬度
手機	小於480px	流式列, 沒有固定寬度

　　.col-xs-* 表示：超小屏幕

　　.col-sm-* 表示：自適應手機

　　.col-md-* 表示：平板

　　.col-lg-* 表示：PC機、電腦等大分辨率設備

5.2 響應式設計支持的屬性

　　須要謹慎使用這些工具，避免在同一個站點建立徹底不一樣的版本。響應式實用工具目前只適用於塊和表切換。

屬性	手機767px及如下	平板979px與768px之間	電腦默認
`.visible-phone`	顯示	隱藏	隱藏
`.visible-tablet`	隱藏	顯示	隱藏
`.visible-desktop`	隱藏	隱藏	顯示
`.hidden-phone`	隱藏	顯示	顯示
`.hidden-tablet`	顯示	隱藏	顯示
`.hidden-desktop`	顯示	顯示	隱藏

3、基本的CSS樣式

一、排版

1.1 標題 <h1>到<h6>

　　副標題在標題內還能夠包含 <small> 標籤或賦予 .small 類的元素，能夠用來標記副標題。

1.2 強調

　　　強調內嵌和文本塊, 使用小標籤。<samll>

　　　加粗文本<strong>

　　　斜體 <em>

　　　注意! 在HTML5可隨意使用 <b> 和 <i>, <b>是爲了突出詞或短語, 而不會有其餘重要含義, 而 <i> 提供主要是語態, 專業術語等含義.

1.3 段落文本對齊方式

1 　　<p class="text-left">居左文字.</p>
2 
3 　　<p class="text-center">居中文字.</p>
4 
5 　　<p class="text-right">居右文字.</p>

1.4 文本的強調屬性（文本顏色）

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）

1 <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
2 <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
3 <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
4 <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
5 <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

1.5 縮寫

　　當鼠標懸停在縮寫和縮寫詞，就會提示完整內容的HTML的內容。

　　<abbr> 元素. abbr元素用於縮寫的文本，

　　<abbr>的 title 屬性，用於，提示信息的內容。

　　.initialism 類，將縮寫的詞稍微大寫（字字母）

1 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

1.6 引用

1.6.1 普通引用把任何 HTML 嵌套在 <blockquote> 裏面便可. 對於直接的引用, 咱們建議使用 <p>

1.6.2 備註來源

用來標註引用來源（默認爲左對齊）

　　　　　添加 <small>> 標籤來註明引用的來源.

　　　　　來源標題能夠放在這個<cite> 標籤裏面

　　　右對齊：在<blockquote class="pull-right">

1.7 列表

1.7.1 有序列表 <ol><li>。。。</li></ol>

1.7.2 無序列表 <ull><li>。。。</li></ul>

1.7.3 無樣式列表 <ul class="unstyled">

　　　　　　　　　　　<li>...</li>
　　　　　　　</ul>

1.7.4 水平列表

　　在<ul>或<ol>中使用 inline 讓列表項水平排列一行, 同時每項之間都有必定的間距.

　　水平列表，在導航欄中使用。

1.7.5 描述

　　垂直描述

1 <dl>
2   <dt>...</dt>
3   <dd>...</dd>
4 </dl>

　　水平描述 .dl-horizontal

1 <dl class="dl-horizontal">
2   <dt>...</dt>
3   <dd>...</dd>
4 </dl>

二、代碼

2.1 行內代碼

使用 <code> 包裝行級代碼片斷。

2.2 代碼塊

使用<pre>對多行代碼進行包裝。切記必定要對代碼中的每一個<>進行轉義，這樣方能獲得正常的渲染結果。

還可使用 .pre-scrollable 給代碼區域設置350px的最大高度並設置一個縱向滾動條。

三、表格

3.1 默認樣式

　　爲保證可讀性並維持表格結構不變。僅使用一組邊線對錶格進行格式化. 在任意 <table> 添加 .table 類便可。

3.2 其餘可選類樣式

　　下面所列出的類是爲了補充 .table 類的基本樣式的。

.table-striped 斑馬線

.table-bordered 邊線表格

.table-hover　　　鼠標移動效果

.table-condensed　經湊表格（讓表格更加緊湊，全部表格單元的padding都會減半(從8px到4px)）

3.3 可選的屬性

　　在表格的行內或單元格內添加顏色

屬性	描述
`.success`	表示成功或積極的行爲.（淺綠色）
`.error`	表示一個危險或存有潛在危險的做用.（）
`.warning`	表示警告, 可能須要注意的做用.
`.info`	做爲一個信息的默認樣式.

3.4 支持表格的標籤

標籤	描述
`<table>`	用以包裝表格化的數據
`<thead>`	容納表格標題行 (`<tr>`)以標識表格列，
`<tbody>`	容納表格行 (`<tr>`)
`<tr>`	容納行內的一組單元格 (`<td>` or `<th>`)
`<td>`	默認的表格單元格
`<th>`	用於列頭(或是行，取決於標籤所在位置和區域)的特殊標籤必須置於 `<thead>` 標籤內。
`<caption>`	表格用途的描述或摘要，對屏幕閱讀器（視障人士讀屏軟件）很是有用