05.Bootstrap导入基础笔记
?
Bootstrap介紹
Bootstrap是Twitter開源的基于HTML、CSS、JavaScript的前端框架。
它是為實(shí)現(xiàn)快速開發(fā)Web應(yīng)用程序而設(shè)計(jì)的一套前端工具包。
它支持響應(yīng)式布局，并且在V3版本之后堅(jiān)持移動(dòng)設(shè)備優(yōu)先。
為什么要使用Bootstrap？
在Bootstrap出現(xiàn)之前：
命名：重復(fù)、復(fù)雜、無意義（想個(gè)名字費(fèi)勁）
樣式：重復(fù)、冗余、不規(guī)范、不和諧
頁面：錯(cuò)亂、不規(guī)范、不和諧
在使用Bootstrap之后： 各種命名都統(tǒng)一并且規(guī)范化。 頁面風(fēng)格統(tǒng)一，畫面和諧。
Bootstrap下載
官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
Bootstrap文件結(jié)構(gòu)
目錄結(jié)構(gòu)：
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主題樣式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主題相關(guān)樣式壓縮文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS樣式壓縮文件 │ └── bootstrap.min.css.map ├── fonts // 字體文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件├── bootstrap.js├── bootstrap.min.js // 核心JS壓縮文件└── npm.js實(shí)際需要文件，刪除CSS,js內(nèi)不用文件
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap.min.css // 核心CSS樣式壓縮文件 ├── fonts // 字體文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件├── bootstrap.min.js // 核心JS壓縮文件Bootstrap文件導(dǎo)入
相當(dāng)于導(dǎo)入CSS和JS
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>title</title><!-- Bootstrap --><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="jquery-3.2.1.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="bootstrap/js/bootstrap.min.js"></script></body> </html>組件介紹
支持移動(dòng)端
<meta name="viewport" content="width=device-width, initial-scale=1">Normalize.css
為了增強(qiáng)跨瀏覽器表現(xiàn)的一致性，我們使用了?Normalize.css.
訪問BootCDN,搜尋Normalize.css
<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">圖標(biāo)網(wǎng)站
Bootstrp
https://v3.bootcss.com/components/
font awesome
http://fontawesome.dashgame.com/
實(shí)際通常用BootCDN鏈接即可
命令組件參考網(wǎng)站
https://v3.bootcss.com/css/
https://www.cnblogs.com/liwenzhou/p/8214637.html
?
部分摘抄：https://www.cnblogs.com/liwenzhou/p/8214637.html
?
?
?
總結(jié)
以上是生活随笔為你收集整理的05.Bootstrap导入基础笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 04-1.jQuery事件与补充each
- 下一篇： gitlab 分支操作笔记\新建远程分支