前端作业（16）

最新推荐文章于 2024-08-16 16:25:26 发布

咋的啥名都用不了呢~

最新推荐文章于 2024-08-16 16:25:26 发布

阅读量200

点赞数

文章标签：前端 html css3

本文链接：https://blog.csdn.net/weixin_63492023/article/details/127417012

版权

Bootstrap的使用：

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- [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>
        /* 可自己加class名修改自己想要的样式 */
        /* .login {
            width: 100px;
        } */
        [class^="span"] {
            border: 1px solid #ccc;
        }
        .container .col-md-4 {
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- <p>
        <button class="btn btn-mini btn-primary" type="button">Mini button</button>
        <button class="btn btn-mini" type="button">Mini button</button>
      </p>
      <i class="icon-search"></i>
      <i class="icon-music"></i>
      <div class="btn btn-primary login">ok</div>
      <span class="btn btn-danger">no</span>
    <div class="container">123</div>
    <div class="container-fluid">456</div> -->
    <div class="container">
        <!-- 现在的版本是用span 要分成几等份就在span后面直接加可分到的份数即可，
            另：他们之间有间隔((╯‵□′)╯︵┻━┻)，不过，如果跟我一样看这个顺眼，
            可以在bootstrap.min.css中，找到 .row:after{clear:both}[class*="span"]{float:left;min-height:1px;
             margin-left:20px} 把margin-left:20px用注释符“扣”起来-->
        <div class="row">
            <div class="span2 col-md-4">1</div>
            <div class="span2 col-md-4">2</div>
            <div class="span2 col-md-4">3</div>
            <div class="span2 col-md-4">4</div>
        </div>
        <div class="row">
            <div class="span5">1</div>
            <div class="span1">2</div>
            <div class="span1">3</div>
            <div class="span1">4</div>
        </div>
        <!-- 空间有多余会将其空出来 -->
        <div class="row">
            <div class="span3">1</div>
            <div class="span1">2</div>
            <div class="span1">3</div>
            <div class="span1">4</div>
        </div>
    </div>
</body>
</html>