zoukankan      html  css  js  c++  java
  • 002 栅格系统

    一 .栅格系统

    栅格系统:

    [1]栅格系统是用来进行页面布局的一种手段.

    [2]栅格系统将页面划分为12个单元格,通过定位栅格的位置实现页面的布局.


    二.栅格的定义

    <div class="container"><!-- 栅格必须放置在容器之中 -->

          <div class="row"><!-- 容器是由行对象组成 -->

            <div class="col-md-3">栅格1</div><!-- 使用栅格将行对象进行划分 -->

            <div class="col-md-3">栅格2</div>

            <div class="col-md-3">栅格3</div>

            <div class="col-md-3">栅格4</div>

          </div>

    </div>

    我们通过col-md-单位 来设置栅格的大小.

    通过将我们的组件放置在栅格之中,我们就可以完成页面的有效布局.


    三.容器分类

    [1] class=container

    [2]class=container-fluid

    第二种容器总是占满整个页面,而第一个会加入一定的边距.


    四.栅格偏移

    为了更好的布局,我们的栅格必须能在行的方向上进行移动.

    使用属性class=col-md-offset-3: 这表示栅格会向右移动三个栅格的位置.

        <div class="container">

          <div class="row">

            <div class="col-md-3">栅格1</div>

            <div class="col-md-offset-3 col-md-3">栅格2</div>

          </div>

        </div>

    后面的数字表示偏移的数量.

    现在我们就可以bootstrap的布局转换为表格的设计,只要定义好栅格的位置,然后再把需要的组件放置在栅格之中,就可以实现页面的布局了.


    (4)栅格嵌套

    bootstrap之中,我们可以一个栅格视为一个容器,因此我们可以在该容器之中再次进行一个栅格布局.

    <div class="container">

          <div class="row">

            <div class="col-md-3">

                <!-- 进行栅格布局 我们现在将该栅格做为一个容器再次进行布局-->

                <div class="row">

                    <div class="col-md-6" style="background:blue">栅格1</div>

                    <div class="col-md-6" style="background:blue">栅格2</div>

                </div>

                 <div class="row">

                    <div class="col-md-6" style="background:blue">栅格1</div>

                    <div class="col-md-6" style="background:blue">栅格2</div>

                </div>

            </div>       

          </div>

        </div>

    任意的一个栅格,我们都可以把它视为一个基本的容器.

    因此我们就可以再次把这个栅格进行行的分割,实现栅格的运用.

  • 相关阅读:
    回发或回调参数无效。 问题的解决和思考
    母板页中的引用的图片,JS,css等路径问题
    Solution: 题解 CF1196E Connected Component on a Chessboard
    01/05/2020 我注册了博客园 I enrolled in Cnblogs.
    Basic Thought / Data Structure: 前缀和 Prefix Sum
    Basic Thought / Data Structure: 差分 Difference
    DotNet中异步编程(APM)的研究1异步编程介绍
    关于atl server 的感受(3) 一个我自以为豪的应用
    自己的博客,竟然要自己搜出来,太久没来了。
    关于atl server 的感受(2)
  • 原文地址:https://www.cnblogs.com/trekxu/p/8458701.html
Copyright © 2011-2022 走看看