Bootstrap 常用布局元件

2021-09-10 15:55:02 字數 1188 閱讀 9814

@

@*只需要向 元素新增 class .panel 和 class .panel-default 即可*@

這是乙個基本的面板

@*面板標題*@

@*使用 .panel-heading class 可以很簡單地向面板新增標題容器。to easily add a heading container to your panel.

使用帶有 .panel-title class 的 -來新增預定義樣式的標題。*@

不帶 title 的面板標題

面板內容

面板內容

@*面板腳注*@

@*需要把按鈕或者副文字放在帶有 class .panel-footer 的 中即可*@

這是乙個基本的面板

面板腳注

@*帶語境色彩的面板*@

@*使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger,來設定帶語境色彩的面板*@

這是乙個基本的面板

這是乙個基本的面板

這是乙個基本的面板

這是乙個基本的面板

這是乙個基本的面板

@*帶**的面板*@

@*為了在面板中建立乙個無邊框的**,我們可以在面板中使用 class .table。假設有個 包含 .panel-body,我們可以向**的頂部新增額外的邊框用來分隔。如果沒有包含 .panel-body 的 ,則元件會無中斷地從面板頭部移動到**。*@

這是乙個基本的面板

產品**

產品 a

200 產品 b

400

面板標題

產品**

產品 a

200 產品 b

400

@*帶列表組的面板*@

@*通過在 元素中新增 .panel 和 .panel-default 類來建立面板,並在面板中新增列表組*@

面板標題

這是乙個基本的面板內容。這是乙個基本的面板內容。

這是乙個基本的面板內容。這是乙個基本的面板內容。

這是乙個基本的面板內容。這是乙個基本的面板內容。

這是乙個基本的面板內容。這是乙個基本的面板內容。

CSS 常用布局

1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...

css常用布局

單列布局長這個樣子,主要有兩種 普通單欄,通欄的單欄布局 比較簡單,設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時,外margin出現。當收縮瀏覽器寬度,小於960px時,margin為0,出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...

常用布局小節

1.居中塊級元素 定寬居中 div行內塊元素 文字居中 baba son2.定位問題 2.1 相對定位 大多情況,相對定位的作用是用來 約束 絕對定位 的參考點 2.2 絕對定位 3.假高度,假寬度填充元素後,記得去除假寬度 如果是浮動元素,建議保留寬高 ele4.字型的大小,行高 5.行內塊級元素...