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. Ecplise软件Devices看到两个相同设备问题

    Ecplise软件Devices看到两个相同设备问题 在使用过程中,连接一台设备,在Ecplise软件的Devices界面下突然看到2个设备,如下图: 图1 解决方案:先 kill-server, 再 ...

  2. MySQL(六) —— 自定义函数

    自定义函数 用户自定义函数(user-defined function, UDF)是一种对MySQL扩展的途径,其用法与内置函数相同. 参数,返回值 创建自定义函数 CREATE FUNCTION f ...

  3. Virtualenv: 一个Python环境管理工具（windown版本）

    1.安装virtualenv 在安装virtualenv之前,我们需要安装至少有一个版本的python:因为virtualenv是python的一个第三方模块,必须基于python环境才能安装: 如果 ...

  4. 字符串表达式String Expressions

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

  5. NPOI利用多任务模式分批写入多个Excel

    接上文NPOI大数据分批写入同个Excel,这次是利用task多任务同时写入到多个Excel. Form2.cs private void btnExport_Click(object sender, ...

  6. SQL Server 2005 中的同义词

    From : http://blog.csdn.net/itblog/article/details/752881 =============创建同义词 可以为下列对象类型创建同义词: 程序集 (CL ...

  7. JPG 批量压缩、 PNG32、PNG24转PNG 透明批量压缩工具 【JPNG】 支持多级目录

    说在最前,压缩不一定是最好的,仅仅是为了方便自己工作需要.主要是手机端图片 算法说明:JPG压缩使用的是  adobe 的 JPGEncoder+ AIR的JPEGEncoderOptions (注 ...

  8. Python跳过第一行读取文件内容

    Python编程时,经常需要跳过第一行读取文件内容.比较容易想到是为每行设置一个line_num,然后判断line_num是否为1,如果不等于1,则进行读取操作.相应的Python代码如下: inpu ...

  9. .NET 4.0 任务和并行编程系列

    8天玩转并行开发 8天玩转并行开发——第一天 Parallel的使用 8天玩转并行开发——第二天 Task的使用 8天玩转并行开发——第三天 plinq的使用 8天玩转并行开发——第四天 同步机制(上 ...

  10. 09 redo and undo

    本章提要-----------------------------------------------redo, undo 定义redo, undo 如何工作如何访问 redo, undo提交和回滚- ...