第一次接觸神奇的Bootstrap網格系統

2022-09-27 23:03:21 字數 1162 閱讀 9952

本篇將主要介紹bootstrap的網格系統。

網格系統的實現是通過定義容器大小,平分12份(或24份、32份,但12份是最常見的),再調整內外邊距,最後結合**查詢,就製作出了強大的響應式網格系統。

bootstrap中的網格系統就是將容器平分成12份。

bootstrap的網格系統用來布局,其實就是列的組合,一共有四種基本的用法:

1.列組合

更改數字來合併列(原則:列總和數不能超12),例如:

列組合基本用法

css/bootstrap.min.css">

.col-md-4

.col-md-4

.col-md-4

.col-md-3

.col-md-6

.col-md-3

效果圖如下:

2.列偏移

在列元素上新增類名「col-md-offset-*」(其中星號代表要偏移的列組合數),那麼具有這個類名的列就會向右偏移。

.col-md-4

列向右移動四列的間距

.col-md-3

">.col-md-4

列向右移動四列的間距

.col-md-3

.col-md-3

col-md-offset-3

col-md-4

效果圖如下:

3.列排序

列排序就是改變列的方向,改變左右浮動,並且設定浮動的距離。bootstrap中是通過新增類名「col-md-push-」和「col-md-pull-」 (其中星號代表移動的列組合數)實現的。

www.cppcns.comle>基本用法

.col-md-3

.col-md-6

4.列的巢狀

基本用法

我的裡面巢狀了乙個網格

col-md-6

col-md-6

col-md-4

效果圖如下:

如果大家還想深入學習,可以點選這裡進行vpipgzyv學習,再為大家附兩個精彩的專題:bootstrap學習教程 bootstrap實戰教程

系列文章:

第一次接觸神奇的bootstrap基礎排版

第一次接觸神奇的bootstrap表單

本文標題: 第一次接觸神奇的bootstrap網格系統

本文位址:

第一次接觸ruby

part one afile file.new e calog.cfu w afile.puts rtwe calllog configuration file afile.puts rerew 2.0 calog afile.puts 日誌的根路徑 afile.puts base path e l...

第一次接觸ubuntu

第一次接觸ubuntu好激動 1.進入 退出命令列介面 alt ctrl f1 進入命令列介面 alt ctrl f7 退出命令列介面 2.安裝wine sudo apt get install wine使用 終端命令就是 wine 舉個例子,你現在要執行魔獸,然後你的魔獸的資料夾的位置是 home...

Django第一次接觸

不美好的第九天tat 11月的最後一天 今天開始正式看看看看看看django 其實也是從晚上開始,太磨蹭沒效率 在linux下安裝好了 大概就是 安裝python2.7.3 ubuntu自帶,但是少東東 安裝django1.6 然後就發現按照教程用這個django admin.py startpro...