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 class="baris"> kelas = "baris" >
  <div class = "span6 kolom" > 
    ...
  </div>
  <div class = "span10 kolom" > 
    ...
  </div>
</div>

Tata letak tetap

Tata letak wadah dasar dengan lebar 940px dan terpusat untuk hampir semua situs atau halaman.

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

Tata letak cairan

Struktur halaman cair atau cair yang fleksibel dengan lebar minimum dan maksimum dan bilah sisi kiri. Bagus untuk aplikasi.

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

Judul dan salinan

Hirarki tipografi standar untuk menyusun halaman web Anda.

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 judul Memiliki sub-judul...

Anda juga dapat menambahkan subjudul dengan <strong>dan<em>

Lain-lain elemen

Menggunakan penekanan, alamat, & singkatan

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

Kapan harus menggunakan?

Penekanan tag ( <strong>dan <em>) harus digunakan untuk menambahkan perbedaan visual antara kata atau frase dan salinan sekitarnya. Gunakan <strong>untuk perhatian lama yang polos dan <em>untuk perhatian dan judul yang apik .

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.

Alamat

Elemen addresstersebut digunakan untuk—Anda dapat menebaknya!—alamat. Berikut tampilannya:

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

Catatan: Setiap baris dalam an addressharus diakhiri dengan jeda baris ( <br />) untuk menyusun konten dengan benar saat dibaca dalam kehidupan nyata tanpa menerapkan gaya apa pun.

Singkatan

Untuk singkatan dan akronim, gunakan abbrtag ( acronymsudah tidak digunakan lagi dalam HTML5 ). Letakkan formulir singkatan di dalam tag dan tetapkan judul untuk nama lengkapnya.

Blockquote

<blockquote> <p> <cite>

Pastikan untuk membungkus Anda blockquotedan paragraphtag cite. Saat mengutip sumber, gunakan citeelemen. CSS akan secara otomatis mengawali nama dengan tanda hubung em (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr Julius Hibbert

Tidak dipesan<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Cappresi
• Rekan Tim Saya
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Orang baru
• John Jacob
• Paul Pierce
• Kevin Garnett

Tanpa gaya<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Cappresi
• Rekan Tim Saya
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Orang baru
• John Jacob
• Paul Pierce
• Kevin Garnett

Dipesan<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Cappresi
5. Rekan Tim Saya
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Orang baru
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

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 theadsedemikian rupa sehingga hierarkinya thead> tr> th.

Mirip dengan tajuk kolom, semua konten isi tabel Anda harus dibungkus dengan a tbodysehingga 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

<table class="common-table"> class = "common-table" >
  ...
</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

<table class="common-table zebra-striped"> class = "meja umum 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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> ketik = "teks/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< jenis skrip = "teks/javascript" > 
  $ ( dokumen ). siap ( fungsi () { 
    $ ( "tabel#sortTableContoh" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</skrip>
<table class = "common-table zebra-striped" > 
  ...
</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 juga dapat diperiksa dan dimasukkan dalam hasil formulir

Simpan perubahan 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

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 muda, tetapi .primarykelas biru tersedia. 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 . inputBerikut 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 buttonelemen.

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

<ul class="tab"> kelas = "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"> 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="pagination"> 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 = "" > Selanjutnya → </a></li>  
  </ul>
</div>

Peringatan dasar

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

Blokir pesan

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.

Popover

Gunakan popover untuk memberikan informasi subtekstual ke halaman tanpa mempengaruhi 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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
< jenis skrip = "teks/javascript" src = "js/less-1.0.41.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 warna

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;            
// Dasar
@baseline : 20px ;          

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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    latar belakang - gambar : linier - gradien ( @startColor , @endColor ); // Standar  
  }
  . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikal - tiga - warna ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @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 ;   
 
// Sistem Grid
. wadah {
  lebar : @siteWidth ; 
  margin : 0 otomatis ;  
  . clearfix ();
}
. kolom ( @columnSpan : 1 ) {  
  tampilan : sebaris ; 
  mengapung : kiri ;
  lebar : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - kiri : @gridGutterWidth ; 
  &: pertama - anak {
    margin - kiri : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - kiri : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! penting ;          
}