bootstrap雜記

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

提示框

noty-master.zip 這個更簡潔一些

https://github.com/sciactive/pnotify

總體佈局

http://startbootstrap.com

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/icons/

http://fontawesome.io/examples/