關於bootstrap學習總結

2021-07-24 19:31:24 字數 2091 閱讀 3831

柵格系統分為12列布局,超過12列會自動跳轉到下一行,

對於大屏,1200px以上的col-lg-

對於中屏:992px~1200px col-md-

對於小屏:768px~992px;

對於超小屏:<768px;

他是響應式的

3.css的基本架構

1。基礎樣式

btn alert btn-info btn-success btn-warning btn-danger btn-lg btn-sm btn-ns

狀態樣式:active disabled

特殊元素樣式:dropdown-menu>li>a:hover

並列元素樣式:btn-group .btn+btn

巢狀元素樣式btn-group.btn

動畫樣式 progress active

下面從標題講起

h1~h6標籤,bootstrap自己定義了乙個副標題標籤

主要設定行高是h1~h6顯示的65%,顏色為深灰色,並列顯示.

2**

**乙個基礎類 table 加上下面幾個類修飾作用的table-hover table-striped table-bordered 具體自己查手冊

列表 ul ol dl三種列表形式

bootstrap預設對ul ol樣式進行很小的更改,給li設定了border-bottom:20px,將其padding設定為0

list-unstyled

list-inline

第乙個取消專案編號,第二是讓其水平排列

dl主要是個其中dl加上乙個font-weight:bold效果,想要水平排列的話,就加上dl-horizontal樣式

標題

我是副標題

4 **

解析其中一部分的**

單行內聯**要用code包含

bootstrap對於code的設定

code

表示使用者輸入的**,

多行**塊,具體見手冊

4文字

dasdadasdasdadsdsdada溼噠

主要bootstrap提供了一些標籤用來強調的

dasda

dasdad

3.6按鈕

按鈕 1.按鈕的樣式

按鈕的基礎類和table一樣必須要加上btn btn-primary

btn-success btn-warning btn-danger btn-link

2 按鈕的大小

btn-lg btn-sm btn-xs

3。多標籤支援

按鈕 按鈕

4.活動的狀態,主要給其加上active 或者disabled倆個類,改變狀態

按鈕 表示禁用了

按鈕預設就新增了active的樣式。

5影象

提供縮圖

主要給設定100%的寬度height:auto ;這樣的話隨瀏覽器視窗縮小而縮小了.

img-rounded

img-circle:

6。輔助樣式

文字 text-muted text-primary text-danger text-warning text-success text-info

文字背景樣式

bg-success bg-danger bg-primary bg-warning bg-info

關閉圖示 × ×

其中close主要設定圖示的位置在右上方

7下拉箭頭

8內容浮動

pull-right :float:right;

pull-left:float:left;

9隱藏與現實

隱藏:bootstrap提供了樣式hidden invisible

顯示:show;

10.表單

使用者登入

登入賬戶

內聯:給form加上form-inline 橫向表單form-horizontal

使用者名稱

表單這塊比較重要,控制項較多,就不講了,自己查閱手冊.

Bootstrap學習總結

1.bootstap的使用模板 自己的樣式檔案要放在下面才會覆蓋生效 href css index.css rel stylesheet head 你好,世界!h1 src script src script body html 2.禁止響應式布局 bootstrap會自動幫你針對不同的螢幕尺寸調整...

Bootstrap學習總結

1.bootstap的使用模板 zh cn 複製 2.禁止響應式布局 bootstrap會自動幫你針對不同的螢幕尺寸調整你的頁面,使其在各個尺寸的螢幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局例項頁面一樣。禁止響應式布局有如下幾步 移除 此 css 文件中提到的設定瀏覽器視口 ...

Bootstrap學習總結

1.bootstap的使用模板 zh cn 複製 2.禁止響應式布局 bootstrap會自動幫你針對不同的螢幕尺寸調整你的頁面,使其在各個尺寸的螢幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局例項頁面一樣。禁止響應式布局有如下幾步 移除 此 css 文件中提到的設定瀏覽器視口 ...