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. 烂泥:VMWare Workation双网卡配置IP地址

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 前几天给一个客户做远程项目实施,客户那边的服务器是Windows OS的,我们这边的业务 ...

  2. python_单元测试unittest

    Python自带一个单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作. 步骤1:首先引入unittest模块--import un ...

  3. 使用C#给Linux写Shell脚本

    在这个逼格决定人格,鄙视链盛行的年头,尤其是咱们IT界,请问您今天鄙视与被鄙视的次数分别是多少?如果手中没有一点压箱的本事,那就只有看的份了.今天我们也要提升下自己的格调,学习些脑洞大开的东西,学完之 ...

  4. 【腾讯Bugly干货分享】WebVR如此近-three.js的WebVR示例解析

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff1689a6c9121b1adb16 作者:苏晏烨 关于WebVR 最 ...

  5. Johnson 全源最短路径算法

    解决单源最短路径问题(Single Source Shortest Paths Problem)的算法包括: Dijkstra 单源最短路径算法:时间复杂度为 O(E + VlogV),要求权值非负: ...

  6. webstorm license key

    JetBrains WebStorm注册码 UserName: William License Key : ===== LICENSE BEGIN ===== 45550-12042010 00001 ...

  7. ABP源码分析十三:缓存Cache实现

    ABP中有两种cache的实现方式:MemroyCache 和 RedisCache. 如下图,两者都继承至ICache接口(准确说是CacheBase抽象类).ABP核心模块封装了MemroyCac ...

  8. 修改策略组/注册表 屏蔽Win10升级解决方法

    一.Windows非家庭版 第1步:按Win+R键调出运行对话框,输入命令“gpedit.msc”,按回车键启动组策略编辑器. 第2步:依次定位到“计算机配置→管理模板→Windows组件→Windo ...

  9. struts debug 标签

    < s:debug> 引起下面的错误 org.apache.jasper.JasperException: Caught an exception while getting the pr ...

  10. 打印Lua的Table对象

    小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...