Bootstrap3的简单入门

最新推荐文章于 2022-04-13 22:00:22 发布

原创最新推荐文章于 2022-04-13 22:00:22 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何快速开始使用Bootstrap3进行网页布局设计。主要内容包括从官方网站下载适用于生产环境的Bootstrap资源包，以及如何正确引入Bootstrap所需的CSS和JavaScript文件。此外，还详细解释了如何使用.container和.container-fluid两种不同的布局容器。

Bootstrap3的简单导入学习

下载bootstarp
①网站:http://www.bootcss.com/
②下载:用于生产环境的 Bootstrap
导入bootstarp.css
导入jquery.js
导入bootstrap.js
添加一个meta标签支持移动设备
<meta name="viewport" content="width=device-width, initial-scale=1">
将所有的内容放入到布局容器中
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
①方式1:
<div class="container"></div>
②方式2:
<div class="container-fluid"></div>
代码显示

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