<!DOCTYPE html><!--HTML5的定义-->
<html lang="zh-cn">
<head>
<meta charset="utf-8"><!--页面UTF-8编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--bootStrap不支持ie 的编码模式，这句代码是为了让IE运行最新的渲染模式-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示——平时使用的移动设备是把页面放进一个虚拟的视图：viewport中，一般情况先，这个视口比屏幕宽，这样就不用把每个网页挤到很小的设备屏幕大小中，但是用户浏览需要缩放or左右平移页面才能看清楚。viewport可以让开发者控制在移动设备上显示时页面的大小或缩放，这里的宽度是控制viewport/视口的大小，可以指定一个值，width=device-width就是让视口宽度等于设备的宽度的意思，initial-scale=1就是设置初始缩放（页面首次打开时）的比例，1就是不缩放。总结，这句话的意思就是让视口的宽度等于物理设备上真是的分辨率，初始的缩放比例为1=不缩放。主要为了适配移动设备用的，都要加上。-->
<title>Bootstrap 101 Template，这就是一个最简单的bootStrap页面了。</title>

<!-- Bootstrap 载入bootstrap的css样式-->
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mouge.css" rel="stylesheet"><!--你自己的样式文件 -->
<!--下面这段代码就是注释了的，因为bootStrap的3.0以后的版本不支持ie7以及以下的版本，如果ie的版本低于ie9的话，也就是针对ie8，在[if it IE 9]之后的两句script中，第一个表示为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入代码文件即可。第二个表示让IE8支持媒体查询，即Media Queries。也是为了使IE6、7、8版本浏览器兼容css3样式-->
<!-- 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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins)
BootStrap中的js插件都依赖于jQuery，因此，jQuery要在BootStrap之前引用。以下是加入jquery和bootstrap插件的支持。 -->
<!--如果要使用Bootstrap的js插件，必须先调入jQuery-->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

废话不多说，上代码！

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

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

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

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="css/your-style.css" rel="stylesheet">

        <!--[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.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>

</html>

补充：2017-09-11  09:51:41

最新的bootstarp官网有更新，跟之前的模板框架不太一样了，具体最新模板如下

（详情见官网：https://getbootstrap.com/docs/4.0/getting-started/introduction/）

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <!-- Required meta tags -->

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

     <!-- Bootstrap CSS -->

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

   </head>

   <body>

     <h1>Hello, world!</h1>

     <!-- Optional JavaScript -->

     <!-- jQuery first, then Popper.js, then Bootstrap JS -->

     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

   </body>

 </html>

BootStrap的一个标准框架的内容解释——来源于bootstrap官网的更多相关文章

  1. .net，mvc使用bootstrap做一个标准后台

    今天准备搭一个公用后台,使用bootstrap,方便今后开发,顺便mark一下 后期列表页将使用kendo-ui,增强后台的效果 下面是代码... login页面 @{ Layout = null; ...

  2. 基于Mui与H5+开发webapp的Android原生工程打包步骤（使用新版本5+SDK与Android studio）（部分内容转自dcloud官网）

    文章背景: dcloud官网给出的打包步骤对于有一定安卓打包基础的同学来说比较容易掌握,但是对于webapp小白来讲有的地方可能没有说的太具体.下面我给大家介绍的详细一点,保证大家按照步骤就能学会打包 ...

  3. ASP.NET Core的身份认证框架IdentityServer4--(5)自定义用户登录(使用官网提供的UI)

    IdentityServer官方提供web页面,可以根据需求修改样式.具体UI下载跟配置参考官网文档. 文档地址:https://identityserver4.readthedocs.io/en/r ...

  4. Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...

  5. 一个标准的，兼容性很好的div仿框架的基础模型！

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  6. bootstrap框架:常用内容一

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  8. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  9. AngularJS - 下一个大框架

    AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明 ...

随机推荐

  1. linux快速删除海量文件

    首先创建一个临时目录: /rubbish rsync --delete-before -a -H -v --progress --stats /rubbish /111 /111为目的目录 选项说明: ...

  2. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理8

    接下来做的是对页面的增删改查与页面与页面按钮之间的联系.先上代码和页面效果 using AuthorDesign.Web.App_Start.Common; using System; using S ...

  3. PHP笔记（PHP初级篇）

    学习完HTML和CSS后,终于要开始学习PHP啦!前面的铺垫只为后路的畅顺! PHP环境搭建: 企业中常用到的环境是:Linux+Apache+MySQL+PHP 学习环境是:Windows+Apac ...

  4. java自带工具-jps、jinfo、jstack、jstat、jmap

    掌握java自带的这些监控工具,有助与我们很好的分析问题和jvm性能调优秀.收集了些网上整理很好的文章. Java监控工具.调优.调试辅助函数 Java自带的GUI性能监控工具Jconsole以及Ji ...

  5. 安卓xml颜色设置

    Android开发中,常常会用到color.xml颜色配置,好的颜色配置可以让尼的应用让人看起来赏心悦目! 不罗嗦,上图先 该工程已经罗列了常用的颜色配置 附上工程链接:http://download ...

  6. 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏

    问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...

  7. unity 绘制三角形

    哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...

  8. UINavigationController的创建和相关设置---学习笔记四

    导航控制器 一.设置字体大小,背景等. 二.自定义返回按钮. 三.设置手势. 一.导航中也有个appearance属性,通过它可以设置所有导航的颜色. 二.自定义返回按钮. 1.首先需要知道的是,要把 ...

  9. Windows Serivce服务实现过程和打包安装

    环境:vs2013,win7 参考: Windows服务的快速搭建与调试(C#图解) .Net实现Windows服务安装完成后自动启动的两种方法 C# 生成windows 服务打包程序 1.新建项目W ...

  10. Autofac手动注入及自动注入示例

    参考:http://www.cnblogs.com/xinchuang/archive/2013/05/07/3065433.html#2911661 一.环境 vs2012.mvc4..Net Fr ...