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/