bootstrap簡(jiǎn)介

Bootstrap

Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。


使用bootstrap的好處
1.移動(dòng)設(shè)備優(yōu)先:自 Bootstrap 3 起,框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。
2.瀏覽器支持:所有的主流瀏覽器都支持 Bootstrap。
3.容易上手:只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí),您就可以開始學(xué)習(xí) Bootstrap。
4.響應(yīng)式設(shè)計(jì):Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)。


Bootstrap 包的內(nèi)容
1.基本結(jié)構(gòu):Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。
2.CSS:Bootstrap 自帶以下特性:全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class,以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。
3.組件:Bootstrap 包含了十幾個(gè)可重用的組件,用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
4.JavaScript 插件:Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個(gè)包含這些插件。


柵格系統(tǒng)
Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕設(shè)備或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列。

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單,僅僅是通過定義容器大小,平分12份(也有平分成24份或32份,但12份是最常見的),再調(diào)整內(nèi)外邊距,最后結(jié)合媒體查詢,就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。

在使用的時(shí)候大家可以根據(jù)實(shí)際情況重新編譯LESS(或Sass)源碼來修改12這個(gè)數(shù)值(也就是換成24或32,當(dāng)然你也可以分成更多,但不建議這樣使用)。


20160329123809757.jpg

bootstrap把根據(jù)屏幕大小把屏幕分為了4個(gè)層級(jí),小于768像素的為超小屏幕,大于等于768像素的為小屏幕,大于等于992像素的為中等屏幕,大于等于1200像素的則為大屏幕,相應(yīng)的類前綴見圖或查看官方文檔,根據(jù)柵格參數(shù),我們看下下面這幅圖:


20160329124043797.jpg

響應(yīng)式圖像

<img src="..." class="img-responsive" alt="響應(yīng)式圖像">

容器(Container)
<div class="container">
...
</div>


本人學(xué)識(shí)有限 文章多有不足

若有錯(cuò)誤 請(qǐng)大方指出 以免誤導(dǎo)他人

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)完整課程請(qǐng)移步 互聯(lián)網(wǎng) Java 全棧工程師 本節(jié)視頻 【視頻】使用 Bootstrap-Bootstrap ...
    擼帝閱讀 371評(píng)論 0 1
  • BootStrap簡(jiǎn)介 基于:HTML ,CSS ,JAVAScript的前端框架實(shí)現(xiàn)相應(yīng)是布局移動(dòng)設(shè)備優(yōu)先 HT...
    Marlon666閱讀 252評(píng)論 0 1
  • 這里,我們簡(jiǎn)單了解,Bootstap的開發(fā)語言,應(yīng)用場(chǎng)景,兼容性http://www.bootcss.com/ht...
    夢(mèng)想成為小仙女閱讀 555評(píng)論 0 4
  • Bootstrap是什么? 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,107評(píng)論 3 184
  • 文中攝影作品來自著名攝影家~陳峰 1. 我們一起,赤身裸體 唯一的欲望,戰(zhàn)天斗地 世界于你我而言,是野性浪漫 忘記...
    清水無痕閱讀 466評(píng)論 2 2

友情鏈接更多精彩內(nèi)容