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企业运维高效技巧心得及分享

    本博文出自51CTO博主 吴光科 的博客,有任何问题请进入博主页面互动讨论! 博文地址:http://wgkgood.blog.51cto.com/1192594/1641247 随着Linux在企业 ...

  2. JavaScript编写简单的抽奖程序

    1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4 ...

  3. CSS属性前的 -webkit, -moz,-ms,-o

    -moz-对应 Firefox, -webkit-对应 Safari and Chrome-o- for Opera-ms- for Internet Explorer(microsoft) 在CSS ...

  4. python 内建函数功能函数 abs() coerce() divmod() round() pow()

    >>> abs(-1)1>>> abs(10.)  10.0>>> abs(1.2-2.1j)2.4186773244895647>> ...

  5. 在服务器端如何提取checkbox提交的数据？

    HttpServeletRequest 单个字符串,getParameters() 多个字符串,getParametersValues(),返回一个数组,需要提前定义一个数组

  6. ABAP Util代码

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. [SAP ABAP开发技术总结]消息处理Messages

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. C#打印条码的几种方式

    标题虽然是说C#,但是以下介绍的几种方法不是只能在C#中使用,在其它的语言里面也行. 总结一下常见的条码打印方法,其实打条码的方式很多,大概有以下几种: 1.斑马打印软件制作好模板,保存为.prn格式 ...

  9. python_way ,day11 线程,怎么写一个多线程？，队列，生产者消费者模型，线程锁，缓存（memcache，redis）

    python11 1.多线程原理 2.怎么写一个多线程? 3.队列 4.生产者消费者模型 5.线程锁 6.缓存 memcache redis 多线程原理 def f1(arg) print(arg) ...

  10. 草珊瑚的css基础

    首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirctio ...