Tutorial Bootstrap

Twitter Bootstrap adalah kerangka kerja ujung depan paling populer saat ini. Ini adalah kerangka kerja front-end seluler pertama yang ramping, intuitif, dan kuat untuk pengembangan web yang lebih cepat dan lebih mudah. Ini menggunakan HTML, CSS dan Javascript. Tutorial ini akan mengajarkan Anda dasar-dasar Bootstrap Framework yang dapat digunakan untuk membuat proyek web dengan mudah. Tutorial dibagi menjadi beberapa bagian seperti Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components dan Bootstrap Plugins. Setiap bagian ini berisi topik terkait dengan contoh sederhana dan berguna.

Mengapa Belajar Bootstrap?

Mobile first approach - Bootstrap 3, kerangka kerja terdiri dari gaya pertama Seluler di seluruh pustaka, bukan dalam file terpisah.
Browser Support - Ini didukung oleh semua browser populer.

Easy to get started- Hanya dengan pengetahuan tentang HTML dan CSS, siapa pun dapat memulai dengan Bootstrap. Juga situs resmi Bootstrap memiliki dokumentasi yang bagus.
Responsive design- CSS responsif Bootstrap menyesuaikan dengan Desktops, Tablets and Mobile. Lebih lanjut tentang desain responsif ada di bab Desain Responsif Bootstrap.

Memberikan solusi yang bersih dan seragam untuk membangun antarmuka bagi pengembang.
Ini berisi komponen built-in yang indah dan fungsional yang mudah disesuaikan.
Ini juga menyediakan kustomisasi berbasis web.
Dan yang terbaik dari semuanya itu adalah open source.

Hello World menggunakan Bootstrap.

Sekadar memberi sedikit keseruan tentang Bootstrap, saya akan memberikan sebuah program kecil Bootstrap Hello World konvensional, Anda dapat mencobanya menggunakan link 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>

Aplikasi Bootstrap

Scaffolding- Bootstrap menyediakan struktur dasar dengan Sistem Grid, gaya tautan, dan latar belakang. Ini dibahas secara rinci di bagianBootstrap Basic Structure
CSS- Bootstrap hadir dengan fitur pengaturan CSS global, elemen HTML dasar yang ditata dan ditingkatkan dengan kelas yang dapat diperluas, dan sistem kisi tingkat lanjut. Ini dibahas secara rinci di bagianBootstrap with CSS.
Components- Bootstrap berisi lebih dari selusin komponen yang dapat digunakan kembali yang dibuat untuk menyediakan ikonografi, dropdown, navigasi, peringatan, pop-over, dan banyak lagi. Ini dibahas secara rinci di bagianLayout Components.
JavaScript Plugins- Bootstrap berisi lebih dari selusin plugin jQuery kustom. Anda dapat dengan mudah memasukkan semuanya, atau satu per satu. Ini dibahas secara rinci di bagianBootstrap Plugins.
Customize - Anda dapat menyesuaikan komponen Bootstrap, variabel LESS, dan plugin jQuery untuk mendapatkan versi Anda sendiri.

Hadirin

Tutorial ini disiapkan untuk siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dan ingin mengembangkan situs web. Setelah menyelesaikan tutorial ini, Anda akan mendapati diri Anda memiliki tingkat keahlian sedang dalam mengembangkan proyek web menggunakan Twitter Bootstrap.

Prasyarat

Sebelum Anda mulai melanjutkan dengan tutorial ini, kami berasumsi bahwa Anda sudah mengetahui dasar-dasar HTML dan CSS. Jika Anda tidak terlalu memahami konsep-konsep ini maka kami akan menyarankan Anda untuk membaca tutorial singkat kami tentang Tutorial HTML dan Tutorial CSS.