框架Bootstrap實現響應式布局

2021-10-05 19:41:44 字數 1910 閱讀 2575

前端開發的框架bootstrap,響應式布局:

定義行。相當於之前的tr 樣式:row

定義元素。指定該元素在不同的裝置上,所佔的格仔數目。樣式:col-裝置代號-格仔數目

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

class

="col-lg-1 col-sm-2 inner"

>

柵格div

>

div>

div>

body

>

html

>

效果:

當螢幕寬度足夠時,一行有12個格仔,當螢幕寬度變小時,多餘的格仔自動換行

Bootstrap框架和響應式布局

1.浮動 百分比布局 2.fiex布局 flex布局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變 responsive design,意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。螢...

響應式前端框架Bootstrap系列(13)進度條

進度條使用 css3 過渡和動畫來獲得該效果。internet explorer 9 及之前的版本和舊版的 firefox 不支援該特性,opera 12 不支援動畫。進度條的顏色樣式有以下幾種 progress bar success progress bar info progress bar ...

fcc 響應式框架Bootstrap 練習1

bootstrap 按鈕顏色有 7種,對應的class為 btn,白色 btn btn primary,深藍色 btn btn info,淺藍色 btn btn success,綠色 btn btn warning,黃色 btn btn danger,紅色 btn btn inverse黑色 del...