Contoh mulai cepat

Butuh beberapa template cepat? Lihat contoh-contoh dasar yang telah kami kumpulkan:

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

Kolom bersarang

Sarang konten Anda jika perlu dengan membuat .rowdi dalam kolom yang ada.

Contoh kolom bersarang

<div kelas = "baris" > 
  <div kelas = "span12" > 
    Level 1 kolom
    <div kelas = "baris" > 
      <div kelas = "span6" > 
        Level 2
      </div>
      <div kelas = "span6" > 
        Level 2
      </div>
    </div>
  </div>
</div>

Gulung kisi Anda sendiri

Dibangun ke dalam Bootstrap adalah beberapa variabel untuk menyesuaikan sistem grid 940px default. Dengan sedikit penyesuaian, Anda dapat mengubah ukuran kolom, talangnya, dan wadah tempat mereka berada.

Di dalam jaringan

Variabel yang diperlukan untuk memodifikasi sistem grid saat ini semuanya berada di variables.less.

Sekarang untuk menyesuaikan

Memodifikasi grid berarti mengubah tiga @grid-*variabel dan mengkompilasi ulang file Less.

Bootstrap dilengkapi untuk menangani sistem grid hingga 24 kolom; defaultnya hanya 16. Beginilah tampilan variabel grid Anda yang disesuaikan dengan grid 24 kolom.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Setelah dikompilasi ulang, Anda akan siap!

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 kisi tipografi didasarkan pada dua variabel Less dalam file variable.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 adalah dua contoh bagaimana itu dapat digunakan:

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <kecil> Dr. Julius Hibbert </small>
</blockquote>

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.

Kode

<code> <pre>

Pimp kode Anda dalam gaya dengan dua tag sederhana. Untuk kehebatan yang lebih hebat lagi melalui javascript, masukkan pustaka kode Google dan Anda siap.

Menyajikan kode

Kode, blok atau hanya cuplikan sebaris, dapat ditampilkan dengan gaya hanya dengan membungkus tag yang tepat. Untuk blok kode yang mencakup beberapa baris, gunakan <pre>elemen. Untuk kode sebaris, gunakan <code>elemen.

<div>
  <h1>Judul</h1>
  <p>Sesuatu di sini...</p>
</div>

<div> <h1> Judul </h1> <p> Sesuatu di sini... </p> </div>
  
  

Label sebaris

<span class="label">

Perhatikan atau tandai frasa apa pun dalam teks isi Anda.

Beri label apa saja

Pernah membutuhkan salah satu dari New yang mewah! atau Bendera penting saat menulis kode? Nah, sekarang Anda memilikinya. Inilah yang disertakan secara default:

Jaringan media

Tampilkan thumbnail dengan berbagai ukuran pada halaman dengan jejak HTML rendah dan gaya minimal.

Contoh thumbnail

Thumbnail dalam .media-gridukuran apa pun, tetapi berfungsi paling baik saat dipetakan langsung ke sistem grid Bootstrap bawaan. Lebar gambar seperti 90, 210, dan 330 digabungkan dengan beberapa piksel padding untuk menyamai ukuran .span2, .span4, dan .span6kolom.

Besar

Sedang

Kecil

Mengkodekan mereka

Kisi-kisi media mudah digunakan dan agak sederhana di sisi markup. Dimensinya murni berdasarkan ukuran gambar yang disertakan.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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.

<tabel>
  ...
</tabel>

Contoh: Tabel kental

Untuk tabel yang membutuhkan lebih banyak data di ruang yang lebih sempit, gunakan rasa kental yang memotong padding menjadi dua. Ini juga dapat digunakan bersama dengan batas dan garis-garis zebra, seperti gaya tabel default.

Contoh: Tabel berbatas

Jadikan meja Anda terlihat sedikit lebih ramping dengan membulatkan sudutnya dan menambahkan batas di semua sisi.

< kelas tabel = "tabel-berbatasan" > 
  ...
</tabel>

Contoh: Zebra bergaris

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

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.

<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.

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.

Ukuran bidang formulir

Sesuaikan bentuk input, select, atau textarealebar apa pun dengan menambahkan hanya beberapa kelas ke markup Anda.

Mulai v1.3.0, kami telah menambahkan kelas ukuran berbasis kisi untuk elemen formulir. Silakan gunakan ini di atas kelas .mini, .small, dll yang ada.

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.

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. liTag dropdown juga mendukung .activeuntuk menampilkan pilihan halaman saat ini.

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.

Contoh tab dasar

Tab dapat digunakan sebagai navigasi biasa (memuat halaman eksternal di tab yang sama) atau sebagai area konten yang dapat ditabulasi untuk menukar panel konten. Kami memiliki plugin tab yang dapat digunakan untuk mengintegrasikan yang terakhir.

• 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>

Contoh pil dasar

• 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>

Tepung roti

Navigasi breadcrumb digunakan sebagai cara untuk menunjukkan kepada pengguna di mana mereka berada dalam aplikasi atau situs, tetapi tidak untuk navigasi utama.

• Rumah

• Beranda /
• Halaman tengah

• Beranda /
• Halaman tengah /
• Yang lainnya

• Beranda /
• Halaman tengah /
• Satu lagi /
• Kamu di sini

<ul class = "remah roti" > 
  <li><a href = "#" > Beranda </a> <span class = "pembagi" > / </span></li>   
  <li><a href = "#" > Halaman tengah </a> <span class = "pembagi" > / </span></li>   
  <li><a href = "#" > Satu lagi </a> <span class = "pembagi" > / </span></li>   
  <li class = "aktif" > Anda di sini </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

.alert-message

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

Dapatkan javascriptnya »

Contoh kode

<div class = "peringatan pesan-peringatan" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole suci! </strong> Sebaiknya periksa sendiri, Anda tidak terlihat terlalu baik. </p>
</div>

Blokir pesan

.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.

Dapatkan javascriptnya »

Contoh kode

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole suci! Ini adalah peringatan! </strong> Sebaiknya periksa sendiri, Anda tidak terlihat terlalu baik. Nulla vitae elit libero, seorang pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "peringatan-tindakan" > 
    <a class = "btn small" href = "#" > Lakukan tindakan ini </a> <a class = "btn small" href = "#" > Atau lakukan ini </a>     
  </div>
</div>

Modal

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

Dapatkan javascriptnya »

Keterangan alat

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

Dapatkan javascriptnya »

Popover

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

Dapatkan javascriptnya »

Mulai

Mengintegrasikan javascript dengan perpustakaan Bootstrap sangat mudah. Di bawah ini kami membahas dasar-dasarnya dan memberi Anda beberapa plugin yang luar biasa untuk membantu Anda memulai!

Lihat dokumen javascript »

Apa yang termasuk?

Hidupkan beberapa komponen utama Bootstrap dengan plugin kustom baru yang bekerja dengan jQuery dan Ender . Kami mendorong Anda untuk memperluas dan memodifikasinya agar sesuai dengan kebutuhan pengembangan spesifik Anda.

Apakah javascript diperlukan?

Tidak! Bootstrap dirancang pertama dan terutama untuk menjadi pustaka CSS. Javascript ini menyediakan lapisan interaktif dasar di atas gaya yang disertakan.

Namun, bagi mereka yang memang membutuhkan javascript, kami telah menyediakan plugin di atas untuk membantu Anda memahami cara mengintegrasikan Bootstrap dengan javascript dan memberi Anda opsi cepat dan ringan untuk fungsionalitas dasar segera.

Untuk informasi lebih lanjut dan untuk melihat beberapa demo langsung, silakan merujuk ke halaman dokumentasi plugin kami .