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
提示框
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.
