zoukankan      html  css  js  c++  java
  • bootstrap简单的响应式布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bootstrap基础</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">  <!-- 3.x.x是目前最稳定的版本 -->
        <style type="text/css">
            .container{
                border: 1px solid #333;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./img/book.jpg">
                        <div class="caption">
                        <h3 class="text-center">青青树</h3>
                        <p class="text-center">魁拔三 魁拔三 魁拔三 魁拔三 魁拔三</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./img/book.jpg">
                        <div class="caption">
                        <h3 class="text-center">青青树</h3>
                        <p class="text-center">魁拔三 魁拔三 魁拔三 魁拔三 魁拔三</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./img/book.jpg">
                        <div class="caption">
                        <h3 class="text-center">青青树</h3>
                        <p class="text-center">魁拔三 魁拔三 魁拔三 魁拔三 魁拔三</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./img/book.jpg">
                        <div class="caption">
                        <h3 class="text-center">青青树</h3>
                        <p class="text-center">魁拔三 魁拔三 魁拔三 魁拔三 魁拔三</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    </body>
    </html>

    关键字: container(1170) container-fluid(0)   row(margin-left/right: -15px)   col-lg-x    col-md-x     col-sm-x    col-xs-x   (栅格系统,根据屏幕大小做自适应排版分布)  thumbnail text-center   caption

    不积小流,无以成江河!记住一万个小时定律!
  • 相关阅读:
    HDU 3401 Trade
    POJ 1151 Atlantis
    HDU 3415 Max Sum of MaxKsubsequence
    HDU 4234 Moving Points
    HDU 4258 Covered Walkway
    HDU 4391 Paint The Wall
    HDU 1199 Color the Ball
    HDU 4374 One hundred layer
    HDU 3507 Print Article
    GCC特性之__init修饰解析 kasalyn的专栏 博客频道 CSDN.NET
  • 原文地址:https://www.cnblogs.com/Ed-song/p/7979044.html
Copyright © 2011-2022 走看看