BootStrap容器介紹

2021-07-30 22:39:07 字數 1323 閱讀 9633

bootstrap 需要為頁面內容和柵格系統包裹乙個 .container 容器。我們提供了兩個作此用處的類。注意,由於 padding 等屬性的原因,這兩種 容器類不能互相巢狀。

.container 類用於固定寬度並支援響應式布局的容器。

...

.container-fluid 類用於 100% 寬度,佔據全部視口(viewport)的容器。

...

**:

...        

……

……

bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統,隨著螢幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義類,還有強大的mixin 用於生成更具語義的布局。

柵格系統用於通過一系列的行(row)與列(column)的組合來建立頁面布局,你的內容就可以放入這些建立好的布局中。下面就介紹一下 bootstrap 柵格系統的工作原理:

例如:

11

1213

14 21

2223

24

(預設樣式)default

(首選項)primary

(成功)success

(一般資訊)info

(警告)warning

(危險)danger

(鏈結)link

為了加快對移動裝置友好的頁面開發工作,利用**查詢功能並使用這些工具類可以方便的針對不同裝置展示或隱藏頁面內容。另外還包含了針對印表機顯示或隱藏內容的工具類。

有針對性的使用這類工具類,從而避免為同乙個**建立完全不同的版本。相反,通過使用這些工具類可以在不同裝置上提供不同的展現形式。

可用的類

通過單獨或聯合使用以下列出的類,可以針對不同螢幕尺寸隱藏或顯示頁面內容。

Bootstrap基礎介紹 附案例

bootstrap中文文件 在專案中將這三個資料夾複製 建立html頁面,引入必要的資源檔案 基礎模板 你好,世界!h1 body html 定義行。相當於之前的tr 樣式 row 定義元素。指定該元素在不同的裝置上,所佔的格仔數目。樣式 col 裝置代號 格仔數目 全域性css樣式 表單 元件 外...

bootstrap 布局容器 柵格系統 響應式工具

1.1 bootstrap簡介 中文官網 官網 2.3 布局容器 bootstrap需要為頁面內容和柵格系統包裹乙個.container容器,bootstarp預先定義好了這個類,叫.container他提供了兩個作此用處的類 1.container類 響應式布局的容器 固定寬度 大屏 1200px...

c queue容器介紹

一.queue模版類的定義在標頭檔案中。queue與stack模版非常類似,queue模版也需要定義兩個模版引數,乙個是元素型別,乙個是容器型別,元素型別是必要的,容器型別是可選的,預設為dqueue型別。定義queue物件的示例 如下 queueq1 queueq2 queue的基本操作有 1.入...