Tutorial Bootstrap

Twitter Bootstrap adalah kerangka akhir yang paling popular di masa lalu. Rangka kerja front-end mudah alih yang intuitif dan kuat untuk pembangunan web yang lebih cepat dan mudah. Ia menggunakan HTML, CSS dan Javascript. Tutorial ini akan mengajar anda asas-asas Rangka Kerja Bootstrap dengan menggunakan mana anda boleh membuat projek web dengan mudah. Tutorial dibahagikan kepada bahagian-bahagian seperti Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components dan Plugin Bootstrap. Setiap bahagian ini mengandungi topik yang berkaitan dengan contoh mudah dan berguna.

Kenapa Mempelajari Bootstrap?

  • Pendekatan pertama mudah alih - Bootstrap 3, rangka terdiri daripada gaya pertama Bergerak di seluruh perpustakaan dan bukannya dalam fail yang berasingan.

  • Sokongan Penyemak Imbas - Ia disokong oleh semua pelayar popular.

Pelayar Popular
  • Mudah dimulakan - Dengan hanya pengetahuan tentang HTML dan CSS sesiapa sahaja boleh bermula dengan Bootstrap. Juga laman rasmi Bootstrap mempunyai dokumentasi yang baik.

  • Reka bentuk responsif - CSS responsif Bootstrap menyesuaikan ke Desktop, Tablet dan Telefon. Lebih lanjut mengenai reka bentuk responsif adalah dalam Reka Bentuk Bootstrap Responsif bab .

Reka bentuk responsif
  • Menyediakan penyelesaian yang bersih dan seragam untuk membina antara muka untuk pemaju.

  • Ia mengandungi komponen terbina dalam yang indah dan berfungsi yang mudah disesuaikan.

  • Ia juga menyediakan penyesuaian berasaskan web.

  • Dan yang terbaik adalah sumber terbuka.

Hello World menggunakan Bootstrap.

Hanya untuk memberikan sedikit keseronokan tentang Bootstrap, saya akan memberi anda program Bootstrap Hello World konvensional yang kecil, Anda boleh cuba menggunakan pautan Demo.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[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]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Permohonan Bootstrap

  • Perancah - Bootstrap menyediakan struktur asas dengan Sistem Grid, gaya pautan, dan latar belakang. Ini dibincangkan secara terperinci dalam bahagian Bootstrap Basic Structure

  • CSS - Bootstrap dilengkapi dengan ciri tetapan CSS global, elemen HTML asas gaya dan dipertingkatkan dengan kelas extensible, dan sistem grid maju. Ini dibincangkan secara terperinci dalam bahagian Bootstrap dengan CSS .

  • Komponen - Bootstrap mengandungi lebih kurang sedozen komponen yang boleh digunakan semula untuk menyediakan ikonografi, dropdown, navigasi, isyarat, pop-overs, dan banyak lagi. Ini dibincangkan secara terperinci dalam bahagian Layout Components .

  • JavaScript Plugins - Bootstrap mengandungi lebih daripada selusin plugin jQuery adat. Anda boleh memasukkan mereka semua dengan mudah, atau satu demi satu. Ini diliputi butiran dalam bahagian Plugin Bootstrap .

  • Menyesuaikan - Anda boleh menyesuaikan komponen Bootstrap, pembolehubah LESS , dan plugin jQuery untuk mendapatkan versi anda sendiri.

Penonton

Tutorial ini telah disediakan untuk sesiapa sahaja yang mempunyai pengetahuan asas tentang HTML dan CSS dan mempunyai keinginan untuk membangunkan laman web. Setelah menyelesaikan tutorial ini, anda akan mendapati diri anda dalam tahap kepakaran yang sederhana dalam membangunkan projek web menggunakan Twitter Bootstrap.

Prasyarat

Sebelum anda mula meneruskan dengan tutorial ini, kami menganggap bahawa anda sudah mengetahui tentang asas-asas HTML dan CSS. Sekiranya anda tidak mengetahui konsep-konsep ini maka kami akan mencadangkan anda untuk mengikuti tutorial ringkas kami mengenai Tutorial HTML dan Tutorial CSS.