前端框架 BootStrap

2021-08-07 09:37:11 字數 1203 閱讀 3249

bootstrap是基於html5和css3開發的,它在jquery的基礎上進行了更為個性化的完善,形成一套自己獨有的**風格,並相容大部分jquery外掛程式。個人理解: 可以使用bootstrap框架開發乙個響應式的頁面,可以同時使用與pc端,pad端和手機端,並且不影響瀏覽的效果。

bootstrap的結構:

1、 全域性css

*bootstrap定義了一套css的樣式表.

2、元件

*bootstrap定義的一套按鈕,導航條...

3、js外掛程式

*bootstrap定義的一套js的外掛程式.

bootstrap的入門開發

引入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的開發人員也可以...