bootstrap是基於html5和css3開發的,它在jquery的基礎上進行了更為個性化的完善,形成一套自己獨有的**風格,並相容大部分jquery外掛程式。個人理解: 可以使用bootstrap框架開發乙個響應式的頁面,可以同時使用與pc端,pad端和手機端,並且不影響瀏覽的效果。
bootstrap的結構:
1、 全域性cssbootstrap的入門開發*bootstrap定義了一套css的樣式表.
2、元件
*bootstrap定義的一套按鈕,導航條...
3、js外掛程式
*bootstrap定義的一套js的外掛程式.
引入4個外部的檔案,先後順序不能反
【bootstrap布局容器】
的柵格系統】
響應式的設計:
* css3的樣式:**查詢(即:根據不同裝置的寬度定義了不同的樣式)
柵格樣式:
* 裝置的解析度大於 1200 使用lg樣式
* 裝置的解析度大於 992 < 1200 使用md樣式
* 裝置的解析度大於768 < 992 使用sm樣式
* 裝置的解析度小於 768 使用xs樣式
將一行分成12列.定義div元素 樣式的和加一起等於12 即可.
【bootstrap的全域性css】
定義了一套css
* 對頁面中的元素進行定義:
* 列表元素,表單,按鈕,...
使用bootstrap布局**的首頁.
步驟分析:
ø 步驟一:新建乙個html頁面.引入bootstrap的相應js和css
ø 步驟二:定義乙個整體的div,將整體的div分成8個部分.
ø 步驟三:完成每個部分的顯示.
**實現:
前端UI框架 Bootstrap 框架
設計前端頁面或者元件的時候,原生的html元件,比較難看,自己設計那些css樣式,非常麻煩,工作量很大,還不一定會。但是其實,網上有很多開源的元件庫,拿來使用就可以了,例如 bootstrap,easyui,layui,miniui。需要的時候,網上可以找到一大堆這種ui框架。直接使用這種現成的輪子...
響應式前端框架Bootstrap系列(13)進度條
進度條使用 css3 過渡和動畫來獲得該效果。internet explorer 9 及之前的版本和舊版的 firefox 不支援該特性,opera 12 不支援動畫。進度條的顏色樣式有以下幾種 progress bar success progress bar info progress bar ...
新手必看!Bootstrap前端框架 基礎介紹篇
一.什麼是bootstrap?二.bootstrap的優點 自bootstrap3起,框架包含了貫穿於整個庫的移動裝置優先的樣式 對移動裝置友好 只需具備html和css的基礎知識,就可開始學習 採用柵格布局 底層實現原理 查詢結合流體布局 js外掛程式優秀的地方在於,哪怕是不懂js的開發人員也可以...