ტიპოგრაფია
დოკუმენტაცია და მაგალითები Bootstrap ტიპოგრაფიისთვის, მათ შორის გლობალური პარამეტრები, სათაურები, ძირითადი ტექსტი, სიები და სხვა.
Bootstrap ადგენს ძირითად გლობალურ ჩვენებას, ტიპოგრაფიას და ბმულის სტილებს. როდესაც მეტი კონტროლია საჭირო, შეამოწმეთ ტექსტური სასარგებლო კლასები .
- გამოიყენეთ მშობლიური შრიფტის დასტა , რომელიც ირჩევს საუკეთესოს
font-family
თითოეული OS და მოწყობილობისთვის. - უფრო ინკლუზიური და ხელმისაწვდომი ტიპის სკალისთვის, ჩვენ ვივარაუდებთ, რომ ბრაუზერის ნაგულისხმევი ფესვი
font-size
(ჩვეულებრივ 16 პიქსელია), ასე რომ ვიზიტორებს შეუძლიათ საჭიროებისამებრ დააკონფიგურირონ ბრაუზერის ნაგულისხმევი პარამეტრები. - გამოიყენეთ
$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
ყველა HTML სათაური, <h1>
მეშვეობით <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.
სტილი HTML5 საერთო შიდა ელემენტებისთვის.
შეგიძლიათ გამოიყენოთ ნიშნის ტეგიმონიშნეთტექსტი.
ტექსტის ეს ხაზი განიხილება როგორც წაშლილი ტექსტი.
ტექსტის ეს სტრიქონი მიჩნეულია, რომ აღარ არის ზუსტი.
ტექსტის ეს ხაზი განიხილება, როგორც დოკუმენტის დამატება.
ტექსტის ეს ხაზი ხაზგასმული იქნება
ტექსტის ეს ხაზი განიხილება როგორც წვრილმანი.
ეს სტრიქონი გამოტანილია როგორც თამამი ტექსტი.
ეს სტრიქონი გამოტანილია, როგორც დახრილი ტექსტი.
.mark
და .small
კლასები ასევე ხელმისაწვდომია იმავე სტილების გამოსაყენებლად, როგორც <mark>
და <small>
ამავდროულად, თავიდან იქნას აცილებული ნებისმიერი არასასურველი სემანტიკური გავლენა, რომელსაც ტეგები მოჰყვება.
მიუხედავად იმისა, რომ ზემოთ არ არის ნაჩვენები, მოგერიდებათ გამოიყენოთ <b>
და <i>
HTML5-ში. <b>
მიზნად ისახავს სიტყვების ან ფრაზების ხაზგასმას დამატებითი მნიშვნელობის გადაცემის გარეშე, ხოლო <i>
ძირითადად ხმისთვის, ტექნიკური ტერმინებისთვის და ა.შ.
შეცვალეთ ტექსტის გასწორება, ტრანსფორმაცია, სტილი, წონა და ფერი ჩვენი ტექსტის უტილიტებისა და ფერის კომუნალური საშუალებებით .
HTML <abbr>
ელემენტის სტილიზებული იმპლემენტაცია აბრევიატურებისა და აკრონიმებისთვის გაფართოებული ვერსიის საჩვენებლად hover-ზე. აბრევიატურებს აქვთ ნაგულისხმევი ხაზგასმა და იღებენ დამხმარე კურსორს, რათა უზრუნველყონ დამატებითი კონტექსტი ჰოვერზე და დამხმარე ტექნოლოგიების მომხმარებლებისთვის.
დაამატეთ .initialism
აბრევიატურას ოდნავ მცირე ზომის შრიფტი.
attr
HTML
თქვენი დოკუმენტის სხვა წყაროდან შინაარსის ბლოკების ციტირებისთვის. გადაიტანეთ <blockquote class="blockquote">
ნებისმიერი HTML ციტატის სახით.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante.
დაამატეთ <footer class="blockquote-footer">
წყაროს იდენტიფიცირებისთვის. ჩაწერეთ წყაროს ნამუშევრის სახელი <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante.
გამოიყენეთ ტექსტური უტილიტები საჭიროებისამებრ თქვენი ბლოკციტატის გასწორების შესაცვლელად.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante.
წაშალეთ ნაგულისხმევი list-style
და მარცხენა ზღვარი სიის ელემენტებზე (მხოლოდ უშუალო ბავშვები). ეს ეხება მხოლოდ უშუალოდ ბავშვების სიის ელემენტებს , რაც ნიშნავს, რომ თქვენ მოგიწევთ კლასის დამატება ნებისმიერი ჩადგმული სიისთვის.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- მთელი რიცხვი molestie lorem at massa
- გამარტივება პრეტიუმ ნისლ ალიკეტში
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- ენეან იჯდეს ამეთ ერატ ნუნც
- ეგეთი პორტტიტორი ლორემი
ამოიღეთ სიის პუნქტები და გამოიყენეთ შუქი 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.
- Malesuada porta
- 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.
საპასუხო ტიპოგრაფია ეხება ტექსტისა და კომპონენტების სკალირებას ძირეული ელემენტის უბრალოდ მორგებით font-size
მედია მოთხოვნების სერიაში. Bootstrap არ აკეთებს ამას თქვენთვის, მაგრამ მისი დამატება საკმაოდ მარტივია, თუ ეს გჭირდებათ.
აი ამის მაგალითი პრაქტიკაში. აირჩიეთ ნებისმიერი font-size
s და მედია მოთხოვნები.