in English

გადატვირთვა

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

ამ გვერდზე

მიდგომა

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

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

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

CSS ცვლადები

დამატებულია v5.2.0-ში

v5.1.1-ით, ჩვენ სტანდარტიზებული გვაქვს ჩვენი საჭირო @imports-ები ყველა ჩვენს CSS პაკეტში (მათ შორის bootstrap.css, bootstrap-reboot.css, და bootstrap-grid.css) ჩართვისთვის _root.scss. ეს ამატებს :rootდონის CSS ცვლადებს ყველა პაკეტს, მიუხედავად იმისა, თუ რამდენი მათგანია გამოყენებული ამ პაკეტში. საბოლოო ჯამში, Bootstrap 5 გააგრძელებს დროთა განმავლობაში დამატებულ CSS ცვლადებს , რათა უზრუნველყოს მეტი რეალურ დროში პერსონალიზაცია Sass-ის ყოველთვის ხელახალი შედგენის საჭიროების გარეშე. ჩვენი მიდგომაა ავიღოთ ჩვენი წყარო Sass ცვლადები და გარდაქმნათ ისინი CSS ცვლადებად. ამ გზით, მაშინაც კი, თუ არ იყენებთ CSS ცვლადებს, თქვენ მაინც გაქვთ Sass-ის მთელი ძალა. ეს ჯერ კიდევ მიმდინარეობს და სრულყოფილად განხორციელებას დრო დასჭირდება.

მაგალითად, განიხილეთ ეს :rootCSS ცვლადები საერთო <body>სტილისთვის:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

პრაქტიკაში, ეს ცვლადები შემდეგ გამოიყენება გადატვირთვაში შემდეგნაირად:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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

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

გლობალურად box-sizingდაყენებულია ყველა ელემენტზე — მათ შორის *::beforeდა . ეს უზრუნველყოფს, რომ ელემენტის დეკლარირებული სიგანე არასოდეს გადააჭარბოს ბალიშის ან საზღვრის გამო. *::afterborder-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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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. ჩატვირთვის სათაური

ჰორიზონტალური წესები

<hr>ელემენტი გამარტივდა . ბრაუზერის ნაგულისხმევი ნაგულისხმევის მსგავსად, <hr>s არის სტილიზებული via-ით border-top, აქვს ნაგულისხმევი opacity: .25და ავტომატურად მემკვიდრეობით მიიღება მათი border-colorმეშვეობით color, მათ შორის, როდესაც colorდაყენებულია მშობლის მეშვეობით. მათი შეცვლა შესაძლებელია ტექსტის, საზღვრებისა და გამჭვირვალობის უტილიტებით.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

სიები

ყველა სია — <ul>, <ol>, და <dl>— margin-topწაშლილია და a margin-bottom: 1rem. ჩადგმულ სიებს არ აქვთ margin-bottom. ჩვენ ასევე გადავაყენეთ ჩართვა padding-leftდა <ul>ელემენტები <ol>.

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

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

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

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

ინლაინ კოდი

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

მაგალითად, <section>უნდა იყოს შეფუთული როგორც inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

კოდის ბლოკები

გამოიყენეთ <pre>s კოდის მრავალი ხაზისთვის. კიდევ ერთხელ, დარწმუნდით, რომ გამორთეთ კოდში ნებისმიერი კუთხის ფრჩხილები სათანადო რენდერისთვის. <pre>ელემენტი გადატვირთულია მისი ამოსაშლელად და მისი ერთეულების გამოყენების margin-topმიზნით .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

ცვლადები

ცვლადების მითითებისთვის გამოიყენეთ <var>ტეგი.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

მომხმარებლის შეყვანა

გამოიყენეთ <kbd>კლავიატურის საშუალებით შეყვანილი შეყვანის მითითება.

დირექტორიების გადასართავად, აკრიფეთ cdდირექტორიას სახელი.
პარამეტრების რედაქტირებისთვის დააჭირეთ ctrl + ,

html

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>ტეგი.

ეს ტექსტი განიხილება, როგორც კომპიუტერული პროგრამის ნიმუშის გამომავალი.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

მაგიდები

ცხრილები ოდნავ მორგებულია <caption>s სტილზე, იშლება საზღვრები და უზრუნველყოფს თანმიმდევრულობას text-align. კლასს მოჰყვება დამატებითი ცვლილებები.table საზღვრებისთვის, ბალიშებისთვის და სხვა .

ეს არის ცხრილის მაგალითი და ეს არის მისი წარწერა შინაარსის აღსაწერად.
მაგიდის სათაური	მაგიდის სათაური	მაგიდის სათაური	მაგიდის სათაური
მაგიდის უჯრედი	მაგიდის უჯრედი	მაგიდის უჯრედი	მაგიდის უჯრედი
მაგიდის უჯრედი	მაგიდის უჯრედი	მაგიდის უჯრედი	მაგიდის უჯრედი
მაგიდის უჯრედი	მაგიდის უჯრედი	მაგიდის უჯრედი	მაგიდის უჯრედი

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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).

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

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

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

ელ.ფოსტის მაგალითი

ტელეფონის მაგალითი

მაგალითი url

მაგალითი ნომერი

მაგალითის ძებნა

მაგალითი დიაპაზონი

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

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

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

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

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

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

მაგალითი დრო

პაროლის მაგალითი

მაგალითი datetime-local

მაგალითი კვირა

მაგალითი თვე

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

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

თარიღისა და ფერის შეყვანის მხარდაჭერა

გაითვალისწინეთ, რომ თარიღის შეყვანა სრულად არ არის მხარდაჭერილი ყველა ბრაუზერის, კერძოდ Safari-ის მიერ.

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

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

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

html

<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>სტილს, რათა გამოირჩეოდეს აბზაცის ტექსტს შორის.

HTML აბრევიატურა ელემენტი .

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

ნაგულისხმევი 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კლასი .

გადატვირთვა

მიდგომა

CSS ცვლადები

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

მშობლიური შრიფტის დასტა

სათაურები და აბზაცები

ჰორიზონტალური წესები

სიები

ინლაინ კოდი

კოდის ბლოკები

ცვლადები

მომხმარებლის შეყვანა

ნიმუშის გამომავალი

მაგიდები

ფორმები

თარიღისა და ფერის შეყვანის მხარდაჭერა

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

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

მისამართი

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

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

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

HTML5 [hidden]ატრიბუტი

jQuery შეუთავსებლობა

HTML5 `[hidden]`ატრიბუტი