Pengenalan kepada Bootstrap


Apakah Bootstrap?

Bootstrap ialah rangka kerja bahagian hadapan untuk pembangunan pesat aplikasi web dan tapak web. Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT.

Sejarah

Bootstrap dibangunkan oleh Mark Otto dan Jacob Thornton Twitter. Bootstrap ialah produk sumber terbuka yang dikeluarkan pada GitHub pada Ogos 2011.

Mengapa menggunakan Bootstrap?

  • Didahulukan mudah alih : Mulai Bootstrap 3, rangka kerja itu termasuk gaya diutamakan mudah alih di seluruh perpustakaan.

  • Sokongan penyemak imbas: Semua penyemak imbas utama menyokong Bootstrap.

    Internet Explorer

  • Mudah untuk bermula: Selagi anda mempunyai pengetahuan asas HTML dan CSS, anda boleh mula belajar Bootstrap.

  • Reka bentuk responsif: CSS responsif Bootstrap menyesuaikan diri dengan desktop, tablet dan telefon mudah alih. Untuk mendapatkan maklumat lanjut tentang reka bentuk responsif, lihat Reka Bentuk Responsif Bootstrap.

  • Ia menyediakan penyelesaian yang ringkas dan bersatu untuk pembangun mencipta antara muka.

  • Ia mengandungi komponen terbina dalam yang berkuasa dan mudah untuk disesuaikan.

  • Ia juga menawarkan penyesuaian berasaskan web.

  • Ia adalah sumber terbuka.

Kandungan pakej Bootstrap

  • Struktur asas: Bootstrap menyediakan pakej dengan sistem grid, gaya pautan, Asas struktur latar belakang. Ini akan diterangkan secara terperinci dalam bahagian Struktur Asas Bootstrap.

  • CSS: Bootstrap disertakan dengan ciri berikut: tetapan CSS global, mentakrifkan gaya elemen HTML asas, kelas boleh diperluas dan sistem grid lanjutan . Ini akan diterangkan secara terperinci dalam bahagian Bootstrap CSS.

  • Komponen: Bootstrap mengandungi lebih daripada sedozen komponen yang boleh diguna semula untuk mencipta imej, menu lungsur, navigasi, kotak amaran, kotak pop timbul dan banyak lagi. Ini akan diterangkan secara terperinci dalam bahagian Komponen Reka Letak.

  • Pemalam JavaScript: Bootstrap termasuk lebih daripada sedozen pemalam jQuery tersuai. Anda boleh memasukkan semua pemalam secara langsung atau memasukkannya secara individu. Ini akan diterangkan secara terperinci dalam bahagian Bootstrap Plugin.


  • Penyesuaian: Anda boleh menyesuaikan komponen Bootstrap, KURANG pembolehubah dan pemalam jQuery untuk mendapatkan versi anda sendiri.


Contoh Dalam Talian

Tutorial Bootstrap di tapak ini mengandungi ratusan contoh.

Anda boleh menggunakan editor dalam talian kami untuk mengedit kod dalam talian dan klik butang jalankan untuk melihat hasilnya.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3>        
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instances" untuk melihat instans dalam talian

Lagi Instans

Instances 

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>表格</h2>
      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>      
      <div class="table-responsive">          
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Name</th>
             <th>Street</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Anna Awesome</td>
             <td>Broome Street</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Debbie Dallas</td>
             <td>Houston Street</td>
           </tr>
           <tr>
             <td>3</td>
             <td>John Doe</td>
             <td>Madison Street</td>
           </tr>
         </tbody>
       </table>
      </div>

      <h2>图像</h2>
      <p>创建相应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>            
      <img src="cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> 
      
      <h2>图标</h2>
      <p>插入图标:</p>      
      <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>      
      <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>            
      <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
      <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>      
      <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>      
    </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Klik Butang "Cuba" untuk melihat cara ia berfungsi.