Latest web development tutorials

Bootstrap 3 Ikhtisar CSS

target

Dalam tutorial ini, kita telah membahas Bootstrap 3 poin CSS. Selanjutnya kita akan menjelaskan Bootstrap 3 bekerja beberapa faktor utama.

HTML 5 doctype (DOCTYPE)

Bootstrap 3 menggunakan beberapa elemen HTML5 dan atribut CSS. Agar ini bekerja, Anda perlu menggunakan HTML5 jenis dokumen (DOCTYPE). 

<! DOCTYPE html>
<Html lang = "en">
  ...
</ 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

Ini mungkin perubahan yang paling signifikan dalam Bootstrap 3. Dalam versi sebelumnya dari Bootstrap (sampai 2.x), Anda perlu secara manual mengutip CSS lain, untuk membuat proyek bersama-sama dengan ponsel CSS ramah-perangkat utama. Tidak lagi, Bootstrap 3 standar CSS itu sendiri adalah perangkat mobile yang ramah.

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, awal skala = 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, atau tergantung pada keadaan Anda sendiri!

image responsif

Dengan menambahkan kelas img-responsif memungkinkan Bootstrap 3 gambar untuk mendukung tata letak responsif yang lebih ramah. Mari kita lihat kelas ini berisi apa css properti. esensinya adalah untuk memberikan gambar max-width: 100%; dan height: auto; properti memungkinkan skala gambar, tidak melebihi ukuran elemen induk. 

img-responsif {
  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

Bootstrap 3 menggunakan body {margin: 0;} untuk menghapus tubuh margin.

Pertimbangkan set berikut tubuh yang relevan 

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.

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 3, seperti versi sebelumnya, gunakan Menormalkan, untuk menciptakan konsistensi lintas-browser.

wadah

kelas kontainer Bootstrap 3 untuk konten pada halaman paket. Mari kita lihat kelas berikut 

.container {
  margin-right: auto;
  margin-left: auto;
}

Melalui kode di atas, margin kiri dan kanan wadah oleh browser memutuskan. 

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