bootstrap使用模板
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使用模板的更多相关文章
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- hangfire+bootstrap ace 模板实现后台任务管理平台
前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- Bootstrap优秀模板-ColorAdmin.4.3.0
老牌的Bootstrap商业模板,提供HTML.AngularJS.AngularJS5.Vue.React多种环境,风格覆盖Flat.Material.Apple.Transparent甚至Face ...
- Bootstrap优秀模板-Unify.2.6.2
这是一个非常老牌的Bootstrap商业模板,全面性和稳定性俱佳,有LandingPage.BussinessPage.AdminPage多种模式,非常推荐用来构建官网.响应式应用Web.管理端Web ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...
- Django 五——中间件、缓存、CSRF、信号、Bootstrap（模板）
内容概要: 1.Django的请求生命周期是怎么样的? 2.中间件 3.CSRF补充 4.信号 5.Bootstrap(模板) 1.Django的请求生命周期是怎么样的? (即请求发起到返回都经历了什 ...
随机推荐
- 使用Hugo搭建GitHub个人博客
主题概况 Hugo 是一个用 Go 语言编写的静态网站生成器.类似的静态网站生成器还有Jekyll.hexo等等.以上生成器都使用过,但感觉要么环境麻烦,要么生成静态页面步骤繁琐以及生成缓慢.如果你正 ...
- iOS RunTime你知道了总得用一下
说点题外话: 我刚来现在这家公司的时候,老板让我下载一个脉脉,上去找找自己的同行,多认识些同行.其实初衷的好的,但最近这两天我把它卸载了,不为别的,负能量太多!iOS这行自从2016就没景气过,在这行 ...
- java 四则混合运算 计算器
public class Counter { /**用递归算法,把括号内的公式算出然后递归 * @param args */ public static void calculator (St ...
- web开发之Servlet 一
因为最近在研究公司一套新的框架,发现这套框架的底层是对Struts2,Spring 封装后的WEB应用框架,而我发现如果仅仅是利用这个框架开发,确实很容易快速上手,做业务来说是没有问题的,但我觉得如果 ...
- devexpress控件layoutview特效之一旋转木马的实现
1.devexpress有很多很好的特效,最近做了个旋转木马的特效,给大家分享下.效果图如下: 2.这里的控件为gridcontrol,里面的view为layoutview.数据绑定的代码与其他gri ...
- Matlab将三维变量分割为多个二维变量的方法
最近在处理 Matlab 中的三维矩阵的时候,遇到了一个问题: 假如m 为 5*5*5的矩阵,如果以第三个维度为基础,分割为5个不同的矩阵 m1,m2,m3,m4,应该如何解决? 解决方法:eval函 ...
- 如何通过Visual Studio来管理我们的数据库项目
某日的一个早晨,产品早上来告诉我说要把之前变更的一个功能更改回原来的设计内容,作为程序员大家都最讨厌需求来回反复变更,但是没有办法,苦逼的程序员最终还是继续要改,毕竟是给老板打工的,但是发现我们之前的 ...
- Java第三天
0.注释: 目的:方便其他人阅读理解我们的代码 三种: // 单行注释,进行解释 /**/ 多行注释 /***/ 多行注释 (/***/注释通常用于方法,函数注释,在调用写好的方法或是函数时可以通过点 ...
- MySQL · 引擎特性 · InnoDB IO子系统
前言 InnoDB做为一款成熟的跨平台数据库引擎,其实现了一套高效易用的IO接口,包括同步异步IO,IO合并等.本文简单介绍一下其内部实现,主要的代码集中在os0file.cc这个文件中.本文的分析默 ...
- 项目架构开发：数据访问层之Cache
数据访问层简单介绍 数据访问层,提供整个项目的数据访问与持久化功能.在分层系统中所有有关数据访问.检索.持久化的任务,最终都将在这一层完成. 来看一个比较经典的数据访问层结构图 大概可以看出如下信息 ...