boostrap 基本使用

最新推荐文章于 2023-11-25 20:20:28 发布

爱生活，爱编程

最新推荐文章于 2023-11-25 20:20:28 发布

阅读量529

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_15009739/article/details/104004540

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个非常简单，就是模拟下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

但是你若在

爱生活，爱编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
boostrap 基本使用

这个非常简单，就是模拟下bootstrap 官网列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
复制链接

扫一扫