Latest web development tutorials

bootstrap tata letak

Bootstrap menggunakan Helvetica Neue, Helvetica, Arial dan font sans-serif sebagai tumpukan default.

Bootstrap menggunakan fitur tata letak halaman, Anda dapat membuat judul, paragraf, daftar, dan elemen inline lainnya.


membintangi

Bootstrap mendefinisikan semua judul HTML (h1 ke h6) gaya. Perhatikan contoh berikut:

contoh

<H1> saya menuju 1 h1 </ h1> <H2> Saya sedang menuju 2 h2 </ h2> <H3> Saya sedang menuju 3 h3 </ h3> <H4> Saya sedang menuju 4 h4 </ h4> <H5> Saya sedang menuju 5 h5 </ h5> <H6> Saya sedang menuju 6 h6 </ h6>

Coba »

Hasilnya adalah sebagai berikut:

membintangi

inline subtitle

Jika Anda perlu menambahkan subjudul untuk inline gelar apapun, cukup tambahkan pada kedua sisi elemen <small>, atau menambahkankelas .small, cara ini Anda bisa mendapatkan ukuran yang lebih kecil warna teks lebih ringan, seperti contoh berikut sebagai berikut:

contoh

<H1> saya menuju 1 h1. <Kecil> Saya Subtitel 1 h1 </ small> </ h1> <H2> Saya sedang menuju 2 h2. <Kecil> Saya subtitle 2 h2 </ small> </ h2> <H3> Saya sedang menuju 3 h3. <Kecil> Saya subjudul 3 h3 </ small> </ h3> <H4> Saya sedang menuju 4 h4. <Kecil> Saya subjudul 4 h4 </ small> </ h4> <H5> Saya sedang menuju 5 h5. <Kecil> Saya subjudul 5 h5 </ small> </ h5> <H6> Saya sedang menuju 6 h6. <Kecil> Saya Subtitel 6 h6 </ small> </ h6>

Coba »

Hasilnya adalah sebagai berikut:

inline subtitle

Salinan tubuh panduan

Dalam rangka untuk menambah sebuah paragraf untuk menekankan teks, Anda dapat menambahkan class = "memimpin", yang akan lebih besar dan lebih berani, lebih tinggi baris teks, seperti yang ditunjukkan dalam contoh berikut:

contoh

<H2> copy buku tubuh </ h2> <P class = "memimpin"> Ini adalah contoh dari salinan penggunaan demo dari tubuh panduan. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. Ini adalah contoh dari salinan demo dari penggunaan panduan tubuh. </ P>

Coba »

Hasilnya adalah sebagai berikut:

Salinan tubuh panduan

menekankan

Tag HTML default untuk menekankan <small> (85% dari orang tua mengatur ukuran teks teks), <strong> (mengatur teks teks lebih berani), <em> (mengatur teks dalam huruf miring).

Bootstrap memberikan kelas digunakan untuk menekankan teks, seperti yang ditunjukkan dalam contoh berikut:

contoh

<Kecil> Bank adalah dalam tag konten </ small> Situs <Kuat> Bank adalah dalam tag konten </ strong> Situs <Em> Bank adalah dalam isi tag, dan diberikan sebagai miring </ em> Situs <P class = "text-kiri"> teks kiri-blok </ p> <P class = "text-center"> Luruskan Text </ p> <P class = "text-benar"> teks benar-blok </ p> <P class = "text-diredam"> konten Bank dilemahkan </ p> <P class = "text-utama"> konten Bank dengan kelas primer </ p> <P class = "text-sukses"> konten Bank dengan kelas sukses </ p> <P class = "text-info"> isi dengan informasi bank kelas </ p> <P class = "text-warning"> konten Bank dengan kelas peringatan </ p> <P class = "text-bahaya"> konten Bank dengan kelas bahaya </ p>

Coba »

Hasilnya adalah sebagai berikut:

menekankan

singkatan

tag elemen HTML disediakan untuk singkatan, seperti WWW atau HTTP. definisi bootstrap dari <abbr> unsur gaya untuk menampilkan garis putus-putus dalam teks di bagian bawah frame, ketika mouse di atas akan menampilkan teks penuh (selama Anda menambahkan <abbr> judul atribut teks). Dalam rangka untuk mendapatkan teks font yang lebih kecil, tambahkan .initialism ke <abbr>.

contoh

<Abbr title = "World Wide Web"> WWW </ abbr> Situs <Abbr title = "Real Simple Syndication" class = "initialism"> RSS < / abbr>

Coba »

Hasilnya adalah sebagai berikut:

singkatan

Alamat (alamat)

Gunakan <alamat> tag, Anda dapat menampilkan informasi kontak pada halaman. Sejak <alamat> tampilan default: block;, Anda perlu menggunakan label untuk menambahkan alamat bungkus teks tertutup.

contoh

<Alamat> <Kuat> Beberapa Company, Inc < / strong> Situs 007 jalan <br> Beberapa Kota, Negara XXXXX Situs <Abbr title = "Telepon"> P: </ abbr> (123) 456-7890 </ address> <Alamat> <Kuat> Nama Lengkap </ strong > Situs <A href = "mailto: #"> [email protected] </ a> </ Alamat>

Coba »

Hasilnya adalah sebagai berikut:

alamat

Referensi (Blockquote)

Anda dapat menggunakan default <blockquote> di sebelah teks HTML. Pilihan lainnya termasuk menambahkan tag <small> untuk mengidentifikasi sumber kutipan menggunakankelas.pull-benar tepat referensi keselarasan. Contoh berikut menggambarkan fitur ini:

contoh

<Blockquote> <P> Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. Ini adalah referensi ke instance default. </ P> </ Blockquote> <Blockquote> Ini adalah judul dengan sumber referensi. <Kecil> Seseorang terkenal di <mengutip title = "Sumber Judul"> Sumber Judul </ cite> </ small> </ Blockquote> <Blockquote class = "pull-benar"> Ini adalah referensi ke kanan-blok. <Kecil> Seseorang terkenal di <mengutip title = "Sumber Judul"> Sumber Judul </ cite> </ small> </ Blockquote>

Coba »

Hasilnya adalah sebagai berikut:

kutipan

daftar

dukungan bootstrap memerintahkan daftar, daftar unordered dan daftar definisi.

  • daftar memerintahkan: ordered list nomor atau cara lain pada awal daftar karakter teratur.
  • daftar unordered: Daftar unordered mengacu daftar tanpa urutan tertentu, adalah daftar nomor yang dimulai dengan penekanan pada gaya tradisional.Jika Anda tidak ingin menampilkan penekanan ini, Anda dapat menggunakankelas.list-unstyled untuk menghapus gaya. Anda juga dapat menggunakankelasdaftar .list-inline dari semua item pada baris yang sama.
  • daftar definisi: Dalam jenis daftar, setiap item daftar dapat berisi <dt> dan <dd> elemen.<Dt> atas namadefinisi istilahseperti kamus, yang merupakan bagian dari (atau frase) didefinisikan. Kemudian, <dd> yaitu <dt> keterangan. Anda dapat menggunakankelasdl-horizontal <dl> berturut-turut milik deskripsi ditampilkan berdampingan.

Contoh berikut menunjukkan jenis daftar:

contoh

<H4> Memerintahkan Daftar </ h4> <Ol> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Butir 3 </ li > <Li> Item 4 </ li > </ Ol> <H4> daftar unordered </ h4> <Ul> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Butir 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> daftar gaya terdefinisi </ h4> <Ul class = "list-unstyled"> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Butir 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> Inline Daftar </ h4> <Ul class = "list-inline"> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Butir 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> Daftar Definisi </ h4> <Dl> <Dt> Keterangan 1 </ dt > <Dd> Item 1 </ dd > <Dt> Keterangan 2 </ dt > <Dd> Item 2 </ dd > </ Dl> daftar definisi <h4> tingkat </ h4> <Dl class = "dl-horisontal"> <Dt> Keterangan 1 </ dt > <Dd> Item 1 </ dd > <Dt> Keterangan 2 </ dt > <Dd> Item 2 </ dd > </ Dl>

Coba »

Hasilnya adalah sebagai berikut:

daftar

Lebih kelas typesetting

Tabel berikut memberikan contoh tambahan kelas tipografi Bootstrap:

kategori deskripsi contoh
.lead Sorot paragraf untuk membuat mencoba
.small Mengatur teks kecil (mengatur 85% ukuran teks induk) mencoba
.text-kiri Mengatur teks rata kiri mencoba
.text-pusat Pengaturan Text Align mencoba
.text-benar Pengaturan Teks Rata Kanan mencoba
.text-membenarkan Pengaturan Penyelarasan Text, paragraf di atas layar beberapa bungkus teks mencoba
.text-nowrap Ayat di atas layar sebagian membungkus mencoba
.text-huruf kecil Pengaturan huruf kecil teks mencoba
.text-huruf besar Mengatur huruf besar teks mencoba
.text-memanfaatkan Pengaturan inisial kata mencoba
.initialism Hal ini ditampilkan dalam <abbr> elemen dalam teks untuk menampilkan font kecil mencoba
.blockquote-terbalik Menetapkan referensi ke kanan-blok mencoba
.list-unstyled Menghapus daftar gaya default, daftar item kiri-blok (<ul> dan <ol> di). Kategori ini hanya berlaku untuk mengarahkan daftar anak item (jika Anda perlu untuk menghapus bersarang daftar item, Anda perlu menggunakan gaya dalam daftar bersarang) mencoba
.list-inline Akan ditempatkan pada baris yang sama semua item daftar mencoba
.dl-horisontal Kelas ini menetapkan mengambang dan offset diterapkan <dl> elemen dan <dt> elemen, Anda dapat melihat contoh implementasi khusus mencoba
.pre-digulir Jadi <pre> elemen digulir digulir mencoba