前端框架之bootstrap
一、bootstrap按鈕
1、按鈕
<button class="btn btn-default">按鈕</button>
<button class="btn btn-primary">button按鈕</button>
<button class="btn btn-info">按鈕</button>
<button class="btn btn-success">按鈕</button>
<button class="btn btn-warning">按鈕</button>
<button class="btn btn-danger">按鈕</button>
<a class="btn btn-danger" href="#">a標簽按鈕</a>
2、按鈕組
<div class="btn-group">
<button class="btn btn-default">button按鈕</button>
<button class="btn btn-primary">button按鈕</button>
<button class="btn btn-info">button按鈕</button>
<button class="btn btn-success">button按鈕</button>
<button class="btn btn-warning">button按鈕</button>
<button class="btn btn-danger">button按鈕</button>
</div>
3、通欄按鈕
<button class="btn btn-success btn-block">通欄按鈕</button>
4、通欄按鈕組
a、通欄按鈕組，如果用input標簽或者button標簽，需要將它用btn-group的容器包起來。
b、如果用a標簽做按鈕，就不用上面的結果，直接寫
二、 bootstrap表單
1、表單
<form class="form">
<div class="form-group">
<label for="username">用戶名：</label>
<input type="text" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">密碼：</label>
<input type="password" id="password" class="form-control">
</div>
</form>
2、內聯表單
為 <form> 元素添加 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。
可能需要手動設置寬度、一定要添加 label 標簽（如果不想讓其顯示，可以通過為 label 設置 .sr-only 類將其隱藏。）
3、水平排列的表單
通過為表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平並排布局。這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。
4、表單控件組
三、bootstrap圖片
1、響應式圖片：img-responsive
通過給圖片添加.img-responsive類可以讓圖片支持響應式布局。其實質上是為圖片設置了max-width:100%;和height:auto;屬性，從而讓圖片在其父元素中更好的縮放。
2、圖片形狀
通過為<img>元素添加以下相應的類，可以讓圖片呈現不同的形狀跨瀏覽器兼容性請時刻牢記：IE8不支持CSS3中的圓角屬性。
四、bootstrap字體圖標
通過字體代替圖標，font文件夾需要和css文件夾在同一目錄
<button class="btn btn-danger"><span class="glyphicon glyphicon-music"></span>音樂</button>
五、bootstrap導航條
1、聲明導航條：navbar
2、聲明默認的導航條：navbar-default
3、聲明反白的的導航條樣式 navbar-inverse
4、去掉導航條的圓角： navbar-static-top
5、固定到頂部的導航條：navbar-fixed-top
6、固定到底部的導航條：navbar-fixed-bottom
7、申明logo容器：navbar-header
8、針對logo等固定內容的樣式：navbar-brand
9、定義導航條中的菜單：nav navbar-nav
10、定義導航條中的表單：navbar-form
<div class="navbar navbar-default navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a href="" class="navbar-brand">
LOGO
</a>
</div>
<div class="collapse navbar-collapse" id="togglemenu">
<ul class="nav navbar-nav">
<li><a href="javascript:void(0);">首頁</a></li>
<li><a href="javascript:void(0);">公司新聞</a></li>
<li><a href="javascript:void(0);">行業動態</a></li>
<li><a href="javascript:void(0);">招賢納才</a></li>
<li><a href="javascript:void(0);">關於我們</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
路徑導航
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞動態</a></li>
<li class="active">新聞詳情</li>
</ol>
巨幕（類似於banner圖）jumbotron
六、bootstrap模態框
1、聲明一個模態框：modal
2、定義模態塊的尺寸：modal-dialog
3、定義大尺寸的模態框：modal-lg
4、定義小尺寸的模態框：modal-sm
5、modal-header
6、modal-body
7、modal-footer
<button id="btn1" class="btn btn-danger" data-toggle="modal" data-target="#modal1">大模態框</button>
<div class="modal" id="modal1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
提示
</div>
<div class="modal-body">
<p>姓名不能為空</p>
</div>
<div class="modal-footer">
<button class="btn">確定</button>
<button class="btn btn-warning " data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
前端框架之bootstrap