Gambaran Keseluruhan CSS Bootstrap


Dalam bab ini, kami akan merangkumi bahagian penting struktur asas Bootstrap, termasuk amalan terbaik kami untuk menjadikan pembangunan web lebih baik, lebih pantas dan lebih kukuh.

Jenis Dokumen HTML 5 (Doctype)

Bootstrap menggunakan beberapa elemen HTML5 dan sifat CSS. Agar ini berfungsi dengan betul, anda perlu menggunakan jenis dokumen HTML5 (Doctype). Oleh itu, sertakan coretan kod berikut pada permulaan projek anda menggunakan Bootstrap. 

<!DOCTYPE html>
<html>
....
</html>

Jika anda tidak menggunakan jenis dokumen HTML5 (Doctype) pada permulaan halaman web yang dibuat oleh Bootstrap, anda mungkin menghadapi beberapa ketidakkonsistenan paparan penyemak imbas, malah mungkin menghadapi ketidakkonsistenan dalam beberapa situasi tertentu, supaya anda Kod tidak boleh lulus pengesahan terhadap piawaian W3C.

Diutamakan mudah alih

Diutamakan mudah alih ialah perubahan paling ketara dalam Bootstrap 3.

Dalam versi Bootstrap sebelumnya (sehingga 2.x), anda perlu merujuk CSS lain secara manual untuk menjadikan keseluruhan projek mesra mudah alih.

Ia berbeza sekarang, CSS lalai Bootstrap 3 itu sendiri mesra mudah alih.

Bootstrap 3 direka dengan mudah alih pertama, desktop kedua. Ini sebenarnya adalah peralihan yang sangat tepat pada masanya kerana semakin ramai pengguna kini menggunakan peranti mudah alih.

Untuk menjadikan tapak web yang dibangunkan oleh Bootstrap mesra mudah alih dan memastikan lukisan dan penskalaan skrin sentuh yang betul, anda perlu menambah tag viewport meta pada kepala halaman web, sebagai ditunjukkan di bawah: <🎜 Sifat >

<meta name="viewport" content="width=device-width, initial-scale=1.0">

lebar mengawal lebar peranti. Dengan mengandaikan bahawa tapak web anda akan dilihat oleh peranti dengan peleraian skrin yang berbeza, menetapkannya kepada lebar peranti memastikan tapak tersebut dipaparkan dengan betul pada peranti yang berbeza.

initial-scale=1.0 Pastikan bahawa apabila halaman web dimuatkan, ia akan dipaparkan pada nisbah 1:1 tanpa sebarang penskalaan.

Pada penyemak imbas mudah alih, zum boleh dilumpuhkan dengan menambahkan

user-scalable=no pada teg viewport meta.

Biasanya,

skala maksimum=1.0 digunakan dengan skala pengguna=tidak. Dengan melumpuhkan zum, pengguna hanya boleh menatal, menjadikan tapak web anda kelihatan lebih seperti apl asli.

Perhatikan bahawa kami tidak mengesyorkan kaedah ini untuk semua tapak web, ia masih bergantung pada situasi anda sendiri! 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Imej responsif

<img src="..." class="img-responsive" alt="响应式图像">

Dengan menambahkan kelas

img-responsive, imej dalam Bootstrap 3 boleh dijadikan lebih responsif kepada sokongan reka letak responsif.

Seterusnya mari kita lihat atribut css yang terkandung dalam kelas ini.

Dalam kod di bawah, anda boleh melihat bahawa kelas

img-responsive menetapkan lebar maksimum: 100% dan ketinggian: auto kepada imej, yang membenarkan imej itu berskala secara berkadar. Tidak melebihi dimensi unsur induknya. 

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

Ini menunjukkan bahawa imej yang berkaitan dipaparkan sebagai

blok sebaris. Apabila anda menetapkan sifat paparan elemen kepada sekatan sebaris, elemen itu dipaparkan sebaris berbanding kandungan di sekelilingnya, tetapi tidak seperti sebaris, kami boleh menetapkan lebar dan tinggi dalam kes ini.

Tetapkan tinggi:auto, ketinggian elemen berkaitan bergantung pada penyemak imbas.

Menetapkan max-width kepada 100% akan mengatasi mana-mana lebar yang ditentukan melalui atribut width. Ini menjadikan imej lebih mesra untuk menyokong reka letak responsif.

Paparan global, susun atur dan pautan

Paparan global asas

Bootstrap 3 Gunakan badan {margin: 0;} untuk mengalih keluar tepi badan jarak.

Sila lihat tetapan berikut untuk badan: 

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

Peraturan pertama menetapkan gaya fon lalai badan kepada "Helvetica Neue", Helvetica, Arial, sans-serif .

Peraturan kedua menetapkan saiz fon lalai untuk teks kepada 14 piksel.

Peraturan ketiga menetapkan ketinggian baris lalai kepada 1.428571429.

Peraturan keempat menetapkan warna teks lalai kepada #333333.

Peraturan terakhir menetapkan warna latar belakang lalai kepada putih.

Tipografi

Gunakan sifat @font-family-base, @font-size-base dan @line-height-base sebagai gaya tipografi.

Gaya pautan

Tetapkan warna pautan global melalui atribut @link-color.

Untuk gaya lalai pautan, tetapkan ia seperti berikut: 

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Jadi apabila tetikus melayang di atas pautan, atau apabila pautan diklik, warna akan ditetapkan kepada #2a6496 . Pada masa yang sama, garis bawah akan muncul.

Selain itu, pautan yang diklik akan mempunyai garis besar bertitik nipis dengan kod warna #333. Peraturan lain ialah menetapkan garis besar kepada 5 piksel lebar, dan untuk penyemak imbas berasaskan webkit terdapat sambungan penyemak imbas -webkit-focus-ring-color. Outline Offset ditetapkan kepada -2 piksel.

Semua gaya di atas boleh didapati dalam perancah.kurang.

Elakkan ketidakkonsistenan silang penyemak imbas

Penggunaan Bootstrap Normalize untuk mewujudkan ketekalan silang penyemak imbas.

Normalize.css ialah fail CSS kecil yang menyediakan ketekalan silang penyemak imbas yang lebih baik dalam penggayaan lalai unsur HTML. Kelas

Bekas (Bekas) 

<div class="container">
  ...
</div>

Kelas bekas Bootstrap 3 digunakan untuk membungkus kandungan pada halaman. Mari lihat kelas .container ini dalam fail bootstrap.css. 

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Melalui kod di atas, jidar kiri dan kanan (margin-kanan, jidar-kiri) bekas ditentukan oleh penyemak imbas.

Sila ambil perhatian bahawa memandangkan padding ialah lebar tetap, bekas tidak boleh bersarang secara lalai. 

.container:before,
.container:after {
  display: table;
  content: " ";
}

Ini menghasilkan unsur pseudo. Menetapkan paparan kepada jadual mencipta sel jadual tanpa nama dan konteks pemformatan blok baharu. Elemen pseudo :sebelum menghalang jidar atas daripada runtuh dan elemen pseudo :selepas mengosongkan apungan.

Jika atribut boleh padu muncul dalam HTML, disebabkan oleh beberapa pepijat Opera, ruang dicipta di sekeliling elemen di atas. Ini boleh diperbaiki dengan menggunakan kandungan: " ". 

.container:after {
  clear: both;
}

Ia mencipta elemen pseudo dan memastikan semua bekas mengandungi semua elemen terapung.

CSS Bootstrap 3 mempunyai pertanyaan media yang digunakan untuk respons dan lebar maksimum ditetapkan untuk bekas dalam ambang pertanyaan media yang berbeza agar sepadan dengan sistem grid. 

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Sokongan Penyemak Imbas/Peranti Bootstrap

Bootstrap berfungsi dengan baik dalam sistem desktop dan penyemak imbas mudah alih terkini.

Pelayar lama mungkin tidak menyokongnya dengan baik.

Jadual berikut menunjukkan versi terkini pelayar dan platform yang disokong oleh Bootstrap:

 ChromeFirefoxIEOperaSafari
AndroidYESYES不适用NO不适用
iOSYES不适用不适用NOYES
Mac OS XYESYES不适用YESYES
WindowsYESYESYES*YESNO

* Bootstrap menyokong Internet Explorer 8 dan versi pelayar IE yang lebih tinggi.