columns bootstrap Grid

Bootstrap 12 ɡ (xs, sm, md, lg ) . . 12 .



Bootstrap

:


  • xs ( ) 768px .
  • sm ( ) 992px 768px.
  • md ( ) 1200px 993px.
  • lg ( ) 1200px.


Bootstrap:

:
<div class="container"> 
  <div class="row"> 
    <div class="col-sm-6 col-md-7 col-lg-9"> 
      <div class="well"> </div> 
    </div> 
    <div class="col-sm-6 col-md-5 col-lg-3"> 
      <div class="well"></div> 
    </div> 
  </div> 
  <hr /> 
  <div class="row"> 
    <div class="col-sm-6 col-md-2 col-lg-5"> 
      <div class="well"></div> 
    </div> 
   <div class="col-sm-6 col-md-10 col-lg-7"> 
      <div class="well"></div> 
   </div> 
  </div>
</div>
ǡ .container .container-fluid <div> row <div> ѡ <div> .col-*-* .col-xs-* .col-sm-* .col-md-* .col-lg-* * .
well. . Bootstrap3.

:


  • container. container-fluid. .
  • .row ().
  • .


: ߡ ɡ .

:

25%-75% col-sm-*:
:
<div class="col-sm-3"> 
</div> 
<div class="col-sm-9"> 
</div>
50%-50% col-md-*:
:
<div class="col-md-6"> </div> 
<div class="col-md-6"> </div>
33%-66% col-lg-*:
:
<div class="col-lg-4"> </div> 
<div class="col-lg-8"> </div>
:

:
<div class="col-sm-3 col-md-6 col-lg-4"> 
</div> 
<div class="col-sm-9 col-md-6 col-lg-8"> 
</div>
Bootstrap ݡ :

[CODE]
<div class="visible-sm col-md-6 col-lg-4">
</div>
<div class="hide-sm col-md-6 col-lg-8">
</div>[/CODE