Bootstrap-Bootstrap官網卡片響應式布局


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--視口的設置,讓網頁能等比例的縮放到對應設備中-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--告訴ie瀏覽器用最新內核去渲染網頁-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
</head>
<body>

    <!-- 作者:bilaisheng@163.com 時間:2017-10-11 描述:bootstrap 中文網 布局排列 -->

    <style type="text/css"> .container .items{border: 1px solid #EEEEEE;padding: 10px;margin-bottom: 15px;} </style>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="items text-center">
                    <img class="img-responsive" src="https://static.bootcss.com/www/assets/img/codeguide.png?1507601668481" />
                    <h3>Bootstrap 編碼規范</h3>
                    <p>by @mdo</p>
                    <p>Bootstrap 編碼規范:編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="items text-center">
                    <img class="img-responsive" src="https://static.bootcss.com/www/assets/img/yarn.png?1507601668481" />
                    <h3>Bootstrap 編碼規范</h3>
                    <p>by @mdo</p>
                    <p>Bootstrap 編碼規范:編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="items text-center">
                    <img class="img-responsive" src="https://static.bootcss.com/www/assets/img/react.png?1507601668481" />
                    <h3>Bootstrap 編碼規范</h3>
                    <p>by @mdo</p>
                    <p>Bootstrap 編碼規范:編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="items text-center">
                    <img class="img-responsive" src="https://static.bootcss.com/www/assets/img/webpack.png?1507601668481" />
                    <h3>Bootstrap 編碼規范</h3>
                    <p>by @mdo</p>
                    <p>Bootstrap 編碼規范:編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范。</p>
                </div>
            </div>          
        </div>
    </div>

    <!--jquery.js 一定要放在bootstrap.min.js之前,如果不放報錯-->
    <script type="text/javascript" src="../../js/jquery-1.11.2.min.js" ></script>
    <script type="text/javascript" src="../../js/bootstrap.js" ></script>
</body>
</html>

效果截圖

這里寫圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM