გადატვირთვა
გადატვირთვა, ელემენტის სპეციფიკური CSS ცვლილებების კრებული ერთ ფაილში, ამუშავებს Bootstrap-ს, რათა უზრუნველყოს ელეგანტური, თანმიმდევრული და მარტივი საბაზისო სლაინი.
მიდგომა
გადატვირთვა ეფუძნება ნორმალიზებას, რაც უზრუნველყოფს ბევრ HTML ელემენტს გარკვეულწილად შეფასებული სტილებით, მხოლოდ ელემენტების სელექტორების გამოყენებით. დამატებითი სტილის გაკეთება ხდება მხოლოდ კლასებით. მაგალითად, ჩვენ გადავტვირთავთ ზოგიერთ <table>
სტილს უფრო მარტივი საბაზისო ხაზისთვის და მოგვიანებით ვაძლევთ .table
, .table-bordered
, და სხვას.
აქ არის ჩვენი სახელმძღვანელო მითითებები და მიზეზები, თუ რა უნდა გადატვირთოთ გადატვირთვისას:
- განაახლეთ ზოგიერთი ბრაუზერის ნაგულისხმევი მნიშვნელობები, რათა გამოიყენოთ
rem
s ნაცვლადem
s მასშტაბირებადი კომპონენტების დაშორებისთვის. - მოერიდეთ
margin-top
. ვერტიკალური მინდვრები შეიძლება დაიშალოს, რაც მოულოდნელ შედეგებს გამოიღებს. რაც მთავარია, ერთი მიმართულებაmargin
უფრო მარტივი გონებრივი მოდელია. - მოწყობილობების ზომებში უფრო ადვილი სკალირების მიზნით, ბლოკის ელემენტებმა უნდა გამოიყენონ
rem
s formargin
s. - შეინახეთ დაკავშირებული თვისებების დეკლარაციები
font
მინიმუმამდე, გამოიყენეთinherit
შეძლებისდაგვარად.
გვერდის ნაგულისხმევი
და <html>
ელემენტები <body>
განახლებულია, რათა უზრუნველყოს უკეთესი გვერდის ნაგულისხმევი პარამეტრები. Უფრო კონკრეტულად:
- გლობალურად
box-sizing
დაყენებულია ყველა ელემენტზე — მათ შორის*::before
და . ეს უზრუნველყოფს, რომ ელემენტის დეკლარირებული სიგანე არასოდეს გადააჭარბოს ბალიშის ან საზღვრის გამო.*::after
border-box
- ბაზაზე
font-size
არ არის გამოცხადებული<html>
, მაგრამ16px
ვარაუდია (ბრაუზერის ნაგულისხმევი).font-size: 1rem
გამოიყენება<body>
მედიის მოთხოვნების საშუალებით ადვილად საპასუხო ტიპის სკალირებისთვის, მომხმარებლის პრეფერენციების დაცვით და უფრო ხელმისაწვდომი მიდგომის უზრუნველსაყოფად. - ასევე
<body>
ადგენს გლობალურfont-family
,line-height
დაtext-align
. ეს მოგვიანებით მემკვიდრეობით მიიღება ზოგიერთი ფორმის ელემენტებით, რათა თავიდან იქნას აცილებული შრიფტების შეუსაბამობა. - უსაფრთხოებისთვის, მას
<body>
აქვს გამოცხადებულიbackground-color
, ნაგულისხმევი#fff
.
მშობლიური შრიფტის დასტა
ნაგულისხმევი ვებ შრიფტები (Helvetica Neue, Helvetica და Arial) ამოღებულ იქნა Bootstrap 4-ში და ჩანაცვლდა „მშობლიური შრიფტების დასტათი“ ყველა მოწყობილობასა და ოპერაციულ სისტემაზე ტექსტის ოპტიმალური წარმოდგენისთვის. წაიკითხეთ მეტი მშობლიური შრიფტის სტეკების შესახებ Smashing Magazine- ის ამ სტატიაში .
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
გაითვალისწინეთ, რომ იმის გამო, რომ შრიფტის დასტა შეიცავს emoji შრიფტებს, ბევრი საერთო სიმბოლო/დინგბატი უნიკოდის სიმბოლო იქნება გამოსახული, როგორც მრავალფერადი პიქტოგრამები. მათი გარეგნობა განსხვავდება ბრაუზერის/პლატფორმის მშობლიურ emoji შრიფტში გამოყენებული სტილის მიხედვით და მათზე გავლენას არ მოახდენს არცერთი CSS color
სტილი.
ეს font-family
გამოიყენება <body>
და ავტომატურად მემკვიდრეობით გლობალურად მთელს Bootstrap-ში. გლობალურის გადასართავად font-family
, განაახლეთ $font-family-base
და ხელახლა შეადგინეთ Bootstrap.
სათაურები და აბზაცები
სათაურის ყველა ელემენტი - მაგ., <h1>
- და გადატვირთულია <p>
მათი margin-top
წაშლის მიზნით. დამატებულია სათაურები margin-bottom: .5rem
და აბზაცები margin-bottom: 1rem
მარტივი ინტერვალისთვის.
სათაური | მაგალითი |
---|---|
<h1></h1> |
h1. ჩატვირთვის სათაური |
<h2></h2> |
h2. ჩატვირთვის სათაური |
<h3></h3> |
h3. ჩატვირთვის სათაური |
<h4></h4> |
h4. ჩატვირთვის სათაური |
<h5></h5> |
h5. ჩატვირთვის სათაური |
<h6></h6> |
h6. ჩატვირთვის სათაური |
სიები
ყველა სია — <ul>
, <ol>
, და <dl>
— margin-top
წაშლილია და a margin-bottom: 1rem
. ჩადგმულ სიებს არ აქვთ margin-bottom
.
- ყველა სიას მოხსნილია ზედა ზღვარი
- და მათი ქვედა ზღვარი ნორმალიზდება
- ჩადგმულ სიებს არ აქვთ ქვედა ზღვარი
- ამ გზით მათ უფრო თანაბარი გარეგნობა აქვთ
- განსაკუთრებით მაშინ, როდესაც მოჰყვება მეტი სიის ელემენტი
- მარცხენა ბალიშიც გადატვირთულია
- აქ არის შეკვეთილი სია
- სიის რამდენიმე ელემენტით
- მას აქვს იგივე საერთო სახე
- როგორც წინა დაუგეგმავი სია
უფრო მარტივი სტილის, მკაფიო იერარქიისა და უკეთესი ინტერვალისთვის, აღწერილობის სიები განახლებულია margin
s. <dd>
გადატვირთეთ margin-left
და 0
დაამატეთ margin-bottom: .5rem
. გაბედულია . <dt>
_
- აღწერილობის სიები
- აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
- ვადა
- ტერმინის განმარტება.
- მეორე განმარტება იმავე ტერმინისთვის.
- კიდევ ერთი ტერმინი
- ამ სხვა ტერმინის განმარტება.
წინასწარ ფორმატირებული ტექსტი
<pre>
ელემენტი გადატვირთულია მისი ამოსაშლელად და მისი ერთეულების გამოყენების margin-top
მიზნით .rem
margin-bottom
.მაგალითი-ელემენტი { ზღვარი-ქვედა: 1რემ; }
მაგიდები
ცხრილები ოდნავ მორგებულია <caption>
s სტილზე, იშლება საზღვრები და უზრუნველყოფს თანმიმდევრულობას text-align
. კლასს მოჰყვება დამატებითი ცვლილებები.table
საზღვრებისთვის, ბალიშებისთვის და სხვა .
მაგიდის სათაური | მაგიდის სათაური | მაგიდის სათაური | მაგიდის სათაური |
---|---|---|---|
მაგიდის უჯრედი | მაგიდის უჯრედი | მაგიდის უჯრედი | მაგიდის უჯრედი |
მაგიდის უჯრედი | მაგიდის უჯრედი | მაგიდის უჯრედი | მაგიდის უჯრედი |
მაგიდის უჯრედი | მაგიდის უჯრედი | მაგიდის უჯრედი | მაგიდის უჯრედი |
ფორმები
სხვადასხვა ფორმის ელემენტები გადატვირთულია უფრო მარტივი საბაზისო სტილისთვის. აქ არის რამდენიმე ყველაზე შესამჩნევი ცვლილება:
<fieldset>
s-ებს არ აქვთ საზღვრები, ბალიშები ან ზღვარი, ასე რომ, ისინი ადვილად შეიძლება გამოყენებულ იქნას როგორც შეფუთვა ინდივიდუალური შეყვანის ან შეყვანის ჯგუფებისთვის.<legend>
s, ისევე როგორც ველების ნაკრები, ასევე გადაკეთებულია, რათა გამოისახოს როგორც სათაური.<label>
s დაყენებულია,display: inline-block
რათა დაუშვასmargin
გამოყენება.<input>
s,<select>
s,<textarea>
s და<button>
s ძირითადად მიმართულია Normalize-ით, მაგრამ Reboot აშორებს მათmargin
და აყენებსline-height: inherit
ასევე.<textarea>
s მოდიფიცირებულია მხოლოდ ვერტიკალურად, რადგან ჰორიზონტალური ზომის შეცვლა ხშირად „არღვევს“ გვერდის განლაგებას.<button>
s და<input>
ღილაკის ელემენტებს აქვთcursor: pointer
როცა:not(:disabled)
.
ეს ცვლილებები და სხვა, ნაჩვენებია ქვემოთ.
მაჩვენებლები ღილაკებზე
გადატვირთვა მოიცავს გაფართოებას role="button"
ნაგულისხმევი კურსორის შეცვლაზე pointer
. დაამატეთ ეს ატრიბუტი ელემენტებს, რათა დაგეხმაროთ მიუთითოთ ელემენტები ინტერაქტიული. ეს როლი არ არის აუცილებელი <button>
ელემენტებისთვის, რომლებიც იღებენ საკუთარ cursor
ცვლილებას.
<span role="button" tabindex="0">Non-button element button</span>
სხვადასხვა ელემენტები
მისამართი
<address>
ელემენტი განახლებულია ბრაუზერის ნაგულისხმევი font-style
გადატვირთვის italic
მიზნით . ასევე არის მემკვიდრეობით მიღებული და დაემატა. s არის უახლოესი წინაპრის (ან მთელი ნამუშევრის) საკონტაქტო ინფორმაციის წარდგენისთვის. შეინახეთ ფორმატირება ხაზების დამთავრებით .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 სრული სახელი
[email protected]
დაბლოკვის ციტატა
ბლოკციტატების ნაგულისხმევი margin
არის 1em 40px
, ასე რომ, ჩვენ აღვადგენთ 0 0 1rem
მას სხვა ელემენტებთან უფრო შესაბამისობაში.
ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.
ინლაინ ელემენტები
ელემენტი იღებს ძირითად <abbr>
სტილს, რათა გამოირჩეოდეს აბზაცის ტექსტს შორის.
Შემაჯამებელი
cursor
შეჯამების ნაგულისხმევი არის text
, ასე რომ, ჩვენ გადავაყენებთ მას, pointer
რათა მივცეთ, რომ ელემენტთან შეიძლება ურთიერთქმედება მასზე დაწკაპუნებით.
ზოგიერთი დეტალი
დამატებითი ინფორმაცია დეტალების შესახებ.
კიდევ უფრო დეტალურად
აქ არის კიდევ უფრო მეტი დეტალი დეტალების შესახებ.
HTML5 [hidden]
ატრიბუტი
HTML5 ამატებს ახალ გლობალურ ატრიბუტს სახელად[hidden]
, რომელიც არის ნაგულისხმევად სტილიზებული display: none
. PureCSS-ისგან იდეის სესხის აღებით , ჩვენ ვაუმჯობესებთ ამ ნაგულისხმევს [hidden] { display: none !important; }
, რათა თავიდან ავიცილოთ მისი display
შემთხვევითი გადაფარვა. მიუხედავად იმისა [hidden]
, რომ არ არის მხარდაჭერილი IE10-ის მიერ, ჩვენს CSS-ში გამოკვეთილი დეკლარაცია ამ პრობლემას აგვარებს.
<input type="text" hidden>
jQuery შეუთავსებლობა
[hidden]
არ არის თავსებადი jQuery-სთან $(...).hide()
და $(...).show()
მეთოდებთან. ამიტომ, ჩვენ ამჟამად განსაკუთრებით არ ვადასტურებთ ელემენტების [hidden]
მართვის სხვა ტექნიკას .display
ელემენტის მხოლოდ ხილვადობის გადასართავად, რაც იმას ნიშნავს, რომ display
ის არ არის შეცვლილი და ელემენტს კვლავ შეუძლია გავლენა მოახდინოს დოკუმენტის ნაკადზე, გამოიყენეთ .invisible
კლასი .