boostrap 基本使用

这个非常简单,就是模拟下bootstrap 官网列表

 

<!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">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>

    <style type="text/css">
        .login {
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }
        div[class*=col-]{
            border:1px solid gray;
            padding:0px;
        }
    </style>
</head>

<body>
        <div class="container">
            
            <div class="row">
                
                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
              
            </div>
        </div>

</body>

</html>

当屏幕发生不同变化的时候, 展示效果是不一样的,这就是

响应式

 

好,这节重点,就是如何分配12列!

 

另外 行中的每列都有 padding-left padding-right 15px

container 也有15px 左右padding

但是你若在

发布了200 篇原创文章 · 获赞 13 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览