Типографи
Глобал тохиргоо, гарчиг, үндсэн текст, жагсаалт болон бусад зүйлийг багтаасан Bootstrap typography-д зориулсан баримт бичиг, жишээнүүд.
Глобал тохиргоо
Bootstrap нь дэлхийн үндсэн дэлгэц, хэвлэх болон холбоосын хэв маягийг тохируулдаг. Илүү их хяналт шаардлагатай бол текст хэрэгслийн ангиудыг шалгана уу .
- Үйлдлийн систем болон төхөөрөмж бүрт хамгийн сайныг нь сонгох үндсэн фонтын стекийг ашиглана уу .
font-family
- Илүү хүртээмжтэй, хүртээмжтэй төрлийн масштабын хувьд бид хөтчийн өгөгдмөл үндэс
font-size
(ихэвчлэн 16px) гэж үздэг тул зочдод шаардлагатай бол хөтчийн өгөгдмөл тохиргоог өөрчлөх боломжтой. $font-family-base
,$font-size-base
, болон$line-height-base
шинж чанаруудыг манай хэвлэх суурь болгон ашиглах<body>
.- Глобал холбоосын өнгийг тохируулж
$link-color
, холбоосын доогуур зураасыг зөвхөн дээр хэрэглэнэ:hover
. - ( анхдагчаар) дээр
$body-bg
a-г тохируулахын тулд ашиглана уу.background-color
<body>
#fff
Эдгээр хэв маягийг дотроос олж _reboot.scss
болох ба глобал хувьсагчдыг -д тодорхойлсон _variables.scss
. Оруулсан эсэхээ шалгаарай $font-size-base
.rem
Гарчиг
<h1>
-ээр дамжуулан бүх HTML гарчгийг <h6>
ашиглах боломжтой.
Гарчиг | Жишээ |
---|---|
|
h1. Ачаалагчийн гарчиг |
|
h2. Ачаалагчийн гарчиг |
|
h3. Ачаалагчийн гарчиг |
|
h4. Ачаалагчийн гарчиг |
|
h5. Ачаалагчийн гарчиг |
|
h6. Ачаалагчийн гарчиг |
.h1
.h6
гарчгийн фонтын загварт тааруулахыг хүссэн ч холбогдох HTML элементийг ашиглах боломжгүй үед зориулсан ангиудаар дамжуулан ашиглах боломжтой.
h1. Ачаалагчийн гарчиг
h2. Ачаалагчийн гарчиг
h3. Ачаалагчийн гарчиг
h4. Ачаалагчийн гарчиг
h5. Ачаалагчийн гарчиг
h6. Ачаалагчийн гарчиг
Гарчиг тохируулах
Bootstrap 3-аас жижиг хоёрдогч гарчгийн текстийг дахин үүсгэхийн тулд өгөгдсөн хэрэглээний ангиудыг ашиглана уу.
Бүдгэрсэн хоёрдогч тексттэй гоёмсог дэлгэцийн гарчиг
Гарчиг харуулах
Уламжлалт гарчгийн элементүүд нь таны хуудасны агуулгад хамгийн сайн ажиллахаар бүтээгдсэн. Танд онцлох гарчиг хэрэгтэй бол дэлгэцийн гарчиг буюу илүү том, арай илүү үзэл бодолтой гарчгийн хэв маягийг ашиглах талаар бодож үзээрэй. Эдгээр гарчиг нь өгөгдмөл байдлаар хариу үйлдэл үзүүлэхгүй, гэхдээ фонтын хэмжээг тохируулах боломжтой гэдгийг санаарай .
Дэлгэц 1 |
Дэлгэц 2 |
Дэлгэц 3 |
Дэлгэц 4 |
Тэргүүлэх
-ийг нэмснээр догол мөрийг онцлон харуулах .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Дотор текстийн элементүүд
Нийтлэг inline HTML5 элементүүдийн загварчлал.
Та тэмдэглэгээг ашиглаж болноонцлохтекст.
Энэ текстийн мөрийг устгасан текст гэж үзэх зорилготой.
Энэ текстийн мөрийг үнэн зөв байхаа больсон гэж үзэх зорилготой.
Энэ текстийн мөрийг баримт бичигт нэмэлт болгон авч үзэх зорилготой.
Энэ текстийн мөрийг доогуур зураасаар буулгана
Энэ текстийн мөрийг нарийн хэвлэмэл хэлбэрээр авч үзэх зорилготой.
Энэ мөрийг тод бичвэр болгон харуулсан.
Энэ мөрийг налуу бичээсээр буулгасан.
.mark
шошгуудын авчрах аливаа хүсээгүй семантик үр дагавраас зайлсхийхийн зэрэгцээ .small
ижил хэв маягийг ашиглах боломжтой ангиуд <mark>
мөн .<small>
Дээр харуулаагүй ч HTML5 дээр <b>
чөлөөтэй ашиглаж болно. Энэ нь ихэвчлэн дуу хоолой, техникийн нэр томъёо гэх мэт нэмэлт ач холбогдол өгөхгүйгээр үг, хэллэгийг тодруулах зорилготой юм .<i>
<b>
<i>
Текстийн хэрэгслүүд
Текстийн зэрэглэлийг өөрчлөх, хувиргах, хэв маяг, жин, өнгийг манай текстийн хэрэгсэл болон өнгөт хэрэглүүрээр өөрчил .
Товчлол
<abbr>
Товчлол болон товчилсон үгэнд зориулсан HTML-ийн элементийн загварчлагдсан хэрэгжилт нь хулган дээр өргөжсөн хувилбарыг харуулах. Товчлолууд нь өгөгдмөл доогуур зураастай бөгөөд туслах курсорыг хулган дээр аваачих болон туслах технологийн хэрэглэгчдэд нэмэлт контекстээр хангах боломжтой.
.initialism
Үсгийн хэмжээг арай бага болгохын тулд товчлол дээр нэмнэ үү .
attr
HTML
Хаалттай ишлэл
Баримт бичиг доторх өөр эх сурвалжаас авсан агуулгын блокуудыг иш татахын тулд. Ямар <blockquote class="blockquote">
ч HTML -г ишлэл болгон ороорой.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.
Эх сурвалжийг нэрлэх
<footer class="blockquote-footer">
Эх сурвалжийг тодорхойлохын тулд a нэмнэ үү . Эх сурвалжийн нэрийг дотор нь боож өгнө <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.
Зохицуулах
Блок ишлэлийнхээ зэрэгцүүлэлтийг өөрчлөхийн тулд шаардлагатай бол текст хэрэгслүүдийг ашиглана уу.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.
Жагсаалтууд
Загваргүй
Жагсаалтын зүйлсийн өгөгдмөл list-style
болон зүүн талын зайг арилга (зөвхөн шууд хүүхдүүдэд). Энэ нь зөвхөн хүүхдийн шууд жагсаалтын зүйлд хамаатай бөгөөд та ямар ч үүрлэсэн жагсаалтад анги нэмэх шаардлагатай гэсэн үг юм.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Масса дахь бүхэл тоо
- Дээд зэрэглэлийн nisl aliquet дахь Facilisis
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Идээний идээт ундаа
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutp at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Шугаманд
Жагсаалтын сумыг арилгаж , margin
хоёр ангиллыг хослуулан бага зэрэг гэрэлтүүлээрэй ..list-inline
.list-inline-item
- Lorem ipsum
- Phasellus iaculis
- Үгүй ээ
Тодорхойлолтын жагсаалтыг зэрэгцүүлэх
Манай сүлжээний системийн урьдчилан тодорхойлсон ангиудыг (эсвэл семантик хольц) ашиглан нэр томьёо болон тайлбарыг хэвтээ байдлаар зэрэгцүүлнэ үү. Удаан хугацааны хувьд та .text-truncate
текстийг зуйванаар таслах анги нэмж болно.
- Тодорхойлолтын жагсаалтууд
- Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.
- Эйизмод
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Малесуада порта
- Etiam porta sem malesuada magna mollis euismod.
- Таслагдсан нэр томъёог таслав
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Үүрлэх
-
- Оруулсан тодорхойлолтын жагсаалт
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Хариуцлагатай үсгийн хэмжээ
Bootstrap v4.3 нь мэдрэгчтэй фонтын хэмжээг идэвхжүүлэх сонголттой бөгөөд энэ нь текстийг төхөөрөмж болон харах цонхны хэмжээгээр илүү байгалийн байдлаар масштаблах боломжийг олгодог. Sass хувьсагчийг Bootstrap болгон өөрчилж, дахин хөрвүүлснээр RFS -г идэвхжүүлж болно .$enable-responsive-font-sizes
true
RFS - ийг дэмжихийн тулд бид ердийн font-size
шинж чанараа солихын тулд Sass хольцыг ашигладаг. Хариуцлагатай фонтын хэмжээг хариу үйлдэлтэй масштаблах үйлдлийг идэвхжүүлэхийн тулд харагдац болон харах хэсэг calc()
бүхий функц болгон нэгтгэнэ. RFS болон түүний тохиргооны rem
талаар илүү ихийг GitHub репозитороос олж болно .