Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。

基于 HTML、CSS、JAVASCRIPT ，简洁灵活，使 Web 开发更加快捷。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less(CSS 预处理器，让 CSS 具有动态性)写成。

目前使用较广的是版本2和3，其中2的最新版本的是2.3.2，3的最新版本是3.3.5。

包含了丰富的Web组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象、模式对话框、标签页、滚动条、弹出框等。

1、相关网址

Bootstrap 中文网

　　http://v3.bootcss.com/

起步

　　http://v3.bootcss.com/getting-started/#download
　　http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html#html-template

样式字典
　　布局和栅格：http://docs.bootcss.com/bootstrap-2.3.2/docs/scaffolding.html
　　基本css：http://docs.bootcss.com/bootstrap-2.3.2/docs/base-css.html
　　组件：http://docs.bootcss.com/bootstrap-2.3.2/docs/components.html

js字典
　　http://docs.bootcss.com/bootstrap-2.3.2/docs/javascript.html

定制自己的bootstrap
　　http://docs.bootcss.com/bootstrap-2.3.2/docs/customize.html

源码下载


【简化版本】http://d.bootcss.com/bootstrap-3.3.5-dist.zip

【源码版本】http://d.bootcss.com/bootstrap-3.3.5.zip

2、国内 Bootstrap  CDN 加速服务

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。而且jquery的版本最好是>=1.9.1

3、Bootstrap 的基本文件结构

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   ├── bootstrap-theme.css.map

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

4、基本模版

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

5、一些例子

【主题】http://v3.bootcss.com/examples/theme/

【栅格】http://v3.bootcss.com/examples/grid/

【普通导航条】http://v3.bootcss.com/examples/navbar/      http://v3.bootcss.com/examples/navbar-static-top/

【固定顶部导航条】http://v3.bootcss.com/examples/navbar-fixed-top/

【自定义组件】

封面图：http://v3.bootcss.com/examples/cover/

旋转木马carousel：http://v3.bootcss.com/examples/carousel/

博客页面：http://v3.bootcss.com/examples/blog/#

控制台：http://v3.bootcss.com/examples/dashboard/

登录页：http://v3.bootcss.com/examples/signin/

自适应nav：http://v3.bootcss.com/examples/justified-nav/

6、Bootlint 工具

Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。
在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。
纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。
建议将 Bootlint 加入到你的开发工具中，这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。

7、基于bootstrap的一些优秀网站推荐

http://expo.bootcss.com/

8、图标

bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：

　　 <h3>图标</h3>

    <span class="glyphicon glyphicon-home"></span>

    <span class="glyphicon glyphicon-signal"></span>

    <span class="glyphicon glyphicon-cog"></span>

    <span class="glyphicon glyphicon-apple"></span>

    <span class="glyphicon glyphicon-trash"></span>

    <span class="glyphicon glyphicon-play-circle"></span>

    <span class="glyphicon glyphicon-headphones"></span>

[bootstrap] bootstrap 简介和相关网址的更多相关文章

  1. 超微 X9DRL-iF 服务器主板简介 BIOS相关图解

    超微 X9DRL-iF 服务器主板简介 BIOS相关图解 板载串口阵列相关简介 网烁信息805    发布时间:2012-6-15 21:10:09    浏览数:2745 随着Intel E5至强的 ...

  2. IdentityServer4 中文文档 -2- （简介）相关术语

    IdentityServer4 中文文档 -2- (简介)相关术语 原文:http://docs.identityserver.io/en/release/intro/terminology.html ...

  3. 网络基础 Windows telnet使用简介及相关问题解决方案

    Windows telnet使用简介及相关问题解决方案 by:授客 QQ:1033553122 更改telnet的默认端口(23)(仅适用XP) 步骤: 进入cmd控制窗口 tlntadmn conf ...

  4. webgl图库研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址）

    3D图库框架范围与示例 摘要: 为实现企业80%以上的生产数据进行智能转化,在烟草.造纸.能源.电力.机床.化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级.“远舢文龙数据处 ...

  5. iOS 开发，相关网址

    iOS 开发,相关网址 说明 网址 注册开发者 https://developer.apple.com/cn/programs/enroll/ 未付费688个人开发账号真机调试测试教程 http:// ...

  6. Bootstrap 小技巧以及相关资源整理

    1, Bootstrap Bundle (http://bootstrapbundle.com/): 提供了15中不同的MVC  Bootstrap模板.[扩展和更新]中搜索“Bootstrap Bu ...

  7. Bootstrap的简介及使用

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.javascript 的,它简洁灵活,使得 Web 开发更 ...

  8. 1.bootstrap基础简介

    一·基础简介 1.Bootstrap,来自 Twitter,是一个用于快速开发 Web 应用程序和网站的前端框架,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JavaSc ...

  9. Bootstrap 3 简介

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first pr ...

随机推荐

  1. Linux中安装Cisco Packet Tracer

    Cisco Packet tracer是什么? Cisco Packet Tracer是一个强大的网络模拟工具,用于进行Cisco认证时的培训.它为我们 提供了各个路由器和网络设备的良好的接口视图,这 ...

  2. hdu 1348 （凸包求周长）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 Wall Time Limit: 2000/1000 MS (Java/Others)    Mem ...

  3. Codeforces Round #287 (Div. 2) C. Guess Your Way Out! 思路

    C. Guess Your Way Out! time limit per test 1 second memory limit per test 256 megabytes input standa ...

  4. jQuery中的遍历

    在原生javascript中我们用的最多的遍历就是for,但是在jQuery里面有个方法比for还有强大,它就是我们经常看到的each()方法,当然了如果考虑性能方面的话还是建议用for来进行元素的遍 ...

  5. 百度web前端面试2015.10.18

    邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对 ...

  6. thinkphp中ajaxReturn方法实现ajax效果

    前台代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. (二)程序中的内存&&栈

    一.程序运行为什么需要内存?基本概念? 内存是程序运行的立足之地,程序需要用内存来存储一些变量. 内存管理最终是由操作系统完成的,内存在本质上是一个硬件器件,由硬件系统提供:内存由操作系统统一管理,为 ...

  8. Android App组件之ListFragment -- 说明和示例

    Android App组件之ListFragment -- 说明和示例 1 ListFragement介绍 ListFragment继承于Fragment.因此它具有Fragment的特性,能够作为a ...

  9. 关于时区的时间的详解，比如UTC\GMT等

    UTC 和 GMT 及 北京时间的关系 UTC和GMT,这两者几乎是同一概念.它们都是指的格林尼治标准时间,只不过UTC的称呼更为正式一点.两者的区别在于前者是一个天文 上的概念,而 后者是基于一个原 ...

  10. Oracle数据库和DB2数据库分页SQL的区别举例

    --------------------------ORACLE数据库分页SQL举例------------------------------------------------ SELECT * ...