Bootstrap學習文件(一)

2021-09-02 02:47:32 字數 2963 閱讀 9952

boostrap中中文網

bootstrap 是最受歡迎的 html、css 和 js 框架,用於開發響應式布局、移動裝置優先的 web 專案,使用這個框架可以簡單高效的開發出適配各種螢幕的**應用,即是編寫一套**,適用多重平台(pc,平板,手機等)。bootstrap 相比其他框架,自由度更高,它提供了基本的樣式和基本的元件,而不會在創造上約束開發者的思維。

簡單的用物件導向的來說,bootstrap 為我而們封裝了一些常用的類(class的名字)和介面(js的外掛程式),這些類就是這個模版自定義的 css 樣式,比如文字居中,css **是text-align: center;經過 bootstrap封裝後的類(class)名為text-center,這樣我們就可以直接使用text-center來使乙個 p 標籤或者 div 標籤裡面的內容居中了,從而實現我們軟體工程中所說的**重用。bootstrap 中的js外掛程式,不需要我們寫 js **就能幫我們實現要用 js 來實現的效果,而是通過使用 bootstrap 自定義的屬性。

學習的時候直接到這裡查 bootstrap 的文件 bootstrap中文網。

相比官網的基本模版,增加了一些常用的設定。

注意:這兩個class不能放在一起,可以是兄弟關係,但不能是巢狀的關係。如果不想讓寬度隨著螢幕而變化,可以給它乙個!important來提公升優先順序,這樣的話在所有尺寸下都是乙個定值

示例**如下:

自適應寬度100%

適應螢幕的固定寬度

下面是錯誤寫法

錯誤寫法

在 bootstrap 中一行分為 12列,也即是螢幕的寬度被分為了 12份,乙份就是十二分之一的螢幕寬度,原始碼是通過寬度為百分比以及浮動實現的。

1.row 代表一行

2.col-- 代表列,第乙個 * 和螢幕尺寸有關,第二個 * 是列數

如果列的和超過了12,那就會換行,如果有一列,這個數值超過了12,那就會按12去顯示

lg 寬度》1200px

表現形式:

螢幕的寬度大於1200,一行顯示n(結構裡有幾個div)列

螢幕的寬度小於1200,一行顯示1列

md 992px <= 寬度 <= 1200px

表現形式:

螢幕的寬度大於992並且小於1200,一行顯示n(結構裡有幾個div)列

螢幕的寬度小於992,一行顯示1列

sm 768px <= 寬度 <= 992px

表現形式:

螢幕的寬度大於768並且小於992,一行顯示n(結構裡有幾個div)列

螢幕的寬度小於768,一行顯示1列

xs 寬度 <= 768px

表現形式:

螢幕的寬度小於768,一行永遠顯示n(結構裡有幾個div)列

示例**如下:

縮小瀏覽器寬度改變div的寬度,觀察列數的變化。

超過12列啦啦啦

第1行第1列

第1行第2列

第2行第1列

第2行第2列

第2行第3列

第3行第1列

第3行第2列

第3行第3列

第4行第1列

第4行第2列

第4行第3列

3.組合使用

示例**如下:

縮小瀏覽器寬度改變div的大小,仔細觀察,四列,變三列,再變兩列,最後變成一列的效果

第1行第1列

第1行第2列

第1行第3列

第1行第4列

第1行第1列

4.列偏移

col--offset- 向右偏移,第乙個 * 是和螢幕尺寸有關,第二個 * 是偏移的列數,如果偏移的數量大於12則會不起作用。

示例**如下:

第1行第1列

第1行第2列

第1行第3列

第2行第1列

5.列排序

col--push(pull)- 第乙個 * 是和螢幕尺寸有關,第二個 * 是往右或者往左的列數,不能超過12,否則就不起作用,push是往右推,pull是往左拉。

示例**如下:

第1行第1列

第1行第2列

第2行第1列

第2行第2列

第3行第1列

第3行第2列

6.列偏移和列排序的區別

示例**如下:

第1行第1列

第2行第1列

第3行第1列

第4行第1列

第4行第2列

第5行第1列

第5行第2列

7.巢狀

每一列裡面都可以在巢狀一行和n(不能超過12)列,那巢狀裡面的元素就會以父級的寬度為基準,再分12個列。

示例**如下:

第1行第1列

第1行第2列

柵格系統用來網頁布局,這是網頁設計的第一步,另外bootstrap的中文網上(官網的翻譯版)裡面的布局方式也值得我們學習,可以仔細觀察一下。

bootstrap 系列:

bootstrap學習文件(一)

bootstrap學習文件(二)

bootstrap學習文件(三)

bootstrap學習文件(四)

python surprise學習文件 一

自動交叉驗證 train test split 和 fit 方法 訓練整個資料集和predict 方法 排個雷 evaluate 方法在1.0.5版本中已經棄用 功能上已由取代model selection cross validate 並在1.1.0中刪除 你要看一下你現在安裝的版本 surpri...

Git學習文件

git本地版本維護基本操作 git 本地倉庫 維護三棵樹 工作區 暫存區 head 工作區 當前 工作環境 暫存區 通過git add將 新增到暫存區 head 指向最新一次的提交 git status 檢視修改的檔案狀態 git add 把修改提交到暫存區 git commit m comment...

Angular js 學習文件

angular js 指令 ng init key value 在其中使用鍵值對定義資料 在html中使用key呼叫資料 ng model 把元素值繫結到應用程式 一般出現在文字框中 定義key 然後把輸入的值顯示 ng model同樣可以為應用程式資料提供型別驗證 為應用程式提供狀態 為html元...