zoukankan      html  css  js  c++  java
  • 第四十四节 jQuery之bootstrap栅格响应式布局

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     6     <title>Document</title>
     7     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
     8     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
     9     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    10     <style type="text/css">
    11         div[class*='col-']{
    12             /*height: 50px;*/
    13 /*            background-color: gold;
    14             border: 1px solid #000;*/
    15         }
    16         .box{
    17             height: 200px;
    18             max-width: 240px;
    19             background-color: cyan;
    20             border: 1px solid #000;
    21             margin: 20px auto 0;
    22         }
    23     </style>
    24 </head>
    25 <body>
    26     <div class="container">
    27         <div class="row">
    28             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
    29             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
    30             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
    31             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
    32         </div>
    33     </div>
    34 </body>
    35 </html>
  • 相关阅读:
    vue的单向数据流
    vue的组件基础
    vue v-for的数组改变导致页面不渲染解决方法
    Binary Heap
    Types of Binary Tree
    Merge Sort
    Master Theorem
    Insertion Sort
    Amazon Redshift and Massively Parellel Processing
    Bubble Sort
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12506446.html
Copyright © 2011-2022 走看看