05.Bootstrap导入基础笔记
生活随笔
收集整理的這篇文章主要介紹了
05.Bootstrap导入基础笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
Bootstrap介紹
Bootstrap是Twitter開源的基于HTML、CSS、JavaScript的前端框架。
它是為實現快速開發Web應用程序而設計的一套前端工具包。
它支持響應式布局，并且在V3版本之后堅持移動設備優先。
為什么要使用Bootstrap？
在Bootstrap出現之前：
命名：重復、復雜、無意義（想個名字費勁）
樣式：重復、冗余、不規范、不和諧
頁面：錯亂、不規范、不和諧
在使用Bootstrap之后： 各種命名都統一并且規范化。 頁面風格統一，畫面和諧。
Bootstrap下載
官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
Bootstrap文件結構
目錄結構：
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主題樣式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主題相關樣式壓縮文件 │ ├── 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實際需要文件，刪除CSS,js內不用文件
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文件導入
相當于導入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個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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>組件介紹
支持移動端
<meta name="viewport" content="width=device-width, initial-scale=1">Normalize.css
為了增強跨瀏覽器表現的一致性，我們使用了?Normalize.css.
訪問BootCDN,搜尋Normalize.css
<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">圖標網站
Bootstrp
https://v3.bootcss.com/components/
font awesome
http://fontawesome.dashgame.com/
實際通常用BootCDN鏈接即可
命令組件參考網站
https://v3.bootcss.com/css/
https://www.cnblogs.com/liwenzhou/p/8214637.html
?
部分摘抄：https://www.cnblogs.com/liwenzhou/p/8214637.html
?
?
?
總結
以上是生活随笔為你收集整理的05.Bootstrap导入基础笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 04-1.jQuery事件与补充each
- 下一篇： gitlab 分支操作笔记\新建远程分支