bootstrap是什么？
一套易用，優(yōu)雅，靈活，可擴(kuò)展的前端工具集---Bootstrap
GitHub上介紹的Bootstrap：
- 簡(jiǎn)單靈活可用于架構(gòu)流行的用戶(hù)界面和交互接口的HTML辞槐、CSS、JavaScript工具集粘室。
- 基于HTML5榄檬、CSS3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線(xiàn)衔统，卓越的兼容性鹿榜，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)锦爵， 樣式向?qū)臋n舱殿。
- 自定義jQuery插件，完整的類(lèi)庫(kù)险掀，基于Less等沪袭。
Bootstrap安裝方法
-
進(jìn)入官網(wǎng)先下載，要求速度的話(huà)樟氢，下載用于生產(chǎn)環(huán)境的bootstrap冈绊。
TIM圖片20190111163600.png - 在GitHub上建立一個(gè)空倉(cāng)庫(kù)侠鳄，在Gitbase上
git clone之后在分別運(yùn)行以下代碼，先把遠(yuǎn)程倉(cāng)庫(kù)變?yōu)楸镜貍}(cāng)庫(kù)死宣。
echo "# 111" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:lliqi/111.git
git push -u origin master
2.png
-
把下載下來(lái)的文件夾復(fù)制到變?yōu)楸镜貍}(cāng)庫(kù)的遠(yuǎn)程倉(cāng)庫(kù)中伟恶。
TIM圖片20190111164544.png touch index.htmlvi index.html
<html lang = "zh-Hans">
<head>
<meta charset = "UTF-8">
<title>我的第一個(gè) BS demo</title
<link rel = "stylesheet" href = "./css/bootstrap.min.css">
<script src = "./js/jquery.min.js"></script>
<script src = "./js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
以上文件均在下載的文件夾中，一定要在引入bootstrap之前確保電腦里有jQuery十电，如果沒(méi)有知押，采用npm i jquery叹螟，安裝jQuery鹃骂。
- 以上變安裝完畢。
CSS全局樣式：網(wǎng)格布局
- bootstrap官方教程
- 進(jìn)入全局CSS樣式
- 網(wǎng)格布局
- 所有的內(nèi)容都包含在.container中罢绽，.row的存在使元素的行寬寬15px畏线，因?yàn)樗J(rèn)有負(fù)margin。
margin-left:-15px;margin-right:-15px良价。
<div class="container">
...
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
- 平均分12個(gè)格子寝殴，后面的數(shù)字是幾，就占幾個(gè)格子,和里面問(wèn)文字是沒(méi)關(guān)系的明垢，和class的文字有關(guān)蚣常，但是一定要用row包裹。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
- 一旦分的格數(shù)超過(guò)12痊银，就會(huì)自動(dòng)換行抵蚊，以下代碼11自動(dòng)換行，2和11單獨(dú)沾滿(mǎn)一行溯革。
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-11">.col-md-11</div>
</div>
- 一旦分隔數(shù)小于12贞绳，就不會(huì)充滿(mǎn)12格，中間的空隙可以發(fā)生偏移致稀，叫列偏移
- 列偏移
- 偏移多少列冈闭，就在
col-md-offset-后面寫(xiě)數(shù)字
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
CSS全局樣式：響應(yīng)式
- media媒體查詢(xún)的劃分
- 0-768，超小號(hào)屏幕抖单，手機(jī)
col-xs - 768-992萎攒，小號(hào)屏幕，iPad
col-sm - 992-1200矛绘，中號(hào)屏幕
col-md - 1200-無(wú)窮大耍休，大號(hào)屏幕
col-lg
- 語(yǔ)法：可以給一個(gè)div同時(shí)加多個(gè)布局,優(yōu)先使用小型屏幕。
<div class="col-lg-1 col-md-4 col-sm-3 col-xs-6">.col-md-1</div>
其中蔑歌，col-xs-6可以放2個(gè)width: 50%羹应，即12/6.col-sm-3可以放4個(gè)width:25%，即12/3. - 注意寬度變化次屠。
CSS全局樣式：其他樣式
- h1-h6寫(xiě)在col里面,h和small可以混在一起用园匹。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> - 表格：代碼沒(méi)有寫(xiě)雳刺，右鍵在審查元素里面復(fù)制粘貼copy-copyHTML.
- 如果想要添加類(lèi)，一定不要添加在布局的div上裸违，采用方法：新添加一個(gè)div掖桦，添加一個(gè)新class。
- 可用的類(lèi)
組件：
- 沒(méi)有代碼就審查元素copy.
- 文檔中紅色字看一遍供汛。
-
aria-label="..."可以刪掉 - 想實(shí)現(xiàn)左右布局枪汪，在.row里面嵌套.row就可以了。
<div class = "container">
<div class = "row">
<p></p>
<div class = "row">
<div class = "col-md-6">
<button></button>
</div>
<div class = "col-md-6">
<span></span>
</div>
</div>
</div>
- 右浮怔昨，寫(xiě)
pull-right雀久，同時(shí)不寫(xiě)col，使寬度達(dá)到自適應(yīng)趁舀。 - 下載的bootsrtap中右可選的主題CSS赖捌，如果用得到，添加即可矮烹。
<link rel = "stylesheet" href = "./css/bootstrap.theme.css"> - 或者花錢(qián)買(mǎi)更好的主題越庇。
JS插件
- 先學(xué)JS
- 在學(xué)jQuery
- 把bootstrap文檔看完
小知識(shí)點(diǎn)
- Bootstrap默認(rèn)支持jQuery。
- （Twitter）前端寫(xiě)的奉狈。
- Bootstrap知乎評(píng)價(jià)不好卤唉。（小公司用的）
- 版本:http://www.bootcss.com/
- 生產(chǎn)環(huán)境：給付費(fèi)用戶(hù)用的環(huán)境就是生產(chǎn)環(huán)境
- 開(kāi)發(fā)環(huán)境：npm i -g http-server（測(cè)試用）
- 引入bootstrap.js會(huì)先檢查是否有jQuery，所以必須先下載jQuery.
npm i jquery - 要在JS之前引用jQuery仁期。要先檢測(cè)是否有jQuery桑驱。
<script src = "./js/jquery.min.js"></script>
<script src = "./js/bootstrap.min.js"></script>
- .row是有負(fù)margin，所有的內(nèi)容都在.container中蟀拷。row可以使行寬寬15px.
- 布局使用div碰纬，是因?yàn)閐iv沒(méi)有默認(rèn)樣式
