Tipografi
Dokumentasi lan conto tipografi Bootstrap, kalebu setelan global, judhul, teks awak, dhaptar, lan liya-liyane.
Setelan global
Bootstrap nyetel tampilan global dhasar, tipografi, lan gaya link. Yen kontrol luwih dibutuhake, priksa kelas sarana teks .
- Gunakake tumpukan font asli sing milih sing paling apik
font-family
kanggo saben OS lan piranti. - Kanggo skala jinis sing luwih inklusif lan bisa diakses, kita nganggep root default browser
font-size
(biasane 16px) supaya pengunjung bisa ngatur standar browser sing dibutuhake. - Gunakake
$font-family-base
,$font-size-base
, lan$line-height-base
atribut minangka basis tipografi sing ditrapake ing<body>
. - Setel warna link global liwat
$link-color
lan aplikasi garis ngisor link mung ing:hover
. - Gunakake
$body-bg
kanggo nyetelbackground-color
ing<body>
(#fff
kanthi standar).
Gaya iki bisa ditemokake ing _reboot.scss
, lan variabel global ditetepake ing _variables.scss
. Priksa manawa kanggo nyetel $font-size-base
ing rem
.
Judhul
Kabeh judhul HTML, <h1>
liwat <h6>
, kasedhiya.
judhul | Tuladha |
---|---|
|
h1. Judul Bootstrap |
|
h2. Judul Bootstrap |
|
h3. Judul Bootstrap |
|
h4. Judul Bootstrap |
|
h5. Judul Bootstrap |
|
h6. Judul Bootstrap |
.h1
liwat .h6
kelas uga kasedhiya, kanggo nalika sampeyan pengin cocog gaya font saka judhul nanging ora bisa nggunakake unsur HTML gadhah.
h1. Judul Bootstrap
h2. Judul Bootstrap
h3. Judul Bootstrap
h4. Judul Bootstrap
h5. Judul Bootstrap
h6. Judul Bootstrap
Ngatur judhul
Gunakake kelas utilitas sing kalebu kanggo nggawé ulang teks judhul sekunder cilik saka Bootstrap 3.
Judhul tampilan apik Kanthi teks sekunder sing luntur
Tampilan judhul
Unsur judhul tradisional dirancang supaya bisa digunakake paling apik ing isi konten kaca sampeyan. Yen sampeyan butuh judhul supaya bisa katon, coba gunakake judhul tampilan - gaya judhul sing luwih gedhe lan luwih apik. Elinga yen judhul iki ora responsif kanthi standar, nanging sampeyan bisa ngaktifake ukuran font responsif .
Tampilan 1 |
Tampilan 2 |
Tampilan 3 |
Tampilan 4 |
timbal
Gawea paragraf kanthi nambahake .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Unsur teks inline
Styling kanggo unsur HTML5 inline umum.
Sampeyan bisa nggunakake tandha tandha kanggosorotteks.
Baris teks iki kudu dianggep minangka teks sing wis dibusak.
Baris teks iki kudu dianggep ora akurat maneh.
Baris teks iki kudu dianggep minangka tambahan kanggo dokumen kasebut.
Baris teks iki bakal ditampilake minangka garis ngisor
Baris teks iki kudu dianggep minangka cetakan sing apik.
Baris iki digawe minangka teks kandel.
Baris iki digawe minangka teks miring.
.mark
lan .small
kelas uga kasedhiya kanggo ngetrapake gaya sing padha <mark>
lan <small>
nalika ngindhari implikasi semantik sing ora dikarepake sing bakal digawa dening tag.
Nalika ora ditampilake ing ndhuwur, aja ragu-ragu nggunakake <b>
lan <i>
ing HTML5. <b>
tegese kanggo nyorot tembung utawa frase tanpa menehi wigati tambahan nalika <i>
biasane kanggo swara, istilah teknis, lsp.
Utilitas teks
Ganti keselarasan teks, transformasi, gaya, bobot, lan warna nganggo utilitas teks lan utilitas warna .
Singkatan
Implementasi gaya saka <abbr>
unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan duwe garis ngisor standar lan entuk kursor bantuan kanggo nyedhiyakake konteks tambahan babagan hover lan pangguna teknologi pitulung.
Tambah .initialism
menyang singkatan kanggo ukuran font sing rada cilik.
attr
HTML
Blockquotes
Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan. Bungkus HTML<blockquote class="blockquote">
apa wae minangka kutipan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Jeneng sumber
Tambah a <footer class="blockquote-footer">
kanggo ngenali sumber. Bungkus jeneng karya sumber ing <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Alignment
Gunakake utilitas teks yen perlu kanggo ngganti alignment blockquote sampeyan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Dhaptar
Tanpa gaya
Mbusak wates gawan list-style
lan kiwa ing dhaptar item (mung anak langsung). Iki mung ditrapake kanggo item dhaptar bocah langsung , tegese sampeyan uga kudu nambah kelas kanggo dhaptar bersarang.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem lan massa
- Facilisis ing pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ing
- Faucibus porta lacus fringilla vel
- Aenean lungguh amet erat nunc
- Eget porttitor lorem
Inline
Mbusak peluru dhaftar lan aplikasi sawetara cahya margin
karo kombinasi saka rong kelas, .list-inline
lan .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Alignment dhaptar deskripsi
Selarasake istilah lan katrangan kanthi horisontal kanthi nggunakake kelas sing wis ditemtokake sistem kothak (utawa campuran semantik). Kanggo istilah sing luwih dawa, sampeyan bisa nambah .text-truncate
kelas kanggo ngethok teks kanthi elipsis.
- Dhaptar katrangan
- Dhaptar deskripsi sampurna kanggo nemtokake istilah.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida lan eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Istilah sing dicekak dicekak
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- nyarang
-
- Dhaptar definisi nested
- Enean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Ukuran font responsif
Ing v4.3.0, Bootstrap dikirim kanthi pilihan kanggo ngaktifake ukuran font responsif, ngidini teks kanggo ukuran luwih alamiah antarane piranti lan ukuran viewport. RFS bisa diaktifake kanthi ngganti $enable-responsive-font-sizes
variabel Sass true
lan ngumpulake maneh Bootstrap.
Kanggo ndhukung RFS , kita nggunakake mixin Sass kanggo ngganti font-size
sifat normal kita. Ukuran font responsif bakal dikompilasi dadi calc()
fungsi kanthi campuran rem
lan unit viewport kanggo ngaktifake prilaku skala responsif. Luwih lengkap babagan RFS lan konfigurasi bisa ditemokake ing repositori GitHub .