第一个bootstrap网页

最新推荐文章于 2022-09-27 23:48:08 发布

csucoderlee

最新推荐文章于 2022-09-27 23:48:08 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： bootstrap 前端开发 html css 源代码

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u010372981/article/details/47394055

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

bootstrap文件下载地址：

http://getbootstrap.com/getting-started/

打开上面的地址连接之后，能看见这样的三个download，第一个download下载的就是bootstrap相关的cssjs文件了，而第二个就是所有的bootstrap源代码

点击第一个download bootstrap下载，会得到bootstrap-3.3.5-dist压缩包，解压它，里面有三个文件夹css、js、fonts，每个文件夹下就是对应的相关文件了

在与这三个文件夹同一级的文件目录下，创建一个index.html文件，开始编辑该html文件的内容。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap hello world</title>


    <!-- 引入bootstrap的css文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- 下面几行代码是对IE浏览器的支持，将来可以不写了，windows10已经把IE换掉，再说基本上早就没人使用IE了-->
    <!-- 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>


    <!-- bootstrap的js文件是基于jquery的，要先引用jquery文件，该引入必须在引入bootstrap的js文件之前 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ok，打开就能看见该网页了，该html只为显示如何导入使用bootstrap开发网页