学习bootstrap笔记

用户5924633670174
194 阅读1分钟

响应式布局原理指的是

一、可以随着设备改变，比如pc端到ipad端，网页可以跟随屏幕大小变化，而自己发生变化。 二、一种网站设计的技术，通过对不同屏幕尺寸的设备进行自适应布局，以确保网站在不同设备上都能够进行良好的展示和使用。在响应式布局中，通过媒体查询和流式布局等技术来对网站的设计、排版、图片和内容进行适配，以提供更好的用户体验和更高的可用性。响应式布局让网站的设计更加灵活和多样化，能够满足不同用户和设备的需求，也能够在多种终端上提供一致的视觉感受。

<!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">
    <title>Document</title>
    <style>
        .container {
            background-color: pink;
            height: 500px;
            margin: 0 auto;
        }
        /* 1、超小屏幕下，小于768布局容器的宽度为100% */
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }
        /* 2、小屏幕下，大于等于768 布局容器改为750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        /* 3、中等屏幕下，大于等于992 布局容器改为970 */
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }

        /* 4、大屏幕下，大于等于1200 布局容器改为1170 */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
</body>

</html>

响应式导航,按钮可以根据bootstrap官网给出的案例，快速引用。

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            /* 变为响应式，将width改为33.33% */
            height: 30px;
            background-color: green;
        }

        @media screen and(max-width:767px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>
</html>

Bootstrap布局容器指的是

Bootstrap栅格系统，参数与使用

Bootstrap栅格系统列嵌套

<!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">
    <title>Document</title>
    <!--[if lt IE 9]>
                  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
                  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
                <![endif]-->
    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
            /* margin: 0 10px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加一个row行，这样可以取消父元素的padding值，而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>
</html>

image.png

Bootstrap栅格系统列偏移

<!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">
    <title>Document</title>
    <!--[if lt IE 9]>
                      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
                      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
                    <![endif]-->
    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
            /* margin: 0 10px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- 偏移的份数是12-两个盒子的份数：12-6=6 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子，那么就偏移=(12-8)/2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>
</body>
</html>

image.png

Bootstrap栅格系统列排序

栅格系统列排序可以达到两列交换的目的。


<!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">
    <title>Document</title>
    <!--[if lt IE 9]>
                          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
                          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
                        <![endif]-->
    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-push-4">左</div>
            <div class="col-md-4 col-md-pull-8">右</div>
        </div>
    </div>
</body>

</html>

image.png

栅格系统响应式工具

<!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">
    <title>Document</title>
    <!--[if lt IE 9]>
                              <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
                              <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
                            <![endif]-->
    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .row {
            background-color: pink;
            height: 80px;
        }

        .row div:nth-child(3) {
            background-color: purple;
            height: 80px;
        }

        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">变魔术</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>
</html>

屏幕缩小的话我会显示哦、变魔术所在元素消失。 image.png

avatar
文章
阅读
粉丝