bootstrap4

時間 2020-07-25

標籤 bootstrap4 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

01. Bootstrap4.x 入門css

學習要點:html

1.簡單介紹前端

2.下載和目錄jquery

3.安裝和測試編程

一.簡單介紹
1. Bootstrap是一款CSS/HTML的框架庫，目前最新版本是V4.3; 2. 它集成了各類經常使用的前端(HTML、CSS和JavaScript)組件庫; 3. 用於響應式前端佈局，移動設備優先的Web項目開發;
4. 因此，在學習Bootstrap以前須要有HTML5的學習基礎; bootstrap

二.下載和目錄瀏覽器

從官網上下載了壓縮包:bootstrap-4.3.1-dist.zip; 框架
解壓後，有兩個目錄:css和js，如下是它的目錄結構; less

bootstrap/ ├── css/ 工具
- │ ├── bootstrap.css
- │ ├── bootstrap.css.map
- │ ├── bootstrap.min.css
- │ ├── bootstrap.min.css.map
- │ ├── bootstrap-grid.css
- │ ├── bootstrap-grid.css.map
- │ ├── bootstrap-grid.min.css
- │ ├── bootstrap-grid.min.css.map
- │ ├── bootstrap-reboot.css
- │ ├── bootstrap-reboot.css.map
- │ ├── bootstrap-reboot.min.css
- │ └── bootstrap-reboot.min.css.map └── js/
  - ├── bootstrap.bundle.js
  - ├── bootstrap.bundle.min.js
  - ├── bootstrap.bundle.min.js.map
  - ├── bootstrap.js
  - ├── bootstrap.min.js

└── bootstrap.min.js.map

3. 在上面的目錄結構中，帶min字樣的是編譯後的壓縮版，能夠用於生產部署環境，不帶 min 的能夠用於開發調試環境;帶 map 字樣的是 CSS 地圖查詢文件，方便查詢精確的樣式位置。

4. js目錄中沒有jquery庫文件，須要咱們自行下載安裝;

三.安裝和測試
1. 建立一個Bootstrap文件夾目錄，這裏將存放之後課程中全部代碼和實例; 2. 建立子目錄01，並建立.html代碼，生成HTML5基本格式;
3. 開發工具能夠是SublimeText、NodepadPlus或者WebStorm;

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>

<link rel="stylesheet" href="css/bootstrap.css">

<meta name="viewport"

content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head>

<body> <h1>開啓，Bootstrap4!</h1>

屬性註解:
width=device-width 表示寬度是設備屏幕的寬度。 initial-scale=1 表示初始的縮放比例。 shrink-to-fit=no 自動適應手機屏幕的寬度。

<script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.js"></script>

</body>
    </html>

02. 佈局系統【上】

學習要點:

1.佈局介紹

2.柵格系統

一.佈局介紹

對於容器佈局，Bootstrap4.x提供了.container和.container-fluid兩種;
這兩種樣式是啓用佈局柵格系統最基本的要素;
.contianer是固體自適應方式，.container-fluid是流體100%自適應方式;
容器佈局能夠嵌套，但通常來講，不推薦且不多使用到:
自適應對應的響應式方式以下media:
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
從響應式的media能夠看出，Bootstrap4是以移動端爲優先的。

二.柵格系統

1. Bootstrap4.x的柵格系統是一個以移動爲優先的網格系統;
2. 基於12列的佈局、5種響應尺寸(面向不一樣屏幕設備);
3. 徹底使用flexbox流式佈局構建的，徹底支持響應式標準;
4. 具體採用div容器的行、列和對齊內容來構建響應式佈局;
5. 首先，實現一個一行三列的佈局，經過火狐瀏覽器切換屏幕測試;

6. 爲了顯示的更加清楚，能夠給行列加對比鮮明的CSS來觀察; 7. .row表示一行，.col-*來表示一列，實現了智能三列;
8. sm表示屏幕類型，本節先不去詳細瞭解，下節課會探討;

   </div>
</div>

9. 若是咱們採用的是.container-fluid，那麼會100%佔用屏幕寬度;

10. 在.col-sm-*的星號位置，還能夠強制設定每列所佔有的柵格列;

11. 所佔的柵格位正好是 12 列，超過 12 列則會換行，小於 12 列則不能 100%; 12. 以上智能計算和強制設置柵格位都是等寬的，咱們也能夠設置不對稱的;

<div class="container-fluid"> ...

</div>

   </div>
</div>

</div>

03. 佈局系統【下】

學習要點:

1.柵格等級

一.柵格等級

1. 柵格系統中有五個柵格等級，具體以下表:

2. 若是同時是使用兩個或以上的級別，而且比例相同，則遵循移動端優先的原則;

3. 柵格系統支持只指定其中一種或幾種，其它隨機的方式，指定數字奇偶都可;

4. 能夠經過兩個或以上來實現不一樣設備不一樣比例的混合佈局;

	超小屏幕 <576px	小屏幕 >=576px	中等屏幕 >=768px	大屏幕 >=992px	超大屏幕 >=1200px
前綴	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列數	12列

   </div>
</div>

   </div>
</div>

</div>

5. 使用.w-100能夠切割柵格欄位，進行分行操做;

   </div>
</div>

6. 若是強制設置了col-3數值，那切割後，將不會自動填充;

   </div>
</div>

04. 對齊與排列

學習要點:

1.柵格對齊

2.柵格排列

一.柵格對齊

1. 對於柵格系統中的行，咱們能夠其進行垂直對齊操做，以下表;

2. 要實現垂直效果，須要給行.row和列.c設置高度;

	樣式(做用域行間)
居頂(默認)	.align-items-start
居中	.align-items-center
居底	.align-items-end

.row {
height: 100px;
margin: 20px 0;
border: dashed 1px red;

}
.c {

border: solid 1px blue;

height: 30px; }

3. 若是咱們要垂直居中，那麼直接設置: .align-items-center

4. 對於列來講，也有三種垂直居中的方法，以下表;

</div>

	樣式(做用域列間)
居頂(默認)	.align-self-start
居中	.align-self-center
居底	.align-self-end

5. 使用三種列垂直方案;

6. 若是咱們要不足100%填充的行實現水平對齊方式，參考下表;

</div>

	樣式(做用域行間)
居左(默認)	.justify-content-start
居中	.justify-content-center
居右	.justify-content-end
間隔相等(分散)	.justify-content-around
兩端對齊(分散)	.justify-content-between

7. 每一個列只佔3個柵格列，共3列，而後實現間隔相等分散對齊;

二.柵格排列
1. 柵格的列能夠排序，使用.order-N，N最大值爲12;
2. 若是咱們要給一個三列的行的第一列排到最後，能夠以下設置;

3. 使用.order-first，強行設置列爲第一列，而.order-last爲最後一列;

</div>

</div>

</div>

4. 使用.offset-N或.offset-*-N來設置列的偏移量，1表示一個柵格列;

5. 使用.ml-N或.mr-N來微調列距離，使用.ml-auto和.mr-auto來左右對齊;

</div>

</div>

05. 內容排版

學習要點:

1.標題類

2.文本類

3.列表類

一.標題類

1. 使用<h1>~<h6>能夠建立不一樣尺寸的標題文字;

2. 若是是使用其它元素標籤，好比<p>或<div>，調用.h1~6一樣實現大標題;

3. 經過.text-muted樣式，構建大標題的附屬小標題;

4. 還有一種更大型，更加醒目的標題方式:.display-1~4;

二.文本類
1. 想要指定一些段落中重要的內容，可使用.lead強調;

2. 比較經常使用的文本內聯元素，來自HTML5;

<h1>Bootstrap</h1> <h2>Bootstrap</h2> <h3>Bootstrap</h3> <h4>Bootstrap</h4> <h5>Bootstrap</h5> <h6>Bootstrap</h6>

<p class="h1">Bootstrap</p> <div class="h2">Bootstrap</div>

<p class="h1">
Bootstrap <small class="text-muted">V4.3</small>

</p>
<div class="h2">

Bootstrap <small class="text-muted">V4.3</small> </div>

<h1 class="display-1">Bootstrap</h1> <h1 class="display-2">Bootstrap</h1> <h1 class="display-3">Bootstrap</h1> <h1 class="display-4">Bootstrap</h1>

<p class="lead"> 這是一段測試各類文本效果的話，自己沒有意義!

</p>

<p>這是一段測試各類文本<mark>效果的話</mark>，自己沒有意義!</p> <p><del>這是一段測試各類文本效果的話，自己沒有意義!</del></p> <p><s>這是一段測試各類文本效果的話，自己沒有意義!</s></p> <p><ins>這是一段測試各類文本效果的話，自己沒有意義!</ins></p> <p><u>這是一段測試各類文本效果的話，自己沒有意義!</u></p> <p><small>這是一段測試各類文本效果的話，自己沒有意義!</small></p> <p><strong>這是一段測試各類文本效果的話，自己沒有意義!</strong></p> <p > p>

><em

這是一段測試各類文本效果的話，自己沒有意義!</em></

也可使用.mark，.small等方式實現一樣元素的效果;
使用.title樣式和<abbr>縮略語給文本作提示;
使用Blockquote設置來源備註或引用;
使用.blockquote-footer設置底部備註來源;
能夠對內容進行居中對齊.text-center或居右對齊.text-right; blockquote ="blockquote text-center">

三.列表類
1. 使用.list-unstyled樣式，能夠將列表初始化;

<p>這是一段測試各類文本<span class="mark">效果</span>的話</p> <p> p>

class="small"

這是一段測試各類文本效果的話，自己沒有意義!</

><abbr

title="這是一個提示!

提示</abbr></

<blockquote class="blockquote"> <p>這是一段測試各類文本效果的話，自己沒有意義!</p>

</blockquote>

<blockquote class="blockquote"> <p>這是一段測試各類文本效果的話，自己沒有意義!</p> <footer class="blockquote-footer">

——出自 Bootstrap 視頻課堂 </footer>

</blockquote>

<ul class="list-unstyled"> <li>A 班</li>
<li>B 班</li>
<li>C 班

</ul>

</li>

2. 使用.list-inline和.list-inline-item結合實現多列並排列表;

3. 使用dl、dt和dd能夠實現水平描述，使用.text-truncate能夠省略溢出;

</ul>

<dt class="c col-sm-3">列表標題</dt>
<dd class="c col-sm-9">一個關於描述列表的內容</dd>

<dt class="c col-sm-3">列表標題</dt>
<dd class="c col-sm-4 text-truncate">一個關於描述列表的內容，

</dl> </div>

可是這個稍微長了一點點以致於換行!</dd>

06. 代碼與圖文

學習要點:

1.代碼樣式

2.圖片樣式

一.代碼樣式

使用<code>標籤元素，能夠將編程代碼放入其中，但仍是要手動轉義特殊符號;
使用<pre>標籤元素，配合<code>實現代碼塊的效果;
能夠在代碼區域設置.pre-scrollable樣式，實現固定區域滾動，默認高350px; pre ="pre-scrollable" =": px">
使用<var>標籤元素標識變量部分;
使用<kbd>標籤元素標識鍵盤輸入; kbdkbdkbdkbdkbdkbd>
使用<samp>標籤元素標識這是一個示例;

二.圖文樣式

1. 給圖片添加一個.img-fluid樣式或設置max-width:100%，height:auto; 2. 給小圖片加上一個縮略圖的樣式.img-thumbnail，設置一個空心邊框;

</code>

div

div </code>

</pre>

這是一個代碼塊效果!span>

span

<var>y = m + b</var>

samp

這是一段代碼</samp

img

src="img/banner.png"

class="img-fluid"

alt="響應式圖片

img

src="img/thumb.png"

class="img-thumbnail"

alt="縮略圖

經過設置.float-left和.float-right來設置圖片的左右浮動;
經過.d-block設置爲區塊，再經過margin左右auto方式.mx-auto實現居中; img ="img/thumb.png" ="mx-auto d-block">
由於圖片自己是內聯塊屬性，因此，直接在父層用.text-center也能夠實現居中;
使用HTML5新標籤<picture>來實現響應式圖片設置;
使用figure和figcaption實現圖文組合顯示;

img

src="img/thumb.png"

class="float-right"

alt="有浮動

</div>

</picture>

</figure>

這是一張圖片</figcaption>

07.表格樣式

一.表格樣式

1. 使用.table給表格設置一個基類，這是表格的基本樣式;

2. 使用.table-dark樣式，啓用顏色反轉對比效果; table ="table table-dark">

07. 表格樣式

     </tr>
   </thead>

</tr> <tr>

</tr> <tr>

     </tr>
   </tbody>

</table>

在<thead>使用.thead-light或.thead-dark實現淺黑或深灰色調的標頭; thead ="thead-light">
使用.table-striped實現數據表的條紋狀顯示;
條紋狀顯示也適用於反轉色調上;
默認狀況下，邊框是不徹底的，使用.table-bordered設置表格邊框;
表格邊框也能夠做用域反轉色調上;
使用.table-borderless設置無邊框;
無邊框效果也能夠做用於反轉色調上;
table ="table table-borderless table-dark">
使用.table-hover 實現一行懸停效果; table ="table table-hover">
行懸停效果也能夠做用於反轉色調上;
table ="table table-hover table-dark">
使用.table-sm 實現緊縮型表格，反轉色調依然支持; table ="table table-sm">
使用.table-success 等語義化實現<tr>或<td>、<th>等效果，反轉色調通用; PS:.table-*中的*包含:active、primary、secondary、danger、

warning、info、light、dark。
使用.table-responsive 實現溢出時出現底部滾動條;

table ="table table-responsive">
使用.table-responsive-sm 實現只有小於 768px 溢出時出現底部滾動條; table ="table table-responsive-sm">

class="table-info"

男</td

相關標籤/搜索

bootstrap4

angular4+bootstrap4+scss

Bootstarp

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。