@Author：Runsen
@Date：2020/05/30

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。

本文接著上面繼續Bootstrap，今天主要寫的是Bootstrap 網格系統，如果需要哪個樣式，直接根據文檔的指引，在相應的元素里加指定的類名即可。

文章目錄

• 網格系統
• Bootstrap網格系統
• 實例：從堆疊到水平排列
• 布局容器：container 類
• 基本結構
• 表單
• 組件
• 官方文檔

網格系統

要讓你的版式設計顯得高大上，你需要知道其背后的奧秘，看似簡單的排版，并不是設計師憑感覺隨意把文字和圖片擺上去的，而是設計師針對設計項目預先設計了一套“網格系統”。于是就遷到了Bootstrap

下面我舉一個32網格的例子，在這32個網格內，可以實現多種布局方式，非常靈活而且是統一的。

Bootstrap網格系統

記住：bootstrap允許將頁面劃分成共12個等寬邏輯單元，下圖是菜鳥教程的

Bootstrap 3 是移動設備優先的，這樣小屏幕設備（比如移動設備、平板電腦）就會顯現出121，就是縱向分布。如果在電腦，就可以顯示出112，就是橫向分布。

因此Bootstrap 網格就出現了四個類樣式

• xs (phones)

• sm (tablets)

• md (desktops)

• lg (largerdesktops)

實例：從堆疊到水平排列

下面，Runsen教大家怎么看Bootstrap官方文檔的例子，其實我也是一般般的。

實例：從堆疊到水平排列

這樣，其實就是知道了為什么很多網頁的代碼中出現了class=row的

布局容器：container 類

截圖如下：

作用：用于定義一個固定寬度且居中的版心。只不過，這個版心的寬度具有響應式的效果。

也就是說，在 Bootstrap 中，我們一般用 .container 類來表示版心。

格式舉例：

<div class="topbar"><div class="container"><!--此處的代碼會顯示在一個固定寬度且居中的容器中該容器的寬度會跟隨屏幕的變化而變化--></div> </div>

基本結構

下面就是 Bootstrap 網格的基本結構：

<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div> </div><div class="row">...</div> </div> <div class="container">....

一個container，里面一個row

表單

我覺得表單需要了解下的，特別需要看下class

組件

一個按鈕稱之為樣式；兩個按鈕在一起，就可以稱之為組件。

組件在官網有介紹：

我們現在需要關注的不是組件怎么用，而是里面有哪些組件，避免重復造輪子：別人已經做得很好了，不需要我們再重復。

使用非常簡單，就是一個class就歐克了。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

需要注意只對內容為空的元素起作用

如果需要哪個樣式，直接根據文檔的指引，在相應的元素里加指定的類名即可。

官方文檔

CSS

JS組件

總結

以上是生活随笔為你收集整理的十九、前端必学Bootstrap美化（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。