bootstrap栅格化布局

时间：2016-04-09 21:53:26 阅读：211 评论：0 收藏：0 [点我收藏+]

标签：

这几天研究了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-width: 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-width: 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);;
   }
   }

bootstrap栅格化布局

标签：

原文地址：http://www.cnblogs.com/summer323/p/5372654.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行