http://v3.bootcss.com/ 這個國內的中文站點資料很全 如下看個頁面的大體框架 http://www.cnblogs.com/sunhaoyu/p/4275190.html <!-- bootstarp 的導航欄預設高度為 50px class="nav navbar-invers ...
http://v3.bootcss.com/ 這個國內的中文站點資料很全
如下看個頁面的大體框架
http://www.cnblogs.com/sunhaoyu/p/4275190.html
<!-- bootstarp 的導航欄預設高度為 50px
class="nav navbar-inverse" 設置導航的條樣式（當前北京為黑色） 還可以寫成class="nav navbar-default"
role="navigation" 表示當前div 已設置為導航欄
class="container-fluid" 也就是告訴導航欄採用的是流佈局方式
navbar-fixed-top 設置導航條始終顯示在頁面頂部 ，對應的navbar-fixed-bottom始終顯示在下麵
-->
<div class="nav navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- 隱藏按鈕當頁面小於預設為768像素時，隱藏響應式佈局里的內容，顯示此按鈕
data-target=".nav-collapse" 找的是下麵設置響應佈局的 div
-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> <!--每一個”span 標簽就是一個小橫線 這裡的按鈕就是由3小橫線組成“-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 添加一個logo 因為導航欄的高度預設為50pk 為了以防外一將logo的高度設為50px-->
<a href="#" class="navbar-brand">
<img src="img/{1Y(FB52``7)ZKN(0EYQUZY.jpg" style="height: 50px; margin-top:-15px;"/>
</a>
</div>
<!--
class="collapse nav-collapse" 將當前div里的模塊變成響應式佈局
-->
<div class="collapse navbar-collapse">
<!-- 導航列表-->
<ul class="nav navbar-nav">
<!-- class="active" 為預設被選中的菜單 -->
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">導航一</a></li>
<li><a href="#">導航二</a></li>
</ul>
<!--導航的搜索框
class="navbar-form navbar-right" 第一個類標簽標記為搜索欄
第二個"navbar-right"設置為靠右顯示
-->
<div class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="請輸入關鍵字"/>
<button class="btn btn-primary">搜索</button>
<a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">登 陸</a>
<a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">註 冊</a>
</div>
最基本的一個頁面效果
http://blackrockdigital.github.io/startbootstrap-bare/
一些GUI組件
組件
導航Menu
https://github.com/onokumus/metisMenu
http://mm.onokumus.com/event.html# 左導航和提示視窗
表單校驗
jqBootstrapValidation-master.zip ReactiveRaven-jqBootstrapValidation-1.3.6-0-gd66d033.zip bootstrap2的版本，較老
bootstrap-validator-master.zip 採用，支持H5的形式，如果相容一以前的有相容方案
表單設計
Bootstrap-Form-Builder-gh-pages.zip FormbuildV1.0_20140714.zip[中文版]
編寫表單時，可以使用這個直接拖放形成表單的html內容
Grid
bootstrap-table-develop.zip bootstrap-table-examples-master.zip
對話框
bootstrap3-dialog-master.zip
提示框
https://github.com/sciactive/pnotify
整體佈局
https://github.com/BlackrockDigital/startbootstrap 總計有35個網站模板 其中sb2的質量和流行度好
startbootstrap-sb-admin-2-1.0.8.zip
Dropdown類的懸停自動打開
https://github.com/CWSpear/bootstrap-hover-dropdown
bootstrap-hover-dropdown-master.zip
TreeView
https://github.com/jonmiles/bootstrap-treeview
圖標 fontawesome
用法：首先引入CSS文件：<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
然後用 <i class="fa fa-XXXX"></i> 輸出圖標
比如用 <i class="fa fa-home"></i> 可輸出
更多內容請訪問 http://fontawesome.io/
<iclass="fa fa-camera-retro"></i> fa-camera-retro
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
Use fa-fw to set icons at a fixed width.
http://fontawesome.io/examples/
