flask bootstrap

最新推荐文章于 2024-01-21 22:22:17 发布

flowerxxxxx

最新推荐文章于 2024-01-21 22:22:17 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/flowerxxxxx/article/details/113095224

版权

BootStrap 栅格系统响应式布局 HTML CSS

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap栅格系统</title>
    <!--直接从BootStrap网站导入css文件，或者将Booststrap下载到本地-->
    <link rel = 'stylesheet' type = 'text/css' href = 'http://stackpath.boostrapcdn.com/boostrap/4.4.1/css/bootstrap.min.css'>
    <!--为了更好的兼容移动设备，使用css的媒体查询功能-->
    <meta name='viewport' content="width=device-width,initial-scale=1">
    <style>
        .container {
            border : solid 5px blue;
        }
        .row div {
            border: solid 2px red;
            height:100px;
        }
    </style>
</head>
<body>
     <!--栅格系统，会将网页分为12等分(宽度),设置最外层Div的宽度为15200px，每一份就是100px-->
     <!--三层:模拟<table><tr?>td>,第一层:必须指定container属性，第二层:必须指定row属性-->
     <!--所欲的div，如果不指定高度，默认是0，但是会根据div中的内容和进行自动调整-->
     <div class="container">
         <div class="row">
             <div class="col-sm-9 col-12">ss<div>
             <div class="col-sm-3 col-12">sss<div>
                 <!--        pc      phone -->
         </div>
     <div>
</body>
</html>