是什么Bootstrap?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、長豐網(wǎng)站定制設(shè)計、自適應品牌網(wǎng)站建設(shè)、H5開發(fā)、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為長豐等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
一.Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個基于
HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美,可用于快速、簡單地
構(gòu)建基于 PC 及移動端設(shè)備的 Web 頁面需求。
2010 年 6 月,Twitter 內(nèi)部的工程師為了解決前端開發(fā)任務(wù)中的協(xié)作統(tǒng)一問題。經(jīng)歷
各種方案后,Bootstrap 最終被確定下來,并于 2011 年 8 月發(fā)布。經(jīng)過很長時間的迭代升
級,由最初的 CSS 驅(qū)動項目發(fā)展成為內(nèi)置很多 JavaScript 插件和圖標的多功能 Web 前端
的開源框架。
Bootstrap 最為重要的部分就是它的響應式布局,通過這種布局可以兼容 PC 端、PAD
以及手機移動端的頁面訪問。
Bootstrap 下載及演示:
國內(nèi)文檔翻譯官網(wǎng):http://www.bootcss.com
二.Bootstrap 特點
Bootstrap 非常流行,得益于它非常實用的功能和特點。主要核心功能特點如下:
(1).跨設(shè)備、跨瀏覽器
可以兼容所有現(xiàn)代瀏覽器,包括比較詬病的 IE7、8。當然,本課程不再考慮 IE9 以下
瀏覽器。
(2).響應式布局
不但可以支持 PC 端的各種分辨率的顯示,還支持移動端 PAD、手機等屏幕的響應式切
換顯示。
(3).提供的全面的組件
Bootstrap 提供了實用性很強的組件,包括:導航、標簽、工具條、按鈕等一系列組
件,方便開發(fā)者調(diào)用。
(4).內(nèi)置 jQuery 插件
Bootstrap 提供了很多實用性的 jquery 插件,這些插件方便開發(fā)者實現(xiàn) Web 中各種
常規(guī)特效。
(5).支持 HTML5、CSS3
HTML5 語義化標簽和 CSS3 屬性,都得到很好的支持。
(6).支持 LESS 動態(tài)樣式
LESS 使用變量、嵌套、操作混合編碼,編寫更快、更靈活的 CSS。它和 Bootstrap 能
很好的配合開發(fā)。
三.Bootstrap 結(jié)構(gòu)
首先,想要了解 Boostrap 的文檔結(jié)構(gòu),需要在官網(wǎng)先把它下載到本地。Bootstrap
下載地址如下:
Bootstrap 下載地址:http://v3.bootcss.com/ (選擇生產(chǎn)環(huán)境即可,v3.3.4)
解壓后,目錄呈現(xiàn)這樣的結(jié)構(gòu):
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分為三大核心目錄:css(樣式)、js(腳本)、fonts(字體)。
1.css 目錄中有四個 css 后綴的文件,其中包含 min 字樣的,是壓縮版本,一般使用
這個;不包含的屬于沒有壓縮的,可以學習了解 css 代碼的文件;而 map 后綴的文件則是
css 源碼映射表,在一些特定的瀏覽器工具中使用。
2.js 目錄包含兩個文件,是未壓縮和壓縮的 js 文件。
3.fonts 目錄包含了不同后綴的字體文件。
創(chuàng)建第一個bootstrap頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap初體驗</title> <link rel="stylesheet" href="css/bootstrap.css" /> </head> <body> <button class="btn btn-default">bootstrap初體驗之按鈕</button> </body> </html>
Bootstrap 將全局 font-size 設(shè)置為 14px,line-height 行高設(shè)置為 1.428(即20px);<p>段落元素被設(shè)置等于 1/2 行高(即 10px);顏色被設(shè)置為#333。
看完上述內(nèi)容,你們掌握是什么Bootstrap的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
標題名稱:是什么Bootstrap
標題來源:http://chinadenli.net/article38/joscsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、搜索引擎優(yōu)化、微信公眾號、云服務(wù)器、網(wǎng)站制作、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)