cari

Rumah >hujung hadapan web >tutorial js >Belajar menggunakan kemahiran bootstrap3 grid system_javascript

Belajar menggunakan kemahiran bootstrap3 grid system_javascript

WBOY
WBOYasal
2016-05-16 15:06:001669semak imbas

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 e8e496c15ba93d81f6ea4fe5f55a2244 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>

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>

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>

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>

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tutorial pengenalan tentang menggunakan kemahiran tree_javascript lungsur plug-in zTreeArtikel seterusnya：Tutorial pengenalan tentang menggunakan kemahiran tree_javascript lungsur plug-in zTree

Artikel berkaitan

Lihat lagi