<!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. Database 'xxx' cannot be upgraded because it is read-only or has read-only file Make the database or files writeable, and rerun recovery.

      在分离数据库DatabaseName(暂且用DatabaseName代替该数据库名)后,我将其数据文件以及日志文件移动到新增的磁盘上.然后附加该数据库,结果报如下错误: Database 'Dat ...

  2. 问题解决——MFC Ribbon 添加图标

    =================================版权声明================================= 版权声明:本文为博主原创文章 未经许可不得转载  请通过右 ...

  3. 【转】SpringMVC中DispatcherServlet配置中url-pattern 配置/*和/的区别

    原文地址:http://m.blog.csdn.net/blog/liuxiao723846/43733287 在使用springmvc时,都会在web.xml中配置一个dispatchservlet ...

  4. android 复制字符串到剪贴板

    public static void CopyToClipboard(Context context,String text){ ClipboardManager clip = (ClipboardM ...

  5. openstack 命令行管理 - 目录

    原文http://blog.csdn.net/signmem/article/details/19513775 相关 openstack  命令行管理, 分下面部分进行介绍 openstack 命令行 ...

  6. 理解 OpenStack 高可用（HA）（2）：Neutron L3 Agent HA 之 虚拟路由冗余协议（VRRP）

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  7. Azure HDInsight 和 Spark 大数据实战(一)

    What is HDInsight? Microsoft Azure HDInsight 是基于 Hortonoworks Data Platform (HDP) 的 Hadoop 集群,包括Stor ...

  8. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  9. Socket服务端和客户端（C++，CodeBlocks+GCC编译）

    //main.cpp 1 #include "j_socket.h" #include <stdio.h> #include <pthread.h> ; j ...

  10. Nim游戏

    目前有3堆石子,每堆石子个数也是任意的,双方轮流从中取出石子,规则如下:1)每一步应取走至少一枚石子:每一步只能从某一堆中取走部分或全部石子:2)如果谁不能取谁就失败. Bouton定理: 必败状态当 ...