Sejarah

Pada hari-hari awal Twitter, para insinyur menggunakan hampir semua perpustakaan yang mereka kenal untuk memenuhi persyaratan front-end. Bootstrap dimulai sebagai jawaban atas tantangan yang dihadirkan dan pengembangan yang dipercepat dengan cepat selama Hackweek pertama Twitter.

Dengan bantuan dan umpan balik dari banyak insinyur di Twitter, Bootstrap telah berkembang secara signifikan untuk mencakup tidak hanya gaya dasar, tetapi juga pola desain front-end yang lebih elegan dan tahan lama.

Baca selengkapnya di dev.twitter.com

Dukungan peramban

Bootstrap diuji dan didukung di browser modern utama seperti Chrome, Safari, Internet Explorer, dan Firefox.

• Safari Terbaru
• Google Chrome Terbaru
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Apa yang termasuk?

Bootstrap dilengkapi dengan CSS yang dikompilasi, tidak dikompilasi, dan template contoh.

• Semua file .less asli
• CSS yang dikompilasi dan diperkecil sepenuhnya
• Dokumentasi panduan gaya lengkap
• Contoh halaman template (lebih banyak lagi akan segera hadir)

jaringan default

Sistem grid default yang disediakan sebagai bagian dari Bootstrap adalah grid 16 kolom dengan lebar 940px. Ini adalah rasa dari sistem grid 960 yang populer, tetapi tanpa margin/padding tambahan di sisi kiri dan kanan.

Contoh markup kisi

Seperti yang ditunjukkan di sini, tata letak dasar dapat dibuat dengan dua "kolom", masing-masing mencakup sejumlah 16 kolom dasar yang kami definisikan sebagai bagian dari sistem grid kami. Lihat contoh di bawah untuk lebih banyak variasi.

<div kelas = "baris" > 
  <div class = "span6 kolom" > 
    ...
  </div>
  <div class = "span10 kolom" > 
    ...
  </div>
</div>

Tata letak tetap

Default dan sederhana, lebar 940px, tata letak terpusat untuk hampir semua situs web atau halaman yang disediakan oleh satu file <div.container>.

<tubuh>
  <div class = "wadah" > 
    ...
  </div>
</tubuh>

Tata letak cairan

Sebuah alternatif, struktur halaman fleksibel fleksibel dengan min dan max-lebar dan sidebar kiri. Bagus untuk aplikasi dan dokumen.

<tubuh>
  <div class = "container-fluid" > 
    <div class = "bilah sisi" > 
      ...
    </div>
    <div class = "konten" > 
      ...
    </div>
  </div>
</tubuh>

Judul & salinan

Hirarki tipografi standar untuk menyusun halaman web Anda.

Seluruh grid tipografi didasarkan pada dua variabel Less di file preboot.less kami: @basefontdan @baseline. Yang pertama adalah ukuran font dasar yang digunakan di seluruh dan yang kedua adalah tinggi garis dasar.

Kami menggunakan variabel tersebut, dan beberapa matematika, untuk membuat margin, padding, dan tinggi garis dari semua jenis kami dan banyak lagi.

h1. Pos 1

h2. Pos 2

h3. Pos 3

h4. Pos 4

h5. Pos 5

h6. Pos 6

Contoh paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Contoh heading Memiliki sub-heading…

Lain-lain elemen

Menggunakan penekanan, alamat, & singkatan

<strong> <em> <address> <abbr>

Kapan harus menggunakan?

Penekanan tag ( <strong>dan <em>) harus digunakan untuk menunjukkan kepentingan tambahan atau penekanan kata atau frase relatif terhadap salinan sekitarnya. Gunakan <strong>untuk kepentingan dan <em>untuk penekanan stres .

Penekanan dalam sebuah paragraf

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, seorang pharetra augue.

Catatan: Penggunaan <b>dan <i>tag dalam HTML5 masih boleh dan tidak harus diberi gaya bold dan italic, masing-masing (walaupun jika ada elemen yang lebih semantik, gunakan itu). <b>dimaksudkan untuk menyoroti kata atau frasa tanpa menyampaikan kepentingan tambahan, sementara <i>sebagian besar untuk suara, istilah teknis, dll.

Alamat

Elemen <address>tersebut digunakan untuk informasi kontak untuk leluhur terdekatnya, atau seluruh badan karya. Berikut tampilannya:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Catatan: Setiap baris dalam an <address>harus diakhiri dengan jeda baris ( <br />) atau dibungkus dengan tag level blok (misalnya, <p>) untuk menyusun konten dengan benar.

Singkatan

Untuk singkatan dan akronim, gunakan <abbr>tag ( <acronym>sudah tidak digunakan lagi dalam HTML5 ). Letakkan formulir singkatan di dalam tag dan tetapkan judul untuk nama lengkapnya.

Blockquote

<blockquote> <p> <small>

Cara mengutip

<blockquote>Untuk menyertakan blockquote , bungkus <p>dan <small>beri tag. Gunakan <small>elemen untuk mengutip sumber Anda dan Anda akan mendapatkan tanda hubung em —sebelum itu.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

Tidak dipesan<ul>

• Lorem ipsum dolor sit amet
• Conectetur adipiscing elit
• Integer molestie lorem di massa
• Facilisis di pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Bisul purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Dapatkan porttitor lorem

Tanpa gaya<ul.unstyled>

• Lorem ipsum dolor sit amet
• Conectetur adipiscing elit
• Integer molestie lorem di massa
• Facilisis di pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Bisul purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Dapatkan porttitor lorem

Dipesan<ol>

1. Lorem ipsum dolor sit amet
2. Conectetur adipiscing elit
3. Integer molestie lorem di massa
4. Facilisis di pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Dapatkan porttitor lorem

Keterangandl

Daftar deskripsi

Daftar deskripsi sangat cocok untuk mendefinisikan istilah.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida di eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Meja bangunan

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tabel sangat bagus—untuk banyak hal. Tabel yang bagus, bagaimanapun, membutuhkan sedikit cinta markup agar berguna, dapat diskalakan, dan dapat dibaca (pada level kode). Berikut adalah beberapa tips untuk membantu.

Selalu bungkus tajuk kolom Anda <thead>sedemikian rupa sehingga hierarkinya <thead>> <tr>> <th>.

Mirip dengan tajuk kolom, semua konten isi tabel Anda harus dibungkus dengan a <tbody>sehingga hierarki Anda adalah <tbody>> <tr>> <td>.

Contoh: Gaya tabel default

Semua tabel akan ditata secara otomatis hanya dengan batas penting untuk memastikan keterbacaan dan mempertahankan struktur. Tidak perlu menambahkan kelas atau atribut tambahan.

#	Nama depan	Nama keluarga	Bahasa
1	Beberapa	Satu	Bahasa inggris
2	joe	Sixpack	Bahasa inggris
3	Stu	Lekuk	Kode

<tabel>
  ...
</tabel>

Contoh: Zebra bergaris

Dapatkan sedikit kemewahan dengan tabel Anda dengan menambahkan zebra-striping—cukup tambahkan .zebra-stripedkelasnya.

#	Nama depan	Nama keluarga	Bahasa
1	Beberapa	Satu	Bahasa inggris
2	joe	Sixpack	Bahasa inggris
3	Stu	Lekuk	Kode

Catatan: Zebra-striping adalah peningkatan progresif yang tidak tersedia untuk browser lama seperti IE8 dan di bawahnya.

<table class = "bergaris zebra" > 
...
</tabel>

Contoh: Bergaris zebra dengan TableSorter.js

Mengambil contoh sebelumnya, kami meningkatkan kegunaan tabel kami dengan menyediakan fungsionalitas pengurutan melalui jQuery dan plugin Tablesorter . Klik tajuk kolom mana pun untuk mengubah pengurutan.

#	Nama depan	Nama keluarga	Bahasa
1	Milikmu	Satu	Bahasa inggris
2	joe	Sixpack	Bahasa inggris
3	Stu	Lekuk	Kode

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skrip > 
  $ ( fungsi () { 
    $ ( "tabel#sortTableContoh" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</skrip>
<table class = "bergaris zebra" > 
  ...
</tabel>

Gaya default

Semua formulir diberikan gaya default untuk menyajikannya dengan cara yang dapat dibaca dan terukur. Gaya disediakan untuk input teks, daftar pilihan, area teks, tombol radio dan kotak centang, dan tombol.

Contoh bentuk legenda

Masukan X-Besar

Pilih

1 2 3 4 5

Pilih

1 2 3 4 5

Masukan Tidak Dapat Diedit

Beberapa Nilai Di Sini

Masukan Dinonaktifkan

Masukan X-Besar

Cuplikan kecil teks bantuan

Contoh bentuk legenda

Teks Awal

@

Kotak Centang yang Ditampilkan

Kotak Centang Terlampir

Masukan Berkas

Contoh bentuk legenda

Daftar Pilihan

• Opsi satu adalah ini dan itu—pastikan untuk menyertakan mengapa itu hebat
• Opsi dua juga dapat diperiksa dan dimasukkan dalam hasil formulir
• Opsi tiga bisa — ya, Anda dapat menebaknya — juga diperiksa dan dimasukkan dalam hasil formulir
• Opsi empat tidak dapat diperiksa karena dinonaktifkan.

Catatan: Label mengelilingi semua opsi untuk area klik yang jauh lebih besar dan formulir yang lebih bermanfaat.

Rentang Tanggal

ke Semua waktu ditampilkan sebagai Waktu Standar Pasifik (GMT -8:00).

Area teks

Blok teks bantuan untuk menggambarkan bidang di atas jika perlu.

Daftar Pilihan

• Opsi satu adalah ini dan itu—pastikan untuk menyertakan mengapa itu hebat
• Opsi dua kaleng adalah sesuatu yang lain dan memilihnya akan membatalkan pilihan opsi 1

  Membatalkan

Formulir bertumpuk

Tambahkan .form-stackedke HTML formulir Anda dan Anda akan memiliki label di atas bidangnya alih-alih di sebelah kirinya. Ini berfungsi dengan baik jika formulir Anda pendek atau Anda memiliki dua kolom input untuk formulir yang lebih berat.

Contoh bentuk legenda

Masukan X-Besar

Pilih

1 2 3 4 5

Contoh bentuk legenda

Masukan X-Besar

Cuplikan kecil teks bantuan

Daftar Pilihan

• Opsi satu adalah ini dan itu—pastikan untuk menyertakan mengapa itu hebat
• Opsi dua juga dapat diperiksa dan dimasukkan dalam hasil formulir

Catatan: Label mengelilingi semua opsi untuk area klik yang jauh lebih besar dan formulir yang lebih bermanfaat.

Simpan perubahan  Membatalkan

Tombol

Sebagai konvensi, tombol digunakan untuk tindakan sementara tautan digunakan untuk objek. Misalnya, "Unduh" dapat berupa tombol dan "aktivitas terkini" dapat berupa tautan.

Semua tombol default ke gaya abu-abu terang, tetapi sejumlah kelas fungsional dapat diterapkan untuk gaya warna yang berbeda. Kelas-kelas ini termasuk kelas biru .primary, kelas biru muda .info, kelas hijau .success, dan kelas merah .danger. Plus, menggulirkan gaya Anda sendiri sangat mudah.

Contoh tombol

Gaya tombol dapat diterapkan ke apa saja dengan .btnditerapkan. Biasanya Anda ingin menerapkan ini hanya pada elemen <a>, <button>, dan pilih . <input>Berikut tampilannya:

Ukuran alternatif

Ingin tombol yang lebih besar atau lebih kecil? Memiliki itu!

Status dinonaktifkan

Untuk tombol yang tidak aktif atau dinonaktifkan oleh aplikasi karena satu dan lain alasan, gunakan status dinonaktifkan. Itu .disableduntuk tautan dan :disableduntuk <button>elemen.

Tautan

Tombol

Apa itu

Bilah atas kami adalah bilah tetap yang menampung logo atau nama situs web, navigasi utama, dan formulir pencarian.

Dapat disesuaikan

Semua elemen di dalam, dan juga seluruh bilah atas, adalah opsional. Anda dapat memilih untuk menyertakan logo/nama, navigasi, pencarian, dan navigasi sekunder—atau kombinasi apa pun dari itu.

Dropdown termasuk

Sebagai bagian dari navigasi utama, kami telah menyertakan kemampuan bagi Anda untuk menambahkan dropdown ke nav Anda. Lihat navigasi sekunder di atas (rata kanan) untuk melihat cara melakukannya.

Tab dan pil

Buat navigasi sekunder sederhana dengan file <ul>. Tukar antar tab atau pil dengan menambahkan kelas yang sesuai.

Bagus untuk sub-bagian konten seperti halaman pengaturan akun kami dan garis waktu pengguna untuk beralih di antara halaman konten serupa. Tersedia dalam gaya tab atau pil.

• Rumah
• Profil
• Pesan
• Pengaturan
• Kontak
• tarik-turun
  • Tautan sekunder
  • Sesuatu yang lain di sini
  • tautan lain

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#" > Beranda </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Pesan </a></li> 
  <li><a href = "#" > Setelan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

• Rumah
• Profil
• Pesan
• Pengaturan
• Kontak

<ul class = "pil" > 
  <li class = "aktif" ><a href = "#" > Beranda </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Pesan </a></li> 
  <li><a href = "#" > Setelan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

paginasi

Pagination yang sangat sederhana dan bergaya minimal terinspirasi oleh Rdio. Blok besar sulit untuk dilewatkan, mudah diskalakan, dan menyediakan area klik yang besar.

<div class = "paginasi" > 
  <ul>
    <li class = "sebelumnya dinonaktifkan" ><a href = "#" > ← Sebelumnya </a></li>  
    <li class = "aktif" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "berikutnya" ><a href = "#" > Berikutnya → </a></li>  
  </ul>
</div>

Peringatan dasar

div.alert-message

Pesan satu baris untuk menyoroti kegagalan, kemungkinan kegagalan, atau keberhasilan suatu tindakan. Sangat berguna untuk formulir.

Blokir pesan

div.alert-message.block-message

Untuk pesan yang memerlukan sedikit penjelasan, kami memiliki peringatan gaya paragraf. Ini sempurna untuk memunculkan pesan kesalahan yang lebih panjang, memperingatkan pengguna tentang tindakan yang tertunda, atau hanya menyajikan informasi untuk lebih menekankan pada halaman.

Modal

Modals—dialog atau lightbox—sangat bagus untuk tindakan kontekstual dalam situasi di mana konteks latar belakang harus dipertahankan.

Kiat Alat

Twipsi sangat berguna untuk membantu pengguna yang bingung dan mengarahkan mereka ke arah yang benar.

Popover

Gunakan popover untuk memberikan informasi subtekstual ke halaman tanpa memengaruhi tata letak.

Bootstrap dibuat dengan Preboot , paket mixin dan variabel sumber terbuka untuk digunakan bersama dengan Less , praprosesor CSS untuk pengembangan web yang lebih cepat dan lebih mudah.

Lihat bagaimana kami menggunakan Preboot di Bootstrap dan bagaimana Anda dapat menggunakannya jika Anda memilih untuk menjalankan Less pada proyek Anda berikutnya.

Bagaimana cara menggunakannya

Gunakan opsi ini untuk memanfaatkan sepenuhnya variabel Less, mixin, dan nesting Bootstrap di CSS melalui javascript di browser Anda.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Tidak merasakan solusi .js? Coba aplikasi Less Mac atau gunakan Node.js untuk mengompilasi saat Anda menerapkan kode.

Apa yang termasuk?

Berikut adalah beberapa highlights dari apa yang termasuk dalam Bootstrap Twitter sebagai bagian dari Bootstrap. Buka situs web Bootstrap atau halaman proyek Github untuk mengunduh dan mempelajari lebih lanjut.

Variabel

Variabel di Kurang sempurna untuk memelihara dan memperbarui CSS Anda tanpa sakit kepala. Saat Anda ingin mengubah nilai warna atau nilai yang sering digunakan, perbarui di satu tempat dan Anda sudah siap.

// Tautan
@linkWarna : #8b59c2;         
@linkColorHover :     menggelapkan ( @linkColor , 10 ); 
 
// abu-abu
@hitam : #000;             
@grayDark :           mencerahkan ( @hitam , 25 %); 
@ abu -abu :               mencerahkan ( @hitam , 50 %); 
@grayLight :          mencerahkan ( @hitam , 70 %); 
@grayLighter :        mencerahkan ( @hitam , 90 %); 
@putih : #fff ;             
 
// Warna Aksen
@biru : #08b5fb;              
@hijau : #46a546;             
@merah : #9d261d;               
@kuning : #ffc40d;            
@oranye : #f89406;            
@merah muda : #c3325f;              
@ungu : #7a43b6;            
 
// Kisi dasar
@basefont : 13px ;          
@baseline : 18px ;          

Mengomentari

Less juga menyediakan gaya komentar lain selain /* ... */sintaks normal CSS.

// Ini adalah komentar
/* Ini juga komentar */

Campurkan wazoo

Mixin pada dasarnya termasuk atau sebagian untuk CSS, memungkinkan Anda untuk menggabungkan blok kode menjadi satu. Mereka bagus untuk properti awalan vendor seperti box-shadow, gradien lintas-browser, tumpukan font, dan banyak lagi. Di bawah ini adalah contoh mixin yang disertakan dengan Bootstrap.

Tumpukan font

#font {
  . singkatan ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - ukuran : @size ; 
    font - berat : @ berat ; 
    garis - tinggi : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - ukuran : @size ; 
    font - berat : @ berat ; 
    garis - tinggi : @lineHeight ; 
  }
  . serif ( @berat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - ukuran : @size ; 
    font - berat : @ berat ; 
    garis - tinggi : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - ukuran : @size ; 
    font - berat : @ berat ; 
    garis - tinggi : @lineHeight ; 
  }
}

Gradien

#gradien {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    latar belakang - warna : @endColor ; 
    latar belakang - ulangi : ulangi - x ;
    latar belakang - gambar : - khtml - gradien ( linier , kiri atas , kanan atas , dari ( @startColor ), ke ( @endColor )); // penakluk   
    latar belakang - gambar : - moz - linier - gradien ( kiri , @startColor , @endColor ); // FF 3.6+    
    latar belakang - gambar : - ms - linier - gradien ( kiri , @startColor , @endColor ); // IE10    
    background - gambar : - webkit - gradien ( linier , kiri atas , kanan atas , warna - stop ( 0 %, @startColor ), warna - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - gambar : - webkit - linear - gradien ( kiri , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - gambar : - o - linear - gradient ( kiri , @startColor , @endColor ); //Opera 11.10    
    latar belakang - gambar : linier - gradien ( kiri , @startColor , @endColor ); // standar   
  }
  . vertikal ( @startColor : #555, @endColor: #333) { 
    latar belakang - warna : @endColor ; 
    latar belakang - ulangi : ulangi - x ;
    background - gambar : - khtml - gradien ( linear , kiri atas , kiri bawah , dari ( @startColor ), ke ( @endColor )); // penakluk   
    latar belakang - gambar : - moz - linier - gradien ( @startColor , @endColor ); // FF 3.6+   
    latar belakang - gambar : - ms - linier - gradien ( @startColor , @endColor ); // IE10   
    background - gambar : - webkit - gradien ( linear , kiri atas , kiri bawah , warna - stop ( 0 %, @startColor ), warna - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    latar belakang - gambar : - webkit - linier - gradien ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    latar belakang - gambar : - o - linier - gradien ( @startColor , @endColor ); //Opera 11.10   
    latar belakang - gambar : linier - gradien ( @startColor , @endColor ); // Standar  
  }
  . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikal - tiga - warna ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operasi dan sistem grid

Jadilah mewah dan lakukan beberapa matematika untuk menghasilkan mixin yang fleksibel dan kuat seperti di bawah ini.

//Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sistem Grid
. wadah {
  lebar : @siteWidth ; 
  margin : 0 otomatis ;  
  . clearfix ();
}
. kolom ( @columnSpan : 1 ) {  
  lebar : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  margin - kiri : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}