Belajar menggunakan kemahiran bootstrap3 grid system

Belajar menggunakan kemahiran bootstrap3 grid system_javascript

WBOY

Lepaskan： 2016-05-16 15:06:00

asal

1642 orang telah melayarinya

1. Menyediakan persekitaran pembangunan bootstrap
1. Muat turun bootstrap, http://www.bootcss.com/
2. Muat turun jquery dan akses terus melalui IEhttp://code.jquery.com/jquery-2.0.3.min.js
3. Import fail js dan css bootstrap dan jquery ke dalam halaman html, dan teg teg ini boleh mengubah suai paparan pada kebanyakan peranti mudah alih keserasian di bawah iaitu9.
Templat adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    
  </div>
</body>
</html>

Salin selepas log masuk

2. Sistem grid
1. Boostrap membahagikan desktop kepada jadual 12 baris * n lajur untuk susun atur Ini adalah teras boostrap.
2. .row melakukan pembahagian peringkat baris dan mesti dimasukkan di bawah .bekas.
3. col-xx-* melakukan pembahagian peringkat lajur, seperti yang ditunjukkan di bawah

<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 class="row">
      <div class="col-md-3">5</div>
      <div class="col-md-3">6</div>
      <div class="col-md-3">7</div>
      <div class="col-md-3">8</div>
    </div>
  </div>

Salin selepas log masuk

4. Offset lajur, dicapai melalui kol-xx-offset-*

  <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 class="row">
      <div class="col-md-3">5</div>
      <div class="col-md-3">6</div>
      <div class="col-md-3 col-md-offset-3">7</div>
    </div>
  </div>

Salin selepas log masuk

5. Pengisihan lajur, boleh mencapai pengisihan lajur kiri atau kanan melalui .col-xx-push-* dan .col-xx-pull-*

  <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 col-md-push-3">3</div>
    </div>
    <div class="row">
      <div class="col-md-3">5</div>
      <div class="col-md-3">6</div>
      <div class="col-md-3 col-md-pull-2">7</div>
    </div>
  </div>

Salin selepas log masuk

6. Lajur bersarang , baris boleh bersarang dalam kol.

    <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">
        <div class="row">
          <div class="col-md-1">5</div>
          <div class="col-md-1">6</div>
          <div class="col-md-1">7</div>
        </div>
      </div>
    </div>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.