გადატვირთვა

გადატვირთვა, ელემენტის სპეციფიკური CSS ცვლილებების კრებული ერთ ფაილში, ამუშავებს Bootstrap-ს, რათა უზრუნველყოს ელეგანტური, თანმიმდევრული და მარტივი საბაზისო სლაინი.

მიდგომა

გადატვირთვა ეფუძნება ნორმალიზებას, რაც უზრუნველყოფს ბევრ HTML ელემენტს გარკვეულწილად შეფასებული სტილებით, მხოლოდ ელემენტების სელექტორების გამოყენებით. დამატებითი სტილის გაკეთება ხდება მხოლოდ კლასებით. მაგალითად, ჩვენ გადავტვირთავთ ზოგიერთ <table>სტილს უფრო მარტივი საბაზისო ხაზისთვის და მოგვიანებით ვაძლევთ .table, .table-bordered, და სხვას.

აქ არის ჩვენი სახელმძღვანელო მითითებები და მიზეზები, თუ რა უნდა გადატვირთოთ გადატვირთვისას:

განაახლეთ ზოგიერთი ბრაუზერის ნაგულისხმევი მნიშვნელობები, რათა გამოიყენოთ rems ნაცვლად ems მასშტაბირებადი კომპონენტების დაშორებისთვის.
მოერიდეთ margin-top. ვერტიკალური მინდვრები შეიძლება დაიშალოს, რაც მოულოდნელ შედეგებს გამოიღებს. რაც მთავარია, ერთი მიმართულება marginუფრო მარტივი გონებრივი მოდელია.
მოწყობილობების ზომებში უფრო ადვილი სკალირების მიზნით, ბლოკის ელემენტებმა უნდა გამოიყენონ rems for margins.
შეინახეთ დაკავშირებული თვისებების დეკლარაციები fontმინიმუმამდე, გამოიყენეთ inheritშეძლებისდაგვარად.

გვერდის ნაგულისხმევი

და <html>ელემენტები <body>განახლებულია, რათა უზრუნველყოს უკეთესი გვერდის ნაგულისხმევი პარამეტრები. Უფრო კონკრეტულად:

გლობალურად box-sizingდაყენებულია ყველა ელემენტზე — მათ შორის *::beforeდა . ეს უზრუნველყოფს, რომ ელემენტის დეკლარირებული სიგანე არასოდეს გადააჭარბოს ბალიშის ან საზღვრის გამო.*::afterborder-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.

ყველა სიას მოხსნილია ზედა ზღვარი
და მათი ქვედა ზღვარი ნორმალიზდება
ჩადგმულ სიებს არ აქვთ ქვედა ზღვარი
- ამ გზით მათ უფრო თანაბარი გარეგნობა აქვთ
- განსაკუთრებით მაშინ, როდესაც მოჰყვება მეტი სიის ელემენტი
მარცხენა ბალიშიც გადატვირთულია

აქ არის შეკვეთილი სია
სიის რამდენიმე ელემენტით
მას აქვს იგივე საერთო სახე
როგორც წინა დაუგეგმავი სია

უფრო მარტივი სტილის, მკაფიო იერარქიისა და უკეთესი ინტერვალისთვის, აღწერილობის სიები განახლებულია margins. <dd>გადატვირთეთ margin-leftდა 0დაამატეთ margin-bottom: .5rem. გაბედულია . <dt>_

აღწერილობის სიები: აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
ვადა: ტერმინის განმარტება.; მეორე განმარტება იმავე ტერმინისთვის.
კიდევ ერთი ტერმინი: ამ სხვა ტერმინის განმარტება.

წინასწარ ფორმატირებული ტექსტი

<pre>ელემენტი გადატვირთულია მისი ამოსაშლელად და მისი ერთეულების გამოყენების margin-topმიზნით .remmargin-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).

ეს ცვლილებები და სხვა, ნაჩვენებია ქვემოთ.

ლეგენდის მაგალითი

შეყვანის მაგალითი

აირჩიეთ მაგალითი

მონიშნეთ ეს ველი

პირველი ვარიანტი არის ეს და ეს ვარიანტი მეორე არის კიდევ რაღაც, რომელიც ასევე ძალიან გრძელია ამ ლამაზი ფორმის კონტროლის შეფუთვის დემონსტრირებისთვის. ვარიანტი სამი გამორთულია

ტექსტური არეალის მაგალითი

მაგალითი თარიღი

მაგალითი დრო

მაგალითი გამომავალი 100

მაჩვენებლები ღილაკებზე

გადატვირთვა მოიცავს გაფართოებას role="button"ნაგულისხმევი კურსორის შეცვლაზე pointer. დაამატეთ ეს ატრიბუტი ელემენტებს, რათა დაგეხმაროთ მიუთითოთ ელემენტები ინტერაქტიული. ეს როლი არ არის აუცილებელი <button>ელემენტებისთვის, რომლებიც იღებენ საკუთარ cursorცვლილებას.

ელემენტის არაღილაკების ღილაკი

<span role="button" tabindex="0">Non-button element button</span>

სხვადასხვა ელემენტები

მისამართი

<address>ელემენტი განახლებულია ბრაუზერის ნაგულისხმევი font-styleგადატვირთვის italicმიზნით . ასევე არის მემკვიდრეობით მიღებული და დაემატა. s არის უახლოესი წინაპრის (ან მთელი ნამუშევრის) საკონტაქტო ინფორმაციის წარდგენისთვის. შეინახეთ ფორმატირება ხაზების დამთავრებით .normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

სრული სახელი
[email protected]

დაბლოკვის ციტატა

ბლოკციტატების ნაგულისხმევი marginარის 1em 40px, ასე რომ, ჩვენ აღვადგენთ 0 0 1remმას სხვა ელემენტებთან უფრო შესაბამისობაში.

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

ვინმე ცნობილი წყაროს სათაურში

ინლაინ ელემენტები

ელემენტი იღებს ძირითად <abbr>სტილს, რათა გამოირჩეოდეს აბზაცის ტექსტს შორის.

Nulla attr vitae elit libero, pharetra augue.

Შემაჯამებელი

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კლასი .