菜单

页面布局

2018年12月15日 - Bootstrap

Bootstrap作为支撑响应式布局之一个前端插件,确实发挥在关键之用意,无论你是于二哥大,平板仍旧PC上浏览网页,都能达到科学的效能,那所有一切,都是bootstrap带被大家的!

/*异地距 顺序 上左边下左    */
                /*margin: 100px 0px 30px 40px;*/
                /*内边距*/
                /*padding: 100px 0px 30px 20px;*/

明日最首要说下页面的布局,这是极致基础之东西了,当我们计划一个站点时,应该吗它们设计一个全局性的汇合之正统页面,这种页面大家让它布局页,而于页面及反映出的物,就是布局的素,在bootstrap里当也是不可少的事物。

 

Bootstrap的布局是均等种栅格系统,即她由行和排成,在动用时需呢页面内容跟栅格系统包裹一个
.container 容器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <style>
            .div1,.div2{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .div2{
                background: blue;
                /*padding-top:50px;
                margin-left: 50px;*/
                margin: 100px 0px 0px 50px;
            }
            .banner{
                width: 100px;
                height: 100px;
                background-color: yellow;
                /*变动定位*/
                position: fixed;
                bottom: 0px;
                right: 0px;
                
            }
            
            .div-relative{
                width: 100px;
                height: 100px;
                background-color: red;
                /*相对固化*/
                position: relative;
            }
            
            .div-absolute{
                width: 20px;
                height: 20px;
                background-color: green;
                /*决定位*/
                position: absolute;
                top: 0px;
                right: 0px;
            }
            
            .xxx{
                width: 300px;
                height: 300px;
                background-color: cadetblue;
            }
            /*分层*/
            .div3,.div4{
                width: 200px;
                height: 200px;
                background-color: cadetblue;
                border: 3px solid black;
                position: relative;
            }
            .div3{
                z-index: 20;
            }
            .div4{
                background-color: antiquewhite;
                margin-top: -50px;
                z-index: 10;
            }
            
            /*流式布局*/
            .dad{
                width: 70%;
                height: 175px;
                border: red 1px solid;
                margin: 50px;
                /*overflow: hidden;*/
            }
            .son{
                height: 50px;
                width: 70px;
                background-color: green;
                border: 1px solid black;
                /*流式布局方向*/
                float: left;
                
                color: white;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <!–盒子模型–>
        <!–<div class=”div1″></div>
        <div class=”div2″>字字字字</div>–>
        <!–页面布局–>
        <!–浮动布局–>
        <div class=”banner”>小广告</div>
        <!–绝对定位–>
        <div class=”div-relative”></div>
        <!–相对定位–>
        <!–<div class=”div-absolute”></div>–>
        <div class=”div-relative”>
            <div class=”div-absolute”></div>
        </div>
        
        <div class=”xxx”>
            <div class=”div-absolute”></div>
        </div>
        <!–分层–>
        <div class=”div3″></div>
        <div class=”div4″></div>
        <!–流式布局–>
        <div class=”dad”>
            <div class=”son”>1</div>
            <div class=”son”>2</div>
            <div class=”son” style=”height: 70px;”>3</div>
            <div class=”son”>4</div>
            <div class=”son”>5</div>
            <div class=”son”>6</div>
            <div class=”son”>7</div>
            <div class=”son”>8</div>
            <div class=”son”>9</div>
            <div class=”son”>0</div>
        </div>
        
        
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
      
 <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    </body>
</html>

一 .container 类用于固定宽度并协助响应式布局之器皿。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全体视口(viewport)的器皿。

<div class="container-fluid">
  ...
</div>

其次 栅格系统的行和列,在bootstrap里,行及排下row和col表示,而一行中最多有12只列单元构成,col-md-1表示占用1独单元的升幅,而col-md-7表示占用7个单元的增长率,它们加在一起最多吗12单单元

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

仲以及老三实施呈现出来的机能类似那样

图片 1

其三 嵌套列,列着还好生列,这种嵌套我们得将md改也sm

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

效果类似于这样

图片 2

前天便说及此处,紧假若盖布局之部分基础知识。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图