გადატვირთვა

გადატვირთვა, ელემენტის სპეციფიკური 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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ეს 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.

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
ენეან იჯდეს ამეთ ერატ ნუნც
ეგეთი პორტტიტორი ლორემი

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
მთელი რიცხვი molestie lorem at massa
გამარტივება პრეტიუმ ნისლ ალიკეტში
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
ენეან იჯდეს ამეთ ერატ ნუნც
ეგეთი პორტტიტორი ლორემი

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

აღწერილობის სიები: აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
ევისმოდი: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

<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მას სხვა ელემენტებთან უფრო შესაბამისობაში.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante.

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

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

ელემენტი იღებს ძირითად <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კლასი .