<!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. eAccelerator、memcached、xcache、APC 等四个加速扩展的区别

    折腾VPS的朋友,在安装好LNMP等Web运行环境后都会选择一些缓存扩展安装以提高PHP运行速度,常被人介绍的有eAccelerator.memcached.xcache.Alternative PH ...

  2. Java javassist动态代理

    package org.windwant.spring.core.proxy; import javassist.ClassPool; import javassist.CtClass; import ...

  3. CentOS7 虚拟机搭建、初始设置、简单使用

    注:虚拟机安装的系统是CentOS7 1.网络设置 网络的设置主要是为了让虚拟机和物理机能够相互ping通,这样就可以用XShell之类的工具操控,也可以上网 见另一篇 CentOS7网络配置 2.物 ...

  4. SQL Server自动化运维系列——监控磁盘剩余空间及SQL Server错误日志（Power Shell）

    需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 在所有的自检流程中最基础的一个就是磁盘剩余空间检测. ...

  5. WPF 自定义ListBox

     如题,要实现一个如下的列表,该如何实现? 在设计过程中,会遇到如下问题: 1.ListBox中ListBoxItem的模板设计 2.ListBox中ListBoxItem的模板容器设计 3.List ...

  6. 编译安装zabbix 3.0及分开部署配置详解

    实验系统:CentOS 6.6_x86_64 实验前提:提前准备好编译环境,防火墙和selinux都关闭 实验说明:本实验共有4台主机,IP及角色分配如拓扑 下载地址:试验中用到mariadb软件的下 ...

  7. Ubuntu PPTP 服务器安装

    安装相应的包 sudo apt-get install pptpd 修改配置文件pptpd.conf sudo vim /etc/pptpd.conf 设置对应的VPN网络,localip是服务器的, ...

  8. WPF Prism

    简介   图解   参考 Using the Model-View-ViewModel Pattern

  9. 《InsideUE4》-9-GamePlay架构（八）Player

    你们对力量一无所知 引言 回顾上文,我们谈完了World和Level级别的逻辑操纵控制,如同分离组合的AController一样,UE在World的层次上也采用了一个分离的AGameMode来抽离了游 ...

  10. POJ1717 Dominoes[背包DP]

    Dominoes Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6731   Accepted: 2234 Descript ...