https://www.tutorialspoint.com//bootstrap/bootstrap_input_groups.htm --------Bootstrap API
因?yàn)楣拘枰翱蓿瑥膇OS轉(zhuǎn)到了前端開發(fā)
有一點(diǎn)點(diǎn)的html基礎(chǔ)，所以直接就開始從搭好的h5框架里做了胳搞，但是剛看到這種css是崩潰的
后來發(fā)現(xiàn)原來是調(diào)的Bootstrap庫，去官網(wǎng)看了一下使用方法
撥開云霧見青天啊沼沈，哈哈。稍微看了下币厕，果然強(qiáng)大的不行列另。估計(jì)以后開發(fā)還會用到，所以在這里做一個整合旦装，也方便自己查看页衙。
Bootstrap網(wǎng)格系統(tǒng)
這個網(wǎng)格系統(tǒng)在 逆心 博客里看到的解釋還是很通俗易懂的
Bootstrap把一個頁面分為12列，通過指定數(shù)字就能夠設(shè)置寬度阴绢。
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-6">6</div>
<div class="col-xs-3">3</div>
</div>
效果是這樣
當(dāng)瀏覽器的寬度縮小時店乐，顯示效果如下：
這就是響應(yīng)式布局，尺寸有下面幾種
比如
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">3</div>
<div class="col-xs-12 col-sm-6 col-md-3">3</div>
<div class="col-xs-12 col-sm-6 col-md-3">3</div>
<div class="col-xs-12 col-sm-6 col-md-3">3</div>
</div>```
效果
###Input Groups
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle"> </div>
是這種效果
span標(biāo)簽的位置和樣式可以按需求添加擺放呻袭，比如把 @ 改成 <input type = "radio">
修改樣式大小,比如
<div class = "input-group input-group-lg">
<div class = "input-group ">
<div class = "input-group input-group-sm">
###Button Drop downs
下拉框眨八，這個也用的挺多
<div class = "btn-group"> <button type = "button" class = "btn btn-primary">Primary</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul></div>
效果
按鈕的狀態(tài)可以修改
分開寫是這種效果
<button type = "button" class = "btn btn-default">Default</button><button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> </button>
然后按鈕的大小狀態(tài)，比如
class = "btn btn-default dropdown-toggle btn-lg"
class = "btn btn-primary dropdown-toggle btn-sm"
class = "btn btn-success dropdown-toggle btn-xs"
效果
箭頭的樣式
<div class = "btn-group dropup">
###List Group
這個類似iOS的tableview左电，不過不需要復(fù)用之類的廉侧，簡單粗暴的疊加页响，一般是獲取到數(shù)據(jù)然后嵌套模板循環(huán)添加數(shù)據(jù)
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
<li class = "list-group-item">
<span class = "badge">New</span> 24*7 support
</li>
選中狀態(tài)
<a href = "#" class = "list-group-item active"> Free Domain Name Registration</a>
主副標(biāo)題
<a href = "#" class="list-group-item"> <h4 class = "list-group-item-heading"> Free Domain Name Registration </h4> <p class = "list-group-item-text"> You will get a free domain registration with website pages. </p> </a>
今天暫時先到這，續(xù)更............