首页 > 其他 > 详细

bootsrap-----固定布局解析

时间:2019-11-07 13:25:30      阅读:85      评论:0      收藏:0      [点我收藏+]
        <div class="container">
            container
        </div>
.container {
  .container-fixed();容器的width为auto    左右padding为15  (注意是borderBox)
容器的width为750     左右padding为15  (注意是borderBox) @media (min
-width: @screen-sm-min) { width: @container-sm; } 容器的width为970     左右padding为15 (注意是borderBox) @media (min-width: @screen-md-min) {
width: @container
-md; } lg大屏 w >=1200 容器的width为1170   左右padding为15 (注意是borderBox) @media (min-width: @screen-lg-min) {
1140+30=1700 width: @container
-lg; } }
技术分享图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style type="text/css">
            .container{
                border: 1px solid;
                height: 30px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <!--固定容器   
                                width >= 1200         1170
            1200    >= width >= 992           970
            992        >= width >= 768            750
            768        >= width                        流体
        -->
        <div class="container">
            container
        </div>
    </body>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</html>
container

技术分享图片

bootsrap-----固定布局解析

原文:https://www.cnblogs.com/hack-ing/p/11811418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!