Bootstrap Ikhtisar CSS
Dalam bab ini, kami akan menjelaskan struktur yang mendasari bagian penting dari Bootstrap, termasuk pengembang web kami membuat lebih baik, lebih cepat, praktik terbaik kuat.
HTML 5 doctype (DOCTYPE)
Bootstrap menggunakan beberapa elemen HTML5 dan properti CSS. Agar ini bekerja, Anda perlu menggunakan HTML5 jenis dokumen (DOCTYPE). Dengan demikian, pada awal penggunaan proyek Bootstrap berisi segmen kode berikut.
<!DOCTYPE html> <html> .... </html>
Jika awal halaman di Bootstrap dibuat tidak menggunakan HTML5 jenis dokumen (DOCTYPE), Anda mungkin menghadapi beberapa browser menampilkan masalah inkonsistensi yang bahkan mungkin menghadapi situasi tertentu yang tidak konsisten di bawah yang tidak bisa lewat W3C standar validasi dalam kode Anda .
prioritas perangkat seluler
Prioritas perangkat mobile adalah perubahan paling signifikan dalam Bootstrap 3.
Dalam versi sebelumnya dari Bootstrap (sampai 2.x), Anda perlu secara manual mengutip CSS lain, untuk membuat seluruh proyek dukungan ramah untuk perangkat mobile.
Tidak lagi, Bootstrap 3 standar CSS itu sendiri dukungan ramah untuk perangkat mobile.
Bootstrap 3 dirancang prioritas perangkat mobile, diikuti oleh desktop. Ini sebenarnya adalah pergeseran yang sangat tepat waktu, karena semakin banyak orang menggunakan perangkat mobile.
Untuk membuat website Bootstrap Pembangunan untuk perangkat seluler untuk memastikan render yang tepat dan layar sentuh zoom, Anda perlu menambahkan viewport meta tag ke kepala halaman, sebagai berikut:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Properti lebar peralatan kontrol lebar. Misalkan situs Anda akan dengan perangkat resolusi layar yang berbeda untuk browsing, maka set ke perangkat-lebar untuk memastikan merender dengan benar pada perangkat yang berbeda.
skala awal = 1.0 untuk memastikan beban halaman, rasio 1: 1 presentasi, tidak akan ada scaling.
Pada browser perangkat mobile, dengan menambahkan scalable-user = tidak ada untuk meta tag viewport untuk menonaktifkan skala fungsinya (zooming).
Biasanya, maksimum skala = 1.0 dan scalable-user = tidak ada bersama-sama. Setelah fungsi zoom ini dinonaktifkan, pengguna dapat menggulir layar, Anda dapat membuat situs Anda terlihat lebih seperti nuansa aplikasi asli.
Perhatikan bahwa, dengan cara ini kita tidak merekomendasikan penggunaan semua situs, akan tergantung pada keadaan Anda sendiri!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
image responsif
<img src="..." class="img-responsive" alt="响应式图像">
Dengan menambahkan kelas img-responsif Bootstrap 3 memungkinkan gambar untuk mendukung tata letak responsif yang lebih ramah.
Mari kita lihat apa kelas ini berisi properti css.
Dalam kode di bawah, Anda dapat melihat gambar kelas img-responsif memberikan max-width: 100%; dan height: auto; properti dapat ditingkatkan sehingga gambar tidak melebihi ukuran elemen induk.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
Hal ini menunjukkan bahwa gambar yang terkait diberikan sebagai inline-block. Bila Anda mengatur properti tampilan elemen adalah inline-block, elemen inline sehubungan dengan isi berupa presentasi di sekitarnya, tetapi dengan perbedaan inline adalah bahwa dalam kasus ini kita dapat mengatur lebar dan tinggi.
height pengaturan: auto tinggi, unsur terkait tergantung pada browser.
Set max-lebar 100% menimpa lebar apapun yang ditentukan oleh properti lebar. Hal ini memungkinkan gambar untuk mendukung tata letak responsif yang lebih ramah.
Tampilan global, tata letak dan link
display global yang dasar
Bootstrap 3 menggunakan body {margin: 0;} untuk menghapus tubuh margin.
Pertimbangkan pengaturan berikut untuk tubuh:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1,428571429;
color: # 333333;
background-color: #ffffff;
}
Aturan pertama untuk mengatur gaya font default untuk tubuh "Helvetica Neue", Helvetica, Arial , sans-serif.
Aturan kedua dari teks ukuran font default dari 14 piksel.
Aturan ketiga adalah untuk mengatur tinggi baris default adalah 1,428571429.
Aturan keempat set warna teks default # 333333.
aturan akhir menetapkan warna latar belakang default adalah putih.
penyusunan huruf
Gunakan @ font-family-base, @ font-size-dasar dan properti @ line-height-dasar sebagai tipografi.
Link Style
Mengatur warna melalui global properti linkage @ link-warna.
Gaya default untuk link, pengaturan berikut:
a: hover,
a: focus {
color: # 2a6496;
text-decoration: underline;
}
a: focus {
menguraikan: tipis bertitik # 333;
outline: 5px auto -webkit-focus-ring-warna;
garis-offset: -2px;
}
Jadi, ketika mouse di atas link atau link Anda klik, warna diatur ke # 2a6496. Pada saat yang sama, akan ada garis bawah.
Selain itu, tautan yang Anda klik, akan ada kode warna untuk tipis putus-putus garis # 333. Aturan lain adalah untuk mengatur garis untuk lebar 5 piksel, dan untuk browser berbasis WebKit memiliki WebKit-fokus-ring-warna ekstensi browser. Kontur offset diatur ke piksel -2.
Semua gaya ini dapat ditemukan di scaffolding.less tersebut.
Menghindari inkonsistensi lintas-browser
Bootstrap menggunakan Menormalkan untuk membangun konsistensi lintas-browser.
Normalize.css adalah file CSS kecil yang menyediakan konsistensi lintas-browser yang lebih baik dalam elemen HTML gaya default.
Kontainer (container)
<div class="container"> ... </div>
kelas kontainer Bootstrap 3 untuk konten pada halaman paket. Mari kita lihat file ini kelas bootstrap.css .container.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Melalui kode di atas, wadah ini kiri dan kanan margin (margin-right, margin-left) diputuskan oleh browser.
Harap dicatat bahwa karena padding (padding) yang fixed-width, kontainer standar tidak dapat bersarang.
.container: sebelum,
.container: setelah {
display: table;
konten: "";
}
Ini menghasilkan pseudo-elemen. Mengatur meja display, itu akan membuat tabel-sel anonim dan konteks blok format baru. : Sebelum pseudo-elemen untuk mencegah margin runtuhnya ,: setelah pseudo-elemen untuk membersihkan float.
Jika atribut conteneditable muncul dalam HTML, karena beberapa bug Opera, membuat ruang di sekitar elemen-elemen ini. Hal ini dapat dilakukan dengan menggunakan konten: "" untuk memperbaiki.
.container: setelah {
clear: both;
}
Ini menciptakan pseudo-elemen, dan memastikan bahwa semua kapal terapung yang berisi semua elemen.
Bootstrap 3 CSS memiliki aplikasi dalam menanggapi pertanyaan media, pertanyaan media dalam nilai ambang batas yang berbeda ditetapkan max-width untuk wadah, dalam rangka untuk mencocokkan sistem grid.
@media (min-width: 768px) {
.container {
width: 750px;
}
Bootstrap Browser / Device Support
Bootstrap dapat bekerja dengan baik di desktop terbaru dan peramban mobile terminal.
browser lama mungkin tidak didukung dengan baik.
Tabel berikut bootstrap mendukung versi terbaru dari browser dan platform:
| khrom | Firefox | IE | opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | tidak berlaku | NO | tidak berlaku |
| iOS | YES | tidak berlaku | tidak berlaku | NO | YES |
| Mac OS X | YES | YES | tidak berlaku | YES | YES |
| jendela | YES | YES | YES * | YES | NO |
* Dukungan Bootstrap untuk Internet Explorer 8 dan versi IE.