bootStrap入门（二）

之前在没学习bootstrap之前，实现样式都是自己写css样式来达到效果。而bootstrap已经实现了非常多的css样式我们直接拿来用就好了。

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入css,js文件-->
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" >
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="page-header">test head</div>
    </div>

</body>
</html>

给要居中的div加个container样式
这样就居中了。看下它的css样式

还有一个和container相关的样式：container-fluid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入css,js文件-->
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" >
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" style="background: #9966dd">
        container
    </div>
    <div class="container-fluid" style="background: #66ccff">
        container-fluid
    </div>

</body>
</html>

看起来像是一个居中有边距，一个铺满。就像导航栏的做法一样。通过调整浏览器对比一下
宽度大于768的时候container会出现外边距小于768会铺满而container-fluid 一直处于铺满状态。要探索原因的话就要看bootstrap的定义了。这里不谈。各位有兴趣的自己去看看吧。

bootStrap入门（二）

猜你喜欢