看程序学bootstrap9-基本样式之栅格布局

最新推荐文章于 2021-02-11 20:23:09 发布

原创最新推荐文章于 2021-02-11 20:23:09 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

33 篇文章

订阅专栏

博客介绍了栅格系统相关内容，包含具体步骤，如涉及一半、1/3、1/4的布局，还提到自动换行，这些步骤与前端栅格系统布局相关。

步骤 1 : 栅格系统

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
     
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">一共12列</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
    </div>
</div>

步骤 2 : 一半，1/3， 1/4

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
 
div.container div.row div {
    margin:5px 0px;
     
}
 
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-6 ">一半</div>
        <div class="col-xs-6 ">一半</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
    </div>
</div>

步骤 3 : 自动换行

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<style>
  
div.container div.row div {
    margin:5px 0px;
      
}
  
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
  
<div class="container">
    <div class="row">
        <div class="col-xs-6 ">一半</div>
        <div class="col-xs-6 ">一半</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-8 ">8格</div>
        <div class="col-xs-6 ">6格</div>
    </div>
</div>