Bootstrap3的简单入门

Bootstrap3的简单导入学习

1. 下载bootstarp
   ①网站:http://www.bootcss.com/
   ②下载:用于生产环境的 Bootstrap

2. 导入bootstarp.css

3. 导入jquery.js

4. 导入bootstrap.js

5. 添加一个meta标签 支持移动设备
   <meta name="viewport" content="width=device-width, initial-scale=1">

6. 将所有的内容放入到布局容器中
   Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
   ①方式1:
   <div class="container"></div>
   ②方式2:
   <div class="container-fluid"></div>

7. 代码显示

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <!--增加移动端的条件 viewport-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BootStrap入门</title>

        <!--导入bootstrap的css-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--导入jquery.js-->
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <!--导入bootstrap.js-->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

    </head>

    <body>
        <!--普通的container-->
        <div class="container">
            <div style="border: 1px solid red;">哈哈哈</div>
        </div>
        <!--左右扩大的效果-->
        <div class="container-fluid">
            <div style="border: 1px solid red;">哈哈哈</div>
        </div>
        <!--普通的效果-->
        <div style="border: 1px solid red;">哈哈哈</div>

    </body>

</html>

1. 图片结果显示