关键词：
一、基础模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<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.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核心js文件 -->
<script src="../../js/jquery-1.11.3.min.js"></script>
<!-- 引入Bootstrap核心js文件 -->
<script src="../../js/bootstrap.js"></script>
</body>
</html>
1、viewport（视口）
1.1、概念
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般 来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正 常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由 设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
1.2、css中的1px并不等于设备中的1px
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css 中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理 像素是不同的。
1.3、meta viewport属性
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。
在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
|
width |
设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
|
initial-scale |
设置页面的初始缩放值，为一个数字，可以带小数 |
|
minimum-scale |
允许用户的最小缩放值，为一个数字，可以带小数 |
|
maximum-scale |
允许用户的最大缩放值，为一个数字，可以带小数 |
|
height |
设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
|
user-scalable |
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
*红色字体的为最常使用的
二、完整模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->
<!--width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap完整模板</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--正文从此处开始-->
<h1>你好，世界！</h1>
<!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->
<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
<script src="../../js/jquery-1.11.0.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="../../js/bootstrap.min.js"></script>
</body>
</html>
更改 Bootstrap 管理模板
】更改Bootstrap管理模板【英文标题】：ChangingBootstrapadmintemplate【发布时间】：2020-12-0611:07:50【问题描述】：如何更改此Bootstrap3管理模板https://getbootstrap.com/docs/3.3/examples/dashboard/喜欢这样吗？很容易移除顶部固定导航栏并将所有内... 查看详情
自定义 Bootstrap CSS 模板
】自定义BootstrapCSS模板【英文标题】：CustomizingBootstrapCSStemplate【发布时间】：2012-01-2516:14:17【问题描述】：我刚刚从Twitter开始使用Bootstrap，我想知道自定义的“最佳实践”是什么。我想开发一个系统，该系统将利用css模板（Boot... 查看详情
一些常用的bootstrap模板资源站
超级Bootstrap模板库：http://www.wrapbootstrap.com/ http://www.templategarden.com/https://shapebootstrap.nethttp://thebootstrapthemes.com/免费的HTML5响应式网页模板：http://html5up.net/WP&Bootstrap：http://www.d 查看详情
bootstrap模板
一、基础模板<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><!--声明文档兼容模式，表示使用IE浏览器的最新模式--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--设置视口的宽度(值为设 查看详情
bootstrap4/3页面基础模板与兼容旧版本浏览器
Bootstrap3与4差别很大，目录文件结构、所引入的内容也不同，这里说说一下Bootstrap引入的文件、网页模板和兼容性问题。本网站刚刚搭建好，正好发一下文章原来测试网站。Bootstrap4目录结构如下bootstrap/├──css/│├──bootstrap.... 查看详情
bootstrap优秀模板-inspinia.2.9.2
下载量最高的Bootstrap管理端模板，完美适配H5，.NETCOre、MVC5、RubyonRails多种开发环境。下面是官方介绍：INSPINIAAdminThemeisapremiumdashboardtemplatewithflatdesignconcept.ItisfullyresponsiveadmindashboardtemplatebuiltwithBootstrap4.xFra 查看详情
如何呈现 Bootstrap 管理模板？
】如何呈现Bootstrap管理模板？【英文标题】：HowtorenderBootstrapadmintemplate?【发布时间】：2018-04-2715:10:37【问题描述】：我有这个adminpaneltemplate，我想在我的DjangoWeb应用程序中使用它。我知道我必须使用模板标签修改模板，但仅此... 查看详情
html04）bootstrap模板(代码片段)
html模板资源bootstrap(代码片段)
myeclipse2016ci4新增bootstrap模板
...iew这一个功能，在后续的版本中会陆续添加新功能。新增Bootstrap模板在模板面板中选择相应的模板，根据自己的样式需求快速定义，Web应用的颜值蹭蹭提升数倍！除了BootStrap模板，MyEclipse还会增加AngularorReact等常用模板，除了针... 查看详情
bootstrap页面模板
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scal 查看详情
bootstrap开发模板
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-s 查看详情
html基本的bootstrap模板(代码片段)
将 Bootstrap 模板添加到 MeteorJS
】将Bootstrap模板添加到MeteorJS【英文标题】：AddBootstraptemplatetoMeteorJS【发布时间】：2013-02-1712:49:38【问题描述】：我有一个来自https://wrapbootstrap.com/的Bootstrap主题，我想在我的MeteorJS应用程序中使用它。问题是它有如下脚本标签：... 查看详情
flask模板flask-bootstrap
1、模板a、block块中继承前面block块的内容，需要添加{{super()}}b、macro宏： 作用：在模板中定义函数(定义函数->注意添加()->可以使用from模板名称import函数名) 实际应用：单独创建一个html，用于定义macro... 查看详情
bootstrap基本模板
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><!--声明文档兼容模式，表示使用IE浏览器的最新模式--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--设置视口的宽度(值为设备的理想宽度 查看详情
bootstrap完整模板
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><!--声明文档兼容模式，表示使用IE浏览器的最新模式--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--设置视口的宽度(值为设备的理想宽度 查看详情
100% 宽度 Twitter Bootstrap 3 模板
】100%宽度TwitterBootstrap3模板【英文标题】：100%widthTwitterBootstrap3template【发布时间】：2013-08-2906:49:50【问题描述】：我是bootstrap新手，我有一个100%宽的模板，我想用bootstrap编写代码。第一列从左角开始，我有一张谷歌地图，一直... 查看详情