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/

bootstrap杂记的更多相关文章

  1. BootStrap 杂记

    1:Bootstrap中的弹出窗口组件Modal 2:让div或者文字居中 在标签的class里加上  text-center .

  2. [Flask]学习杂记--模板

    这个学习杂记主要不是分享经验,更多是记录下falsk的体验过程,以后做东西在深入研究,因为django之前用的时间比较长,所以很多概念都是一看而过,做个试验了解下flask的功能. flask中使用是 ...

  3. Mac下通过npm安装webpack 、vuejs,以及引入jquery、bootstrap等(初稿)

    前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...

  4. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  5. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  6. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  7. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  8. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

随机推荐

  1. FineReport:关于扩展行列求各种条件下的函数运用

    最简单的扩展列,扩展行的求"最大,最小,平均"值的例子 设计图 效果图 相关函数 =MAX(B2:E2) =MIN(B2:E2) =AVERAGE(B2:E2) 这个是(满足条件) ...

  2. RTP与RTCP协议介绍(转载)

    RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步.RTP中没有连接的概念,本身并不能为按序传输数据包提供可靠的保证,也不提供流量控制和拥塞控制,这些都由RTCP来负责完 ...

  3. linux-centos在VM中的网络配置

    1.自动获取IP地址 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,i ...

  4. Spring MVC类型转换器

    类型转换器引入 为什么页面上输入"12",可以赋值给Handler方法对应的参数?这是因为框架内部帮我们做了类型转换的工作.将String转换成int 但默认类型转换器并不是可以将 ...

  5. CYQ.Data V5 分布式自动化缓存设计介绍

    前方: 其实完成这个功能之前,我就在思考:是先把想法写了来,和大伙讨论讨论后再实现,还是实现后再写文论述自己的思维. 忽然脑后传来一个声音说:你发文后会进入发呆阶段. 所以还是静下心,让我轻轻地把代码 ...

  6. 尝试用canvas写小游戏

    还是习惯直接开门见山,这个游戏是有一个老师抓作弊的学生,老师背身,点学生开始加分,老师会不定时回头,如果老师回头还在点学生在,就会被抓住,游戏game over. 1.写游戏首先是loading条,于 ...

  7. 使用Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境(一)

    前言     但凡一个略有规模的项目都需要一个持续集成环境的支撑,为什么需要持续集成环境,我们来看一个例子.假如一个项目,由A.B两位程序员来协作开发,A负责前端模块,B负责后端模块,前端依赖后端.A ...

  8. ASP.NET Web API 开篇示例介绍

    ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...

  9. 从零到有——我的OA如何成长

    早前发文说要分享,马上进入了财务系统的开发,拖到现在,见笑了. 我在月初离职了,所以到处跑,找工作,想想南京.苏州.无锡(去玩的).杭州(路过).上海.珠海.深圳.广州.觉得找工作也差不多尾声了,就留 ...

  10. 牛顿法求平方根 scala

    你任说1个整数x,我任猜它的平方根为y,如果不对或精度不够准确,那我令y = (y+x/y)/2.如此循环反复下去,y就会无限逼近x的平方根.scala代码牛顿智商太高了println( sqr(10 ...