გადატვირთვა
გადატვირთვა, ელემენტის სპეციფიკური CSS ცვლილებების კრებული ერთ ფაილში, ამუშავებს Bootstrap-ს, რათა უზრუნველყოს ელეგანტური, თანმიმდევრული და მარტივი საბაზისო სლაინი.
მიდგომა
გადატვირთვა ეფუძნება ნორმალიზებას, რაც უზრუნველყოფს ბევრ HTML ელემენტს გარკვეულწილად შეფასებული სტილებით, მხოლოდ ელემენტების სელექტორების გამოყენებით. დამატებითი სტილის გაკეთება ხდება მხოლოდ კლასებით. მაგალითად, ჩვენ გადავტვირთავთ ზოგიერთ <table>
სტილს უფრო მარტივი საბაზისო ხაზისთვის და მოგვიანებით ვაძლევთ .table
, .table-bordered
, და სხვას.
აქ არის ჩვენი სახელმძღვანელო მითითებები და მიზეზები, თუ რა უნდა გადატვირთოთ გადატვირთვისას:
- განაახლეთ ზოგიერთი ბრაუზერის ნაგულისხმევი მნიშვნელობები, რათა გამოიყენოთ
rem
s ნაცვლადem
s მასშტაბირებადი კომპონენტების დაშორებისთვის. - მოერიდეთ
margin-top
. ვერტიკალური მინდვრები შეიძლება დაიშალოს, რაც მოულოდნელ შედეგებს გამოიღებს. რაც მთავარია, ერთი მიმართულებაmargin
უფრო მარტივი გონებრივი მოდელია. - მოწყობილობების ზომებში უფრო ადვილი სკალირების მიზნით, ბლოკის ელემენტებმა უნდა გამოიყენონ
rem
s formargin
s. - შეინახეთ დაკავშირებული თვისებების დეკლარაციები
font
მინიმუმამდე, გამოიყენეთinherit
შეძლებისდაგვარად.
CSS ცვლადები
დამატებულია v5.1.1-ში
v5.1.1-ით, ჩვენ სტანდარტიზებული გვაქვს ჩვენი საჭირო @import
s ყველა ჩვენს CSS პაკეტში (მათ შორის bootstrap.css
, bootstrap-reboot.css
, და bootstrap-grid.css
მოიცავს _root.scss
. ეს ამატებს :root
დონის CSS ცვლადებს ყველა პაკეტში, მიუხედავად იმისა, თუ რამდენი მათგანია გამოყენებული ამ პაკეტში. საბოლოო ჯამში, Bootstrap 5 გაგრძელდება იხილეთ მეტი CSS ცვლადი დამატებული დროთა განმავლობაში.
გვერდის ნაგულისხმევი
და <html>
ელემენტები <body>
განახლებულია, რათა უზრუნველყოს უკეთესი გვერდის ნაგულისხმევი პარამეტრები. Უფრო კონკრეტულად:
- გლობალურად
box-sizing
დაყენებულია ყველა ელემენტზე — მათ შორის*::before
და . ეს უზრუნველყოფს, რომ ელემენტის დეკლარირებული სიგანე არასოდეს გადააჭარბოს ბალიშის ან საზღვრის გამო.*::after
border-box
- ბაზაზე
font-size
არ არის გამოცხადებული<html>
, მაგრამ16px
ვარაუდია (ბრაუზერის ნაგულისხმევი).font-size: 1rem
გამოიყენება<body>
მედიის მოთხოვნების საშუალებით ადვილად საპასუხო ტიპის სკალირებისთვის, მომხმარებლის პრეფერენციების დაცვით და უფრო ხელმისაწვდომი მიდგომის უზრუნველსაყოფად.$font-size-root
ამ ბრაუზერის ნაგულისხმევი გადალახვა შესაძლებელია ცვლადის შეცვლით .
- ბაზაზე
- ასევე
<body>
ადგენს გლობალურfont-family
,font-weight
,line-height
დაcolor
. ეს მოგვიანებით მემკვიდრეობით მიიღება ზოგიერთი ფორმის ელემენტებით, რათა თავიდან იქნას აცილებული შრიფტების შეუსაბამობა. - უსაფრთხოებისთვის, მას
<body>
აქვს გამოცხადებულიbackground-color
, ნაგულისხმევი#fff
.
მშობლიური შრიფტის დასტა
Bootstrap იყენებს "მშობლიური შრიფტების დასტას" ან "სისტემის შრიფტების დასტას" ტექსტის ოპტიმალური რენდერისთვის ყველა მოწყობილობასა და ოპერაციულ სისტემაზე. ეს სისტემური შრიფტები შექმნილია სპეციალურად დღევანდელი მოწყობილობების გათვალისწინებით, ეკრანებზე გაუმჯობესებული რენდერით, ცვლადი შრიფტების მხარდაჭერით და სხვა. წაიკითხეთ მეტი მშობლიური შრიფტის სტეკების შესახებ Smashing Magazine- ის სტატიაში .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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.
CSS ცვლადები
როგორც Bootstrap 5 აგრძელებს მომწიფებას, უფრო და უფრო მეტი სტილი აშენდება CSS ცვლადებით , როგორც საშუალება, რათა უზრუნველყოს მეტი რეალურ დროში დაკონფიგურირება Sass-ის ყოველთვის ხელახალი კომპილაციის საჭიროების გარეშე. ჩვენი მიდგომაა ავიღოთ ჩვენი წყარო Sass ცვლადები და გარდაქმნათ ისინი CSS ცვლადებად. ამ გზით, მაშინაც კი, თუ არ იყენებთ CSS ცვლადებს, თქვენ მაინც გაქვთ Sass-ის მთელი ძალა. ეს ჯერ კიდევ მიმდინარეობს და სრულყოფილად განხორციელებას დრო დასჭირდება.
მაგალითად, განიხილეთ ეს :root
CSS ცვლადები საერთო <body>
სტილისთვის:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
პრაქტიკაში, ეს ცვლადები შემდეგ გამოიყენება გადატვირთვაში შემდეგნაირად:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
რაც საშუალებას გაძლევთ რეალურ დროში გააკეთოთ პერსონალიზაცია, როგორც გსურთ:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
სათაურები და აბზაცები
სათაურის ყველა ელემენტი - მაგ., <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
. ჩვენ ასევე გადავაყენეთ ჩართვა padding-left
და <ul>
ელემენტები <ol>
.
- ყველა სიას მოხსნილია ზედა ზღვარი
- და მათი ქვედა ზღვარი ნორმალიზდება
- ჩადგმულ სიებს არ აქვთ ქვედა ზღვარი
- ამ გზით მათ უფრო თანაბარი გარეგნობა აქვთ
- განსაკუთრებით მაშინ, როდესაც მოჰყვება მეტი სიის ელემენტი
- მარცხენა ბალიშიც გადატვირთულია
- აქ არის შეკვეთილი სია
- სიის რამდენიმე ელემენტით
- მას აქვს იგივე საერთო სახე
- როგორც წინა დაუგეგმავი სია
უფრო მარტივი სტილის, მკაფიო იერარქიისა და უკეთესი ინტერვალისთვის, აღწერილობის სიები განახლებულია margin
s. <dd>
გადატვირთეთ margin-left
და 0
დაამატეთ margin-bottom: .5rem
. გაბედულია . <dt>
_
- აღწერილობის სიები
- აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
- ვადა
- ტერმინის განმარტება.
- მეორე განმარტება იმავე ტერმინისთვის.
- კიდევ ერთი ტერმინი
- ამ სხვა ტერმინის განმარტება.
ინლაინ კოდი
შეფუთეთ კოდის შიდა ნაწყვეტები <code>
. დარწმუნდით, რომ გაექცეთ HTML კუთხის ფრჩხილებს.
<section>
უნდა იყოს შეფუთული როგორც inline.
For example, <code><section></code> should be wrapped as inline.
კოდის ბლოკები
გამოიყენეთ <pre>
s კოდის მრავალი ხაზისთვის. კიდევ ერთხელ, დარწმუნდით, რომ გამორთეთ კოდში ნებისმიერი კუთხის ფრჩხილები სათანადო რენდერისთვის. <pre>
ელემენტი გადატვირთულია მისი ამოსაშლელად და მისი ერთეულების გამოყენების margin-top
მიზნით .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
ცვლადები
ცვლადების მითითებისთვის გამოიყენეთ <var>
ტეგი.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
მომხმარებლის შეყვანა
გამოიყენეთ <kbd>
კლავიატურის საშუალებით შეყვანილი შეყვანის მითითება.
პარამეტრების რედაქტირებისთვის დააჭირეთ ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
ნიმუშის გამომავალი
პროგრამიდან ნიმუშის გამოსავლის მითითებისთვის გამოიყენეთ <samp>
ტეგი.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
მაგიდები
ცხრილები ოდნავ მორგებულია <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)
.
ეს ცვლილებები და სხვა, ნაჩვენებია ქვემოთ.
თარიღისა და ფერის შეყვანის მხარდაჭერა
გაითვალისწინეთ, რომ თარიღის შეყვანა სრულად არ არის მხარდაჭერილი ყველა ბრაუზერის, კერძოდ Safari-ის მიერ.
მაჩვენებლები ღილაკებზე
გადატვირთვა მოიცავს გაფართოებას 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
შემთხვევითი გადაფარვა.
<input type="text" hidden>
jQuery შეუთავსებლობა
[hidden]
არ არის თავსებადი jQuery-სთან $(...).hide()
და $(...).show()
მეთოდებთან. ამიტომ, ჩვენ ამჟამად განსაკუთრებით არ ვადასტურებთ ელემენტების [hidden]
მართვის სხვა ტექნიკას .display
ელემენტის მხოლოდ ხილვადობის გადასართავად, რაც იმას ნიშნავს, რომ display
ის არ არის შეცვლილი და ელემენტს კვლავ შეუძლია გავლენა მოახდინოს დოკუმენტის ნაკადზე, გამოიყენეთ .invisible
კლასი .