bootstrap栅格化布局

这几天研究了bootstrap响应式布局，其实现原理如下：

首先用@media查询当前屏幕的大小，然后根据屏幕大小显示不同样式，样式都是用%定义的。

自己模仿也实现了类似的布局，代码如下：

//html文件
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>自己实现栅格布局</title>
   <link href="css/mystyle.css" rel="stylesheet" type="text/css">
 </head>
 <body>
   <div class="container">
      <div class="row">
        <div class="col-xs-6 col-sm-4">1-1</div>
        <div class="col-xs-6 col-sm-4">1-2</div>
        <div class="col-xs-12 col-sm-4">1-3</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3">2-1</div>
        <div class="col-xs-6 col-sm-6">2-2</div>
        <div class="col-xs-3 col-sm-3">2-3</div>
      </div>
      <div class="row">
         <div class="col-xs-2 col-sm-1">3-1</div>
         <div class="col-xs-2 col-sm-1">3-2</div>
         <div class="col-xs-8 col-sm-2">3-3</div>
         <div class="col-xs-3 col-sm-2">3-4</div>
         <div class="col-xs-3 col-sm-6">3-5</div>
      </div>
   </div>
 </body>
</html>


//css文件
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
.container{
    width:100%;
    max-width: 1201px;
}
.container,[class*="col-"]{
    border:solid 1px #999;
}
.row:before,.row:after{
    content:"";
    display: table;
    clear:both;
}
[class*="col-"]{
    float:left;
    min-height:1px;
    padding:12px;
    height:50px;
    margin:10px;
    background-color: #eee;
    font-size:12px;
    text-align: center;
}

@media screen and (min- 769px){
   .col-sm-1 {
       width:calc(8.333333% - 20px);
   }
   .col-sm-2 {
       width:calc(16.666666% - 20px);
   }
   .col-sm-3 {
        width:calc(24.999999% - 20px);
   }
   .col-sm-4 {
       width:calc(33.333332% - 20px);
   }
   .col-sm-5 {
       width:calc(41.666665% - 20px);
   }
   .col-sm-6 {
       width:calc(50% - 20px);
   }
   .col-sm-7{
       width:calc(58.333331% - 20px);
   }
   .col-sm-8 {
       width:calc(66.666664% - 20px);
   }
   .col-sm-9 {
       width:calc(74.999997% - 20px);
   }
   .col-sm-10 {
       width:calc(83.333333% - 20px);
   }
   .col-sm-11{
       width:calc(91.666666% - 20px);
   }
   .col-sm-12 {
       width:calc(100% - 20px);
   }
}

 @media screen and (max- 768px){
   .col-xs-1 {
       width:calc(8.333333% - 20px);
   }
   .col-xs-2 {
       width:calc(16.666666% - 20px);
   }
   .col-xs-3 {
       width:calc(24.999999% - 20px);
   }
   .col-xs-4 {
   width:calc(33.333332% - 20px);
   }
   .col-xs-5 {
   width:calc(41.666665% - 20px);
   }
   .col-xs-6 {
        width:calc(50% - 20px);
   }
   .col-xs-7{
       width:calc(58.333331% - 20px);
   }
   .col-xs-8 {
       width:calc(66.666664% - 20px);
   }
   .col-xs-9 {
    width:calc(74.999997% - 20px);
   }
   .col-xs-10 {
        width:calc(83.333333% - 20px);
   }
   .col-xs-11{
       width:calc(91.666666% - 20px);
   }
   .col-xs-12 {
       width:calc(100% - 20px);;
   }
   }

相关阅读:
windows2003 iis 配置 php
ORA16038的解决(日志无法归档)
ORACLE表连接方式分析及常见用法
 (轉)如何计算Oracle内存中的几个命中率
 SQL調整
 婚后
 Automating Database Startup and Shutdown(开机启动和关闭oracle)
oracle自动启动与停止
 backgroup process
改变日期的输出格式(nls_date_format)
原文地址：https://www.cnblogs.com/summer323/p/5372654.html