<!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. ORA-01113: file xxxx needs media recovery

    由于规范存储位置以及存储空间调整缘故需要移动表空间MRP_INDEX2的数据文件,如下所示,首先将表空间MRP_INDEX2脱机; 然后复制数据文件:接着重命名数据文件,最后将表空间MRP_INDEX ...

  2. SQLite学习笔记(七)&&事务处理

    说到事务一定会提到ACID,所谓事务的原子性,一致性,隔离性和持久性.对于一个数据库而言,通常通过并发控制和故障恢复手段来保证事务在正常和异常情况下的ACID特性.sqlite也不例外,虽然简单,依然 ...

  3. XmlSerializer的使用

    关键词: XmlSerializer StreamWriter T instance 保存xml文件 代码: public static void SaveXML<T>(string xm ...

  4. SQL Server 2008 R2——CROSS APPLY 根据数据出现的次数和时间来给新字段赋值

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  5. DB监控-redis监控

    公司的redis业务很多,redis监控自然也是DB监控的一大模块,包括采集.展示.监控告警.本文主要介绍redis监控的主要指标和采集方法. 一.Redis监控系统逻辑 1.DBA通过前台页面添加r ...

  6. openwrt 安装 ser2net 配置

    //--- openwrt中的ipk应用 opkg install /tmp/ser2net_2.7-2_brcm63xx.ipk 看到安装成功的信息后启动ser2net Ser2net –c /et ...

  7. Windows10的革命之路-全新UWP开发平台

    众所周知,最近几年,微软一直在操作系统上进行统一化的尝试.第一次尝试的产品——Windows 8/8.1操作系统完全谈不上成功.请看下图: 我个人认为,这并不意味着操作系统统一化的策略是错误的,只能算 ...

  8. 13、Apache中虚拟目录和目录权限配置

    一.虚拟目录 之前的个人主页,为了安全起见,需要把~yanji 用户隐藏起来,这时就可以设置个 虚拟目录. 它在Apache服务器应用比较多,能够隐藏系统的真实目录,实用性非常高. 虚拟目录主要 通过 ...

  9. 【Windows编程】系列第十篇：文本插入符

    大家知道,在使用微软的编程环境创建工程时会让你选择是控制台模式还是Windows应用程序.如果选择控制台的console模式,就会在运行时出现一个黑洞洞的字符模式窗口,里面就有等待输入一闪一闪的插入符 ...

  10. Ural 1010. Discrete Function

    1010. Discrete Function Time limit: 1.0 secondMemory limit: 64 MB There is a discrete function. It i ...