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. BZOJ 3601: 一个人的数论

    题目链接:www.lydsy.com/JudgeOnline/problem.php?id=3601 题意: 思路: 因此可以用高斯消元得到ai. const int mod=1000000007; ...

  2. Android-表格布局 计算器 修改版

    <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" ...

  3. netstat -ano，查看已占用端口,结束已被占用的端口,ntsd,关闭任务管理器杀不了的进程

    cmd——回车,输入netstat -ano——回车,可以查看已占用的端口,记下端口的PID,然后打开任务管理器,点查看,选择列,勾选PID确定,找到对应的PID,结束进程,如果结束不了或者结束后还不 ...

  4. sql注入在线检测(sqlmapapi)

    版权:http://blog.csdn.net/yueguanghaidao/article/details/38026431 每次看都不方便   摘抄下来 之前一搞渗透的同事问我,sqlmapapi ...

  5. 用Spring MVC开发简单的Web应用

    这个例子是来自于Gary Mak等人写的Spring攻略(第二版)第八章Spring @MVC中的一个例子,在此以学习为目的进行记录. 问题:想用Spring MVC开发一个简单的Web应用, 学习这 ...

  6. [SAP ABAP开发技术总结]搜索帮助Search Help （F4）

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

  7. 51nod 1413 权势二进制 背包dp

    1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB  一个十进制整数被叫做权势二进制,当他的十进制表示的时候只由0或1组成.例如0,1,101, ...

  8. 改变bootstarp图标水平方向

    我一开始是以为bootstarp已经自定义了方向的类的,但是我查阅了好久都没有看到,我这里用的是CSS3的旋转180° 1:HTML <i class="icon-thumbs-dow ...

  9. 表单美化-原生javascript和jQuery下拉列表（兼容IE6）

    效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...

  10. mypc--------------->lspci,lsusb,meminfo cpuinfo ioports filesystems interrupts mounts net partitions pagetypeinfo slabinfo timer_list uptime version zoneinfo 等配置信息

    [user@username home]$ lspci00:00.0 Host bridge: Intel Corporation 4th Gen Core Processor DRAM Contro ...