Upgrade ke Bootstrap 2

Pelajari tentang perubahan dan penambahan signifikan sejak v1.4 dengan panduan praktis ini.

Dokumen: pembaruan besar di seluruh papan untuk struktur umum, contoh, dan cuplikan kode. Juga dibuat responsif dengan pertanyaan media baru.
Dokumen: semua halaman dokumen sekarang didukung oleh template Kumis dan string dibungkus dengan tag i18n untuk diterjemahkan oleh Pusat Terjemahan Twitter. Semua perubahan dokumentasi harus dilakukan di sini dan kemudian dikompilasi (mirip dengan CSS dan KURANG kami).
Struktur direktori repo: menghapus CSS yang dikompilasi dari root demi tautan unduhan langsung yang besar di beranda dokumen. CSS yang dikompilasi ada di /docs/assets/css/.
Dokumen dan repo: satu makefile, cukup ketik makedi Terminal dan dapatkan dokumen dan CSS yang diperbarui.

Sistem jaringan

Sistem grid yang diperbarui, sekarang hanya 12 kolom, bukan 16
Pendekatan responsif berarti proyek Anda benar-benar bekerja di luar kotak di ponsel cerdas, tablet, dan lainnya
Menghapus dukungan kolom kisi yang tidak digunakan (secara default) untuk 17-24 kolom

Responsif (kueri media)

Kueri media ditambahkan untuk dukungan dasar di seluruh perangkat seluler dan tablet
CSS responsif dikompilasi secara terpisah, sebagai bootstrap-responsive.css

Tipografi

h4elemen dijatuhkan dari 16px menjadi 14px dengan default line-height18px
h5elemen dijatuhkan dari 14px menjadi 12px
h6elemen dijatuhkan dari 13px menjadi 11px
Opsi rata kanan untuk blockquotes jikafloat: right;

Kode

Gaya grafis baru untuk<code>
Gaya Google Code Prettify diperbarui (berdasarkan inti GitHub)

Tabel

Dukungan yang ditingkatkan untuk colspandanrowspan
Gaya sekarang terbatas pada kelas dasar baru,.table
Kelas tabel distandarisasi dengan .table-yang diperlukan sebagai awalan
Menghapus opsi warna tabel yang tidak digunakan (terlalu banyak kode untuk dampak kecil seperti itu)
Menjatuhkan dukungan untuk TableSorter

Tombol

Kelas baru untuk warna dan ukuran, semuanya diawali dengan.btn-
IE9: menghapus gradien dan menambahkan sudut membulat
Status aktif yang diperbarui untuk membuat penataan gaya lebih jelas dalam grup tombol (baru) dan terlihat lebih baik dengan transisi khusus
Mixin baru, .buttonBackground, untuk mengatur gradien tombol
Kelas .secondarytelah dihapus dari contoh modal di dokumen kami karena tidak pernah memiliki gaya terkait.

Formulir

Gaya formulir default sekarang vertikal (ditumpuk) untuk menggunakan lebih sedikit CSS dan menambahkan fleksibilitas yang lebih besar
Kelas formulir distandarisasi dengan .form-wajib sebagai awalan
Default formulir bawaan baru untuk formulir pencarian, sebaris, dan horizontal
Untuk bentuk horizontal, kelas sebelumnya .clearfixdan .inputsetara dengan yang baru .control-groupdan .controls.
Markup bentuk horizontal yang lebih fleksibel dengan kelas untuk semua gaya, termasuk kelas opsional baru untuklabel
Status formulir: warna diperbarui dan dapat disesuaikan melalui variabel KURANG baru

Ikon, oleh Glyphicons

Set ikon Glyphicons Halflings baru ditambahkan dalam bentuk sprite, dalam warna hitam dan putih
Markup sederhana diperlukan untuk ikon dalam banyak konteks:<i class="icon-cog"></>
Tambahkan kelas lain, .icon-white, untuk variasi putih dari ikon yang sama

Grup tombol dan tarik-turun

Dua komponen baru di 2.0: grup tombol dan dropdown tombol
Ketergantungan: dropdown tombol dibangun di atas grup tombol, dan karenanya memerlukan semua gayanya
Grup tombol, .btn-group, dapat dikelompokkan satu tingkat lebih tinggi dengan bilah alat tombol,.btn-toolbar

Navigasi

Tab dan pil sekarang memerlukan penggunaan kelas dasar baru, .nav, pada mereka <ul>dan nama kelas sekarang .nav-pillsdan .nav-tabs.
Variasi daftar nav baru ditambahkan yang menggunakan kelas dasar yang sama,.nav
Tab dan pil vertikal telah ditambahkan—cukup tambahkan .nav-stackedke<ul>
Pil dibenahi menjadi kurang bulat secara default
Pil sekarang memiliki dukungan menu tarik-turun (mereka berbagi markup dan gaya yang sama dengan tab)

Navbar (sebelumnya topbar)

Kelas dasar berubah dari .topbarmenjadi.navbar
Sekarang mendukung posisi statis (perilaku default, tidak diperbaiki) dan diperbaiki ke bagian atas viewport melalui .navbar-fixed-top(sebelumnya hanya didukung tetap)
Menambahkan pembagi vertikal ke navigasi tingkat atas
Dukungan yang ditingkatkan untuk formulir sebaris di bilah navigasi, yang sekarang memerlukan .navbar-formcakupan gaya yang tepat hanya ke formulir yang dimaksud.
Formulir pencarian Navbar sekarang membutuhkan penggunaan .navbar-searchkelas dan inputnya menggunakan .search-query. Untuk memposisikan formulir pencarian, Anda harus menggunakan .pull-leftatau .pull-right.
Menambahkan markup responsif opsional untuk menciutkan konten navbar untuk resolusi dan perangkat yang lebih kecil. Lihat dokumen navbar untuk cara menggunakannya.

Menu tarik-turun

Diperbarui .dropdown-menuuntuk mengencangkan jarak
Sekarang mengharuskan Anda menambahkan a <span class="caret"></span>untuk menampilkan panah tarik-turun
Sekarang mengharuskan Anda untuk menambahkan data-toggle="dropdown"atribut untuk mendapatkan perilaku beralih
Navbar (topbar tetap) memiliki dropdown baru. Lewatlah versi gelap dan sebagai gantinya adalah yang putih standar dengan tanda sisipan tambahan di bagian atasnya untuk kejelasan posisi.

Label

Warna label diperbarui agar sesuai dengan warna status formulir
Tidak hanya cocok secara grafis, tetapi juga didukung oleh variabel baru yang sama

Gambar kecil

Sebelumnya .media-grid, sekarang hanya .thumbnails, kami telah memperluas komponen ini secara menyeluruh untuk lebih banyak kegunaan sambil mempertahankan kesederhanaan keseluruhan di luar kotak.
Thumbnail individu sekarang membutuhkan .thumbnailkelas

Peringatan

Kelas dasar baru: .alertalih-alih.alert-message
Nama kelas distandarisasi untuk opsi lain, sekarang semuanya dimulai dengan.alert-
Gaya lansiran dasar yang didesain ulang untuk menggabungkan lansiran default dan lansiran tingkat blok menjadi satu
Kelas peringatan level blok berubah: .alert-blockalih-alih.block-message

Bilah kemajuan

Baru di 2.0
Menampilkan banyak gaya melalui kelas, termasuk variasi bergaris dan animasi melalui CSS3

Komponen lain-lain

Menambahkan dokumentasi untuk komponen sumur dan ikon tutup (digunakan dalam modal dan peringatan)

Perhatian! Kami telah menulis ulang hampir semua hal untuk plugin kami, jadi buka halaman Javascript untuk mempelajari lebih lanjut.

Keterangan alat

Metode plugin telah diubah namanya dari twipsy()ke tooltip(), dan nama kelas diubah dari twipsymenjadi tooltip.
Nilai placementopsi yang dulu belowadalah sekarang bottom, dan abovesekarang top.
Opsi animatediubah namanya menjadi animation.
Opsi htmltelah dihapus, karena tooltips default untuk mengizinkan HTML sekarang.

Popover

Elemen anak sekarang diberi namespace yang benar: .titleto .popover-title, .innerto .popover-inner, dan .contentto .popover-content.
Nilai placementopsi yang dulu belowadalah sekarang bottom, dan abovesekarang top.