<!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/)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <!-- Required meta tags -->
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 
 8     <!-- Bootstrap CSS -->
 9     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
10   </head>
11   <body>
12     <h1>Hello, world!</h1>
13 
14     <!-- Optional JavaScript -->
15     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
16     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
17     <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>
18     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
19   </body>
20 </html>

 

版权声明:本文为padding1015原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/padding1015/p/6016071.html