Bootstrap下载地址:

- https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
- https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip

Bootstrap文档

- [官方文档](http://getbootstrap.com/)
- [中文文档](http://v3.bootcss.com/)

### 基础的Bootstrap模板

 ```html

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="utf-8">//设置文档编码方式

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">//视口，确保移动端浏览器大小与视口一样

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

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

 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

 <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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

 <![endif]-->

 </head>

 <body>

 <h1>Hello, world!</h1>

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

 <script src="https://ajax.googleapis.com/ajax/libs/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>

 ```

head内容详解:

1.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
`
- 此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

2.

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

- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
+ width:视口的宽度
+ initial-scale：初始化缩放
+ user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
+ minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
+ maximum-scale:最大缩放

3.

条件注释

- 条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

4.

第三方依赖

- [jQuery](https://github.com/jquery/jquery)

> Bootstrap框架中的所有JS组件都依赖于jQuery实现

- [html5shiv](https://github.com/aFarkas/html5shiv)

> 让低版本浏览器可以识别HTML5的新标签，如header、footer、section等

- [respond](https://github.com/scottjehl/Respond)

> 让低版本浏览器可以支持CSS媒体查询功能

bootstrap使用模板的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  2. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  3. hangfire+bootstrap ace 模板实现后台任务管理平台

    前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...

  4. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  6. Bootstrap优秀模板-ColorAdmin.4.3.0

    老牌的Bootstrap商业模板,提供HTML.AngularJS.AngularJS5.Vue.React多种环境,风格覆盖Flat.Material.Apple.Transparent甚至Face ...

  7. Bootstrap优秀模板-Unify.2.6.2

    这是一个非常老牌的Bootstrap商业模板,全面性和稳定性俱佳,有LandingPage.BussinessPage.AdminPage多种模式,非常推荐用来构建官网.响应式应用Web.管理端Web ...

  8. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  9. 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

    这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...

  10. Django 五——中间件、缓存、CSRF、信号、Bootstrap（模板）

    内容概要: 1.Django的请求生命周期是怎么样的? 2.中间件 3.CSRF补充 4.信号 5.Bootstrap(模板) 1.Django的请求生命周期是怎么样的? (即请求发起到返回都经历了什 ...

随机推荐

  1. 10步完成Abp(.net core)+Vue的Demo？

    1.去abp官网生成项目,选择.net core1.x版本  2.Nuget还原包,需装dotnet core1.1等. 3.新增一个entity,并加入到上下文中 4.然后cmd命令行工具切换到项目 ...

  2. linux上安装Oracle 11g R2 标准版 64位

    一.Oracle 安装前的准备 检查一下包,必须全部安装: binutils-2.20.51.0.2-5.43.el6.x86_64 compat-libstdc++-296-2.96-144.el6 ...

  3. C语言 extern学习2 分析

    上一篇文章中,通过头文件声明,而调用有一个特别大的漏洞: 为什么编译器可以链接过来呢,因为默认是extern修饰的,这种类似全局作用域的功能使其可以被调用 继续加强学习: 这一次有两对C文件: fir ...

  4. JS打开摄像头并截图上传

    直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...

  5. 使用scp命令,不同服务器之间拷备文件

    使用scp命令,不同服务器之间拷备文件 先将源服务器,目标服务器安装scp服务 yum -y install openssh-clients 命令格式 scp source dist usage: s ...

  6. Win7_x64_Oracle 安装 PL/SQL Developer

    Win7逐渐成为现行主流的windows操作系统,其32和64位系统平分秋色.然而当下还没有64位的PL/SQL Developer问世,直接用32位的PL/SQL Developer连接Win7(6 ...

  7. Laravel路由和控制器的绑定

    路由和控制器的关系 路由文件地址在\app\Http\routes.php,我们来看两种不同的路由. Route::get('/', function () { return view('welcom ...

  8. Flume-ng源码解析之Channel组件

    如果还没看过Flume-ng源码解析之启动流程,可以点击Flume-ng源码解析之启动流程 查看 1 接口介绍 组件的分析顺序是按照上一篇中启动顺序来分析的,首先是Channel,然后是Sink,最后 ...

  9. ThreadLocal笔记

    1.ThreadLocal的作用是什么?        ThreadLocal是一个泛型类,将保存在其中的值与当前的线程关联起来,这样每个线程看到的值对于其他线程来说都是不可见的,这个技术被称为线程封 ...

  10. 几种功能类似Linux命令汇总

    wc 命令用于统计文本的行数.字数.字节数,格式为"wc [参数]  文本". -l 只显示行数 -w 只显示单词数 -c  只显示字节数 例:统计当前系统中的用户个数: [roo ...