მიმოხილვა

მიიღეთ დაბალი დონე Bootstrap-ის ინფრასტრუქტურის ძირითადი ნაწილების შესახებ, მათ შორის ჩვენი მიდგომის უკეთესი, სწრაფი და ძლიერი ვებ განვითარების მიმართ.

HTML5 დოქტიპი

Bootstrap იყენებს გარკვეულ HTML ელემენტებს და CSS თვისებებს, რომლებიც მოითხოვს HTML5 დოქტიპის გამოყენებას. ჩართეთ იგი ყველა თქვენი პროექტის დასაწყისში.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

მობილური ჯერ

Bootstrap 2-ით, ჩვენ დავამატეთ არჩევითი მობილური მეგობრული სტილები ჩარჩოს ძირითადი ასპექტებისთვის. Bootstrap 3-ით, ჩვენ გადავწერეთ პროექტი, რათა თავიდანვე იყოს მობილურებისთვის მოსახერხებელი. არჩევითი მობილური სტილის დამატების ნაცვლად, ისინი ცხვება პირდაპირ ბირთვში. სინამდვილეში, Bootstrap არის მობილური პირველი . მობილური პირველი სტილის ნახვა შესაძლებელია მთელ ბიბლიოთეკაში, ცალკე ფაილების ნაცვლად.

სათანადო რენდერისა და შეხებით მასშტაბირების უზრუნველსაყოფად, დაამატეთ ხედვის პორტის მეტათეგი თქვენს <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

თქვენ შეგიძლიათ გამორთოთ მასშტაბირების შესაძლებლობები მობილურ მოწყობილობებზე user-scalable=noხედვის პორტის მეტა ტეგზე დამატებით. ეს გათიშავს მასშტაბირებას, რაც ნიშნავს, რომ მომხმარებლებს შეუძლიათ მხოლოდ გადახვევა და შედეგად თქვენი საიტი უფრო მეტად ჰგავს მშობლიურ აპლიკაციას. საერთო ჯამში, ჩვენ ამას არ გირჩევთ ყველა საიტზე, ამიტომ იყავით სიფრთხილით!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap ადგენს ძირითად გლობალურ ჩვენებას, ტიპოგრაფიას და ბმულის სტილებს. კონკრეტულად ჩვენ:

  • დააყენეთ background-color: #fff;_body
  • გამოიყენეთ @font-family-base, @font-size-base, და @line-height-baseატრიბუტები ჩვენს ტიპოგრაფიულ ბაზად
  • დააყენეთ გლობალური ბმულის ფერი მეშვეობით @link-colorდა გამოიყენეთ ბმულის ხაზგასმა მხოლოდ:hover

ეს სტილები შეგიძლიათ იხილოთ შიგნით scaffolding.less.

ნორმალიზება.css

ბრაუზერებს შორის გაუმჯობესებული რენდერინგისთვის, ჩვენ ვიყენებთ Normalize.css- ს, ნიკოლას გალაჰერის და ჯონათან ნილის პროექტს .

კონტეინერები

Bootstrap მოითხოვს შემცველ ელემენტს საიტის შიგთავსის შესაფუთად და ჩვენი ქსელის სისტემის განსათავსებლად. თქვენ შეგიძლიათ აირჩიოთ ორი კონტეინერიდან ერთ-ერთი თქვენს პროექტებში გამოსაყენებლად. გაითვალისწინეთ, რომ paddingდა უფრო მეტის გამო, არც ერთი კონტეინერი არ არის მობუდარი.

გამოიყენეთ .containerსაპასუხო ფიქსირებული სიგანის კონტეინერისთვის.

<div class="container">
  ...
</div>

გამოიყენეთ .container-fluidსრული სიგანის კონტეინერისთვის, რომელიც მოიცავს თქვენი ხედის მთელ სიგანეს.

<div class="container-fluid">
  ...
</div>

ბადის სისტემა

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

შესავალი

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

  • რიგები უნდა განთავსდეს .container(ფიქსირებული სიგანის) ან .container-fluid(სრული სიგანის) ფარგლებში სათანადო გასწორებისა და ბალიშისთვის.
  • გამოიყენეთ რიგები სვეტების ჰორიზონტალური ჯგუფების შესაქმნელად.
  • კონტენტი უნდა განთავსდეს სვეტებში და მხოლოდ სვეტები შეიძლება იყოს მწკრივების უშუალო შვილი.
  • წინასწარ განსაზღვრული ბადის კლასები მოსწონს .rowდა .col-xs-4ხელმისაწვდომია ქსელის განლაგების სწრაფად შესაქმნელად. ნაკლები მიქსინები ასევე შეიძლება გამოყენებულ იქნას უფრო სემანტიკური განლაგებისთვის.
  • სვეტები ქმნიან ღრძილებს (უფსკრული სვეტების შინაარსს შორის) მეშვეობით padding. ეს padding ოფსეტურია რიგებში პირველი და ბოლო სვეტისთვის .rows-ზე უარყოფითი ზღვრის მეშვეობით.
  • უარყოფითი ზღვარი არის ის, თუ რატომ არის ქვემოთ მოცემული მაგალითები. ეს ასეა, რომ შიგთავსი ქსელის სვეტებში გაფორმებულია არა ბადის შემცველობით.
  • ბადის სვეტები იქმნება თორმეტი ხელმისაწვდომი სვეტის რაოდენობის მითითებით, რომელთა გაფართოვებაც გსურთ. მაგალითად, სამი თანაბარი სვეტი გამოიყენებს სამს .col-xs-4.
  • თუ 12-ზე მეტი სვეტი მოთავსებულია ერთ მწკრივში, დამატებითი სვეტების თითოეული ჯგუფი, როგორც ერთი ერთეული, გადაიჭრება ახალ ხაზში.
  • ბადის კლასები ვრცელდება მოწყობილობებზე, რომელთა ეკრანის სიგანე აღემატება ან ტოლია წყვეტის წერტილების ზომებს და უგულებელყოფს ბადის კლასებს, რომლებიც გამიზნულია პატარა მოწყობილობებზე. ამიტომ, მაგ., რომელიმე .col-md-*კლასის ელემენტზე გამოყენება გავლენას მოახდენს არა მხოლოდ მის სტილზე საშუალო მოწყობილობებზე, არამედ დიდ მოწყობილობებზეც, თუ .col-lg-*კლასი არ არის.

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

მედიის შეკითხვები

ჩვენ ვიყენებთ შემდეგ მედია მოთხოვნებს ჩვენს Less ფაილებში, რათა შევქმნათ ძირითადი წყვეტის წერტილები ჩვენს ქსელურ სისტემაში.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ჩვენ პერიოდულად ვაფართოებთ ამ მედია მოთხოვნებს, max-widthრათა შევიტანოთ CSS მოწყობილობების ვიწრო ნაკრებით შეზღუდვა.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ბადის პარამეტრები

ნახეთ, როგორ მუშაობს Bootstrap ქსელის სისტემის ასპექტები მრავალ მოწყობილობაზე მოსახერხებელი ცხრილით.

დამატებითი პატარა მოწყობილობები ტელეფონები (<768 პიქსელი) მცირე მოწყობილობების ტაბლეტები (≥768 პიქსელი) საშუალო მოწყობილობების დესკტოპები (≥992 პიქსელი) დიდი მოწყობილობების დესკტოპები (≥1200px)
ბადის ქცევა ჰორიზონტალური ნებისმიერ დროს ჩაკეცილია დასაწყებად, ჰორიზონტალურად წყვეტის წერტილების ზემოთ
კონტეინერის სიგანე არცერთი (ავტო) 750 პიქსელი 970 პიქსელი 1170 პიქსელი
კლასის პრეფიქსი .col-xs- .col-sm- .col-md- .col-lg-
სვეტების # 12
სვეტის სიგანე ავტო ~ 62 პიქსელი ~ 81 პიქსელი ~ 97 პიქსელი
ღუმელის სიგანე 30 პიქსელი (15 პიქსელი სვეტის თითოეულ მხარეს)
ბუდე დიახ
ოფსეტები დიახ
სვეტების შეკვეთა დიახ

მაგალითი: დაწყობილი ჰორიზონტალური

ბადის კლასების ერთი ნაკრების გამოყენებით .col-md-*, შეგიძლიათ შექმნათ ძირითადი ბადის სისტემა, რომელიც იწყება მობილურ მოწყობილობებზე და პლანშეტ მოწყობილობებზე (ზედმეტად მცირე და მცირე დიაპაზონი), სანამ ჰორიზონტალური გახდება დესკტოპის (საშუალო) მოწყობილობებზე. მოათავსეთ ბადის სვეტები ნებისმიერში .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

მაგალითი: სითხის კონტეინერი

.containerგადააქციეთ ნებისმიერი ფიქსირებული სიგანის ბადის განლაგება სრული სიგანის განლაგებად , თქვენი ყველაზე გარე შეცვლით .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

მაგალითი: მობილური და დესკტოპი

არ გსურთ თქვენი სვეტები უბრალოდ დაწყობილი იყოს პატარა მოწყობილობებში? გამოიყენეთ დამატებითი მცირე და საშუალო მოწყობილობების ბადის კლასები .col-xs-* .col-md-*თქვენი სვეტების დამატებით. იხილეთ მაგალითი ქვემოთ, რომ უკეთ გაიგოთ, თუ როგორ მუშაობს ეს ყველაფერი.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

მაგალითი: მობილური, ტაბლეტი, დესკტოპი

დაეყრდენით წინა მაგალითს, კიდევ უფრო დინამიური და ძლიერი განლაგების შექმნით ტაბლეტების .col-sm-*კლასებით.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

მაგალითი: სვეტის შეფუთვა

თუ 12-ზე მეტი სვეტი მოთავსებულია ერთ მწკრივში, დამატებითი სვეტების თითოეული ჯგუფი, როგორც ერთი ერთეული, გადაიჭრება ახალ ხაზში.

.col-xs-9
.col-xs-4
მას შემდეგ, რაც 9 + 4 = 13 > 12, ეს 4-სვეტის სიგანის div ხვდება ახალ ხაზზე, როგორც ერთი მიმდებარე ერთეული.
.col-xs-6 შემდეგი
სვეტები გრძელდება ახალი ხაზის გასწვრივ. 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

საპასუხო სვეტის გადატვირთვა

ბადეების ოთხი ფენით, თქვენ აუცილებლად წააწყდებით საკითხებს, როდესაც გარკვეულ წყვეტის წერტილებში თქვენი სვეტები კარგად არ იშლება, რადგან ერთი მეორეზე მაღალია. ამის გამოსასწორებლად გამოიყენეთ a .clearfixდა ჩვენი საპასუხო კომუნალური კლასების კომბინაცია .

.col-xs-6 .col-sm-3 შეცვალეთ
თქვენი ხედის ზომა ან შეამოწმეთ იგი თქვენს ტელეფონზე, მაგალითად.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

სვეტების გასუფთავების გარდა პასუხისმგებელი წყვეტების წერტილებზე, შეიძლება დაგჭირდეთ გადატვირთვა ოფსეტების, ბიძგების ან გაყვანის . იხილეთ ეს მოქმედებაში ბადის მაგალითში .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ოფსეტური სვეტები

გადაიტანეთ სვეტები მარჯვნივ .col-md-offset-*კლასების გამოყენებით. ეს კლასები ზრდის სვეტის მარცხენა ზღვარს *სვეტების მიხედვით. მაგალითად, .col-md-offset-4მოძრაობს .col-md-4ოთხ სვეტზე.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

თქვენ ასევე შეგიძლიათ უგულებელყოთ ოფსეტები ქვედა ბადის იარუსებიდან .col-*-offset-0კლასებით.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

მობუდული სვეტები

თქვენი შინაარსის ნაგულისხმევ ბადეში ჩასართავად დაამატეთ ახალი .rowდა .col-sm-*სვეტების ნაკრები არსებულ .col-sm-*სვეტში. ჩადგმული რიგები უნდა შეიცავდეს სვეტების ერთობლიობას, რომლებიც ემატება 12-მდე ან ნაკლებს (არ არის საჭირო, რომ გამოიყენოთ 12-ვე ხელმისაწვდომი სვეტი).

დონე 1: .col-sm-9
დონე 2: .col-xs-8 .col-sm-6
დონე 2: .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

სვეტების შეკვეთა

მარტივად შეცვალეთ ჩვენი ჩაშენებული ბადის სვეტების თანმიმდევრობა .col-md-push-*და .col-md-pull-*მოდიფიკატორი კლასებით.

.კოლ-მდ-9 .კოლ-მდ-პუშ-3
.col-md-3 .col-md-pull-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ნაკლები მიქსები და ცვლადები

სწრაფი განლაგებისთვის წინასწარ ჩაშენებული ბადის კლასების გარდა , Bootstrap მოიცავს Less ცვლადებს და მიქსებს თქვენი მარტივი, სემანტიკური განლაგების სწრაფად შესაქმნელად.

ცვლადები

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

მიქსინები

მიქსინები გამოიყენება ბადის ცვლადებთან ერთად სემანტიკური CSS-ის გენერირებისთვის ცალკეული ბადის სვეტებისთვის.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

გამოყენების მაგალითი

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ტიპოგრაფია

სათაურები

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

h1. ჩატვირთვის სათაური

 ნახევრად თამამი 36 პიქსელი

h2. ჩატვირთვის სათაური

 ნახევრად თამამი 30 პიქსელი

h3. ჩატვირთვის სათაური

 ნახევრად თამამი 24 პიქსელი

h4. ჩატვირთვის სათაური

 ნახევრად თამამი 18 პიქსელი
h5. ჩატვირთვის სათაური
 ნახევრად თამამი 14 პიქსელი
h6. ჩატვირთვის სათაური
 ნახევრად თამამი 12 პიქსელი 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

შექმენით უფრო მსუბუქი, მეორადი ტექსტი ნებისმიერ სათაურში ზოგადი <small>ტეგით ან .smallკლასით.

h1. ჩატვირთვის სათაური მეორადი ტექსტი

h2. ჩატვირთვის სათაური მეორადი ტექსტი

h3. ჩატვირთვის სათაური მეორადი ტექსტი

h4. ჩატვირთვის სათაური მეორადი ტექსტი
h5. ჩატვირთვის სათაური მეორადი ტექსტი
h6. ჩატვირთვის სათაური მეორადი ტექსტი
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

სხეულის ასლი

Bootstrap-ის გლობალური ნაგულისხმევი font-sizeარის 14 პიქსელი , 1.428line-height - ით . ეს ეხება <body>ყველა პარაგრაფს. გარდა ამისა, <p>(აბზაცები) იღებენ ქვედა ზღვარს მათი გამოთვლილი ხაზის სიმაღლის ნახევრის (ნაგულისხმევად 10 პიქსელი).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula.

Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

წამყვანი სხეულის ასლი

გააკეთეთ აბზაცის გამორჩევა დამატებით .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

აშენებულია Less-ით

ტიპოგრაფიული სკალა ეფუძნება ორ Less ცვლადს ცვლადებში .less : @font-size-baseდა @line-height-base. პირველი არის საბაზისო შრიფტის ზომა, რომელიც გამოიყენება მთელს ტერიტორიაზე და მეორე არის საბაზისო ხაზის სიმაღლე. ჩვენ ვიყენებთ ამ ცვლადებს და რამდენიმე მარტივ მათემატიკას, რათა შევქმნათ ყველა ჩვენი ტიპის მინდვრები, ბალიშები და ხაზის სიმაღლეები და სხვა. მოარგეთ ისინი და Bootstrap ადაპტირდება.

ჩასმული ტექსტის ელემენტები

მონიშნული ტექსტი

სხვა კონტექსტში მისი რელევანტურობის გამო ტექსტის გაშვების ხაზგასასმელად გამოიყენეთ <mark>ტეგი.

შეგიძლიათ გამოიყენოთ ნიშნის ტეგიმონიშნეთტექსტი.

You can use the mark tag to <mark>highlight</mark> text.

წაშლილი ტექსტი

წაშლილი ტექსტის ბლოკების მითითებისთვის გამოიყენეთ <del>ტეგი.

ტექსტის ეს ხაზი განიხილება როგორც წაშლილი ტექსტი.

<del>This line of text is meant to be treated as deleted text.</del>

გადახაზული ტექსტი

ტექსტის ბლოკების მითითებისთვის, რომლებიც აღარ არის რელევანტური, გამოიყენეთ <s>ტეგი.

ტექსტის ეს სტრიქონი მიჩნეულია, რომ აღარ არის ზუსტი.

<s>This line of text is meant to be treated as no longer accurate.</s>

ჩასმული ტექსტი

დოკუმენტში დამატებების მითითებისთვის გამოიყენეთ <ins>ტეგი.

ტექსტის ეს ხაზი განიხილება, როგორც დოკუმენტის დამატება.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ხაზგასმული ტექსტი

ტექსტის ხაზგასასმელად გამოიყენეთ <u>ტეგი.

ტექსტის ეს ხაზი ხაზგასმული იქნება

<u>This line of text will render as underlined</u>

გამოიყენეთ HTML-ის ნაგულისხმევი აქცენტის ტეგები მსუბუქი სტილებით.

მცირე ტექსტი

ხაზგასმით ან ტექსტის ბლოკების ხაზგასმის მიზნით, გამოიყენეთ <small>ტეგი, რათა დააყენოთ ტექსტი მშობლის ზომის 85%. სათაურის ელემენტები იღებენ საკუთარ თავს font-sizeწყობილებისთვის<small> ელემენტებისთვის.

თქვენ შეგიძლიათ ალტერნატიულად გამოიყენოთ inline ელემენტი .smallნებისმიერის ნაცვლად <small>.

ტექსტის ეს ხაზი განიხილება როგორც წვრილმანი.

<small>This line of text is meant to be treated as fine print.</small>

თამამი

ტექსტის ფრაგმენტზე უფრო მძიმე შრიფტის წონით ხაზგასმისთვის.

ტექსტის შემდეგი ფრაგმენტი გამოტანილია როგორც თამამი ტექსტი .

<strong>rendered as bold text</strong>

დახრილები

ტექსტის ფრაგმენტის დახრილი შრიფტით ხაზგასასმელად.

ტექსტის შემდეგი ფრაგმენტი გამოტანილია, როგორც დახრილი ტექსტი .

<em>rendered as italicized text</em>

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

მოგერიდებათ გამოიყენოთ <b>და <i>HTML5-ში. <b>მიზნად ისახავს სიტყვების ან ფრაზების ხაზგასმას დამატებითი მნიშვნელობის გადაცემის გარეშე, ხოლო <i>ძირითადად ხმისთვის, ტექნიკური ტერმინებისთვის და ა.შ.

გასწორების კლასები

ადვილად გადაასწორეთ ტექსტი კომპონენტებთან ტექსტის გასწორების კლასებით.

მარცხნივ გასწორებული ტექსტი.

ცენტრში გასწორებული ტექსტი.

მარჯვნივ გასწორებული ტექსტი.

დასაბუთებული ტექსტი.

არ არის შეფუთული ტექსტი.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ტრანსფორმაციის კლასები

ტექსტის კომპონენტებად გარდაქმნა ტექსტის კაპიტალიზაციის კლასებით.

მცირე ზომის ტექსტი.

ზედა რეგისტრირებული ტექსტი.

კაპიტალიზირებული ტექსტი.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

აბრევიატურები

HTML <abbr>ელემენტის სტილიზებული იმპლემენტაცია აბრევიატურებისა და აკრონიმებისთვის გაფართოებული ვერსიის საჩვენებლად hover-ზე. ატრიბუტის მქონე აბრევიატურებს titleაქვთ მსუბუქი წერტილოვანი ქვედა საზღვარი და დამხმარე კურსორი ატრიალებისას, რაც უზრუნველყოფს დამატებით კონტექსტს გადასატანად და დამხმარე ტექნოლოგიების მომხმარებლებს.

ძირითადი აბრევიატურა

სიტყვის ატრიბუტის აბრევიატურა არის attr .

<abbr title="attribute">attr</abbr>

ინიციალიზმი

დაამატეთ .initialismაბრევიატურას ოდნავ მცირე ზომის შრიფტი.

HTML არის საუკეთესო რამ დაჭრილი პურის შემდეგ.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

მისამართები

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

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
სრული სახელი
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ბლოკციტატები

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

ნაგულისხმევი ბლოკციტატი

შეფუთეთ <blockquote>ნებისმიერი HTML ციტატის სახით. პირდაპირი ციტატებისთვის, ჩვენ გირჩევთ <p>.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote პარამეტრები

სტილი და შინაარსი იცვლება სტანდარტის მარტივი ვარიაციებისთვის <blockquote>.

წყაროს დასახელება

დაამატეთ <footer>წყაროს იდენტიფიცირებისთვის. ჩაწერეთ წყაროს ნამუშევრის სახელი <cite>.

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

ვინმე ცნობილი წყაროს სათაურში 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ალტერნატიული ჩვენებები

დაამატეთ .blockquote-reverseბლოკციტატისთვის მარჯვნივ გასწორებული შინაარსით.

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

ვინმე ცნობილი წყაროს სათაურში 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

სიები

შეუკვეთელი

ნივთების სია, რომლებშიც შეკვეთას აშკარად არ აქვს მნიშვნელობა.

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

უბრძანა

ნივთების სია, რომლებშიც შეკვეთას აშკარად აქვს მნიშვნელობა .

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. მთელი რიცხვი molestie lorem at massa
  4. გამარტივება პრეტიუმ ნისლ ალიკეტში
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. ენეან იჯდეს ამეთ ერატ ნუნც
  8. ეგეთი პორტტიტორი ლორემი
<ol>
  <li>...</li>
</ol>

უსტიილი

წაშალეთ ნაგულისხმევი list-styleდა მარცხენა ზღვარი სიის ელემენტებზე (მხოლოდ უშუალო ბავშვები). ეს ეხება მხოლოდ უშუალოდ ბავშვების სიის ელემენტებს , რაც ნიშნავს, რომ თქვენ მოგიწევთ კლასის დამატება ნებისმიერი ჩადგმული სიისთვის.

  • 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
  • ენეან იჯდეს ამეთ ერატ ნუნც
  • ეგეთი პორტტიტორი ლორემი
<ul class="list-unstyled">
  <li>...</li>
</ul>

Ხაზში

მოათავსეთ სიის ყველა ელემენტი ერთ ხაზზე display: inline-block;და მსუბუქი ბალიშებით.

  • Lorem ipsum
  • Phasellus iaculis
  • ნულა ვოლუტპატი
<ul class="list-inline">
  <li>...</li>
</ul>

აღწერა

ტერმინების სია მათთან დაკავშირებული აღწერილობებით.

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

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

გააკეთეთ ტერმინები და აღწერილობები ერთმანეთის <dl>გვერდით. იწყება ნაგულისხმევი <dl>s-ების მსგავსად, მაგრამ როდესაც ნავიგაციის ზოლი გაფართოვდება, გააკეთეთ ეს.

აღწერილობის სიები
აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
ევისმოდი
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ავტომატური შეკვეცა

ჰორიზონტალური აღწერის სიები შეკვეცავს ტერმინებს, რომლებიც ზედმეტად გრძელია მარცხენა სვეტში text-overflow. ვიწრო ხედებში, ისინი შეიცვლება ნაგულისხმევ დაწყობილ განლაგებაზე.

კოდი

Ხაზში

შეფუთეთ კოდის შიდა ნაწყვეტები <code>.

მაგალითად, <section>უნდა იყოს შეფუთული როგორც inline. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

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

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

დირექტორიების გადასართავად, აკრიფეთ cdდირექტორიას სახელი.
პარამეტრების რედაქტირებისთვის დააჭირეთ 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>

ძირითადი ბლოკი

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

<p>ტექსტის ნიმუში აქ...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

თქვენ შეგიძლიათ სურვილისამებრ დაამატოთ .pre-scrollableკლასი, რომელიც დააყენებს მაქსიმალურ სიმაღლეს 350 პიქსელს და უზრუნველყოფს y-ღერძის გად���ხვევის ზოლს.

ცვლადები

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

y = m x + b

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

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

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

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

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

მაგიდები

ძირითადი მაგალითი

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

სურვილისამებრ ცხრილის წარწერა.
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter 
<table class="table">
  ...
</table>

ზოლიანი რიგები

გამოიყენეთ .table-stripedზებრა-ზოლის დასამატებლად ცხრილის ნებისმიერ მწკრივში <tbody>.

ჯვარედინი ბრაუზერის თავსებადობა

ზოლიანი ცხრილების სტილიზაცია ხდება :nth-childCSS ამომრჩევლის საშუალებით, რომელიც მიუწვდომელია Internet Explorer 8-ში.

# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter 
<table class="table table-striped">
  ...
</table>

შემოსაზღვრული მაგიდა

დაამატეთ .table-borderedსაზღვრები ცხრილისა და უჯრედების ყველა მხარეს.

# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter 
<table class="table table-bordered">
  ...
</table>

გადაიტანეთ რიგები

დამატება .table-hover, რათა ჩართოთ ჰოვერ მდგომარეობა ცხრილის რიგებში <tbody>.

# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter 
<table class="table table-hover">
  ...
</table>

შედედებული მაგიდა

დაამატეთ .table-condensed, რომ მაგიდები უფრო კომპაქტური გახადოთ, უჯრედის ბალიშის შუაზე გაჭრით.

# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter 
<table class="table table-condensed">
  ...
</table>

კონტექსტური კლასები

გამოიყენეთ კონტექსტური კლასები ცხრილის რიგების ან ცალკეული უჯრედების გასაფერადებლად.

Კლასი აღწერა
.active იყენებს ჰოვერის ფერს კონკრეტულ მწკრივზე ან უჯრედზე
.success მიუთითებს წარმატებულ ან დადებით მოქმედებაზე
.info მიუთითებს ნეიტრალურ ინფორმაციულ ცვლილებაზე ან მოქმედებაზე
.warning მიუთითებს გაფრთხილებაზე, რომელსაც შესაძლოა ყურადღება დასჭირდეს
.danger მიუთითებს საშიშ ან პოტენციურად უარყოფით მოქმედებაზე
# სვეტის სათაური სვეტის სათაური სვეტის სათაური
1 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
2 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
3 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
4 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
5 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
6 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
7 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
8 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი
9 სვეტის შინაარსი სვეტის შინაარსი სვეტის შინაარსი 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

ფერის გამოყენება ცხრილის მწკრივზე ან ცალკეულ უჯრედზე მნიშვნელობის დასამატებლად მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებზე – როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (ხილული ტექსტი ცხრილის შესაბამის მწკრივში/უჯრედში), ან შედის ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .sr-onlyკლასში.

საპასუხო მაგიდები

შექმენით საპასუხო ცხრილები ნებისმიერის შეფუთვით .table, .table-responsiveრათა ისინი ჰორიზონტალურად გადაადგილდნენ პატარა მოწყობილობებზე (768 პიქსელზე ნაკლები). 768 პიქსელზე დიდი სიგანის ნახვისას ამ ცხრილებში ვერავითარ განსხვავებას ვერ ნახავთ.

ვერტიკალური ამოკვეთა/შეკვეცა

საპასუხო ცხრილები იყენებენ overflow-y: hidden, რომელიც წყვეტს ნებისმიერ შინაარსს, რომელიც სცილდება ცხრილის ქვედა ან ზედა კიდეებს. კერძოდ, ამან შეიძლება ამოშალოს ჩამოსაშლელი მენიუები და სხვა მესამე მხარის ვიჯეტები.

Firefox და ველების ნაკრები

Firefox-ს აქვს უხერხული ველების ნაკრები, widthრომელიც ერევა საპასუხო ცხრილს. ამის გაუქმება შეუძლებელია Firefox-ის სპეციფიკური ჰაკის გარეშე, რომელსაც ჩვენ არ გთავაზობთ Bootstrap-ში:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

დამატებითი ინფორმაციისთვის წაიკითხეთ ეს Stack Overflow პასუხი .

# მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური
1 მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი
2 მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი
3 მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი
# მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური მაგიდის სათაური
1 მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი
2 მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი
3 მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი მაგიდის უჯრედი 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ფორმები

ძირითადი მაგალითი

ინდივიდუალური ფორმის კონტროლი ავტომატურად იღებს გლობალურ სტილს. ყველა ტექსტური <input>, <textarea>, და <select>ელემენტი .form-controlდაყენებულია width: 100%;ნაგულისხმევად. შეფუთეთ ეტიკეტები და კონტროლი .form-groupოპტიმალური მანძილით.

ბლოკის დონის დახმარების ტექსტის მაგალითი აქ.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

არ აურიოთ ფორმის ჯგუფები შეყვანის ჯგუფებთან

არ აურიოთ ფორმების ჯგუფები პირდაპირ შეყვანის ჯგუფებთან . ამის ნაცვლად, ჩადეთ შეყვანის ჯგუფი ფორმის ჯგუფის შიგნით.

ინლაინ ფორმა

დაამატეთ .form-inlineთქვენს ფორმას (რომელიც არ უნდა იყოს <form>) მარცხნივ გასწორებული და ბლოკის კონტროლისთვის. ეს ეხება მხოლოდ ფორმებს ხედის პორტებში, რომელთა სიგანე მინიმუმ 768 პიქსელია.

შეიძლება მოითხოვოს მორგებული სიგანე

შეყვანები და არჩევა width: 100%;გამოიყენება ნაგულისხმევად Bootstrap-ში. Inline ფორმების ფარგლებში, ჩვენ აღვადგენთ, width: auto;რომ რამდენიმე კონტროლი შეიძლება იყოს იმავე ხაზზე. თქვენი განლაგებიდან გამომდინარე, შეიძლება საჭირო გახდეს დამატებითი მორგებული სიგანე.

ყოველთვის დაამატეთ ეტიკეტები

ეკრანის მკითხველებს პრობლემები შეექმნებათ თქვენს ფორმებთან დაკავშირებით, თუ არ ჩაურთავთ ლეიბლს ყველა შეყვანისთვის. ამ ხაზოვანი ფორმებისთვის შეგიძლიათ დაიმალოთ ეტიკეტები .sr-onlyკლასის გამოყენებით. არსებობს დამხმარე ტექნოლოგიებისთვის ეტიკეტის მიწოდების სხვა ალტერნატიული მეთოდები, როგორიცაა aria-label, aria-labelledbyან titleატრიბუტი. თუ არცერთი მათგანი არ არის, ეკრანის მკითხველებმა შეიძლება მიმართონ placeholderატრიბუტის გამოყენებას, თუ ეს არსებობს, მაგრამ გაითვალისწინეთ, რომ placeholderეტიკეტირების სხვა მეთოდების შემცვლელად გამოყენება არ არის რეკომენდებული.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

ჰორიზონტალური ფორმა

გამოიყენეთ Bootstrap-ის წინასწარ განსაზღვრული ბადის კლასები ლეიბლებისა და ფორმის კონტროლის ჯგუფების ჰორიზონტალურ განლაგებაში .form-horizontalფორმის დასამატებლად (რომელიც არ უნდა იყოს <form>). ამით იცვლება .form-groupს ქცევა, როგორც ბადის რიგები, ამიტომ არ არის საჭირო .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

მხარდაჭერილი კონტროლი

სტანდარტული ფორმის კონტროლის მაგალითები, რომლებიც მხარდაჭერილია ფორმის მაგალითის განლაგებაში.

შეყვანები

ყველაზე გავრცელებული ფორმის კონტროლი, ტექსტზე დაფუძნებული შეყვანის ველები. მოიცავს ყველა HTML5 ტიპის მხარდაჭერას: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telდა color.

საჭიროა ტიპის დეკლარაცია

შეყვანები სრულად იქნება სტილიზებული მხოლოდ იმ შემთხვევაში, თუ მათი typeსწორად დეკლარირებულია.

<input type="text" class="form-control" placeholder="Text input">

შეყვანის ჯგუფები

ინტეგრირებული ტექსტის ან ღილაკების დასამატებლად ნებისმიერი ტექსტზე დაფუძნებული წინ და/ან შემდეგ <input>, შეამოწმეთ შეყვანის ჯგუფის კომპონენტი .

ტექსტარეა

ფორმის კონტროლი, რომელიც მხარს უჭერს ტექსტის მრავალ ხაზს. საჭიროებისამებრ შეცვალეთ rowsატრიბუტი.

<textarea class="form-control" rows="3"></textarea>

ჩექმები და რადიოები

მოსანიშნი ველები არის სიაში ერთი ან რამდენიმე ვარიანტის ასარჩევად, ხოლო რადიოები მრავალი ვარიანტიდან ერთის ასარჩევად.

გათიშული მოსანიშნი ველები და რადიოები მხარდაჭერილია, მაგრამ იმისათვის, რომ კურსორი "არ არის ნებადართული" მშობლის გადასატანად <label>, თქვენ უნდა დაამატოთ .disabledკლასი მშობელს .radio, .radio-inline, .checkboxან .checkbox-inline.

ნაგულისხმევი (დაწყობილი)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ჩამრთველი ველები და რადიოები

გამოიყენეთ .checkbox-inlineან .radio-inlineკლასები საკონტროლო ველების ან რადიოების სერიაზე, რომლებიც გამოჩნდება იმავე ხაზზე.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

მოსანიშნი ველები და რადიოები ეტიკეტის ტექსტის გარეშე

თუ არ გაქვთ ტექსტი ში <label>, შეყვანა განლაგებულია ისე, როგორც თქვენ მოელით. ამჟამად მუშაობს მხოლოდ არა-შიდა ჩამრთველებზე და რადიოებზე. დაიმახსოვრეთ, რომ კვლავ მიაწოდოთ ეტიკეტის რაიმე ფორმა დამხმარე ტექნოლოგიებისთვის (მაგალითად, გამოყენებით aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ირჩევს

გაითვალისწინეთ, რომ ბევრ მშობლიურ მენიუს, კერძოდ Safari-სა და Chrome-ს აქვს მომრგვალებული კუთხეები, რომელთა შეცვლა შეუძლებელია border-radiusთვისებების მეშვეობით.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>ატრიბუტის მქონე კონტროლისთვის multipleნაგულისხმევად ნაჩვენებია მრავალი ვარიანტი .

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

სტატიკური კონტროლი

როდესაც ფორმაში ფორმის ლეიბლის გვერდით მარტივი ტექსტის განთავსება გჭირდებათ, გამოიყენეთ .form-control-staticკლასი <p>.

[email protected]

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

[email protected]

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ფოკუსირების მდგომარეობა

ჩვენ ვხსნით ნაგულისხმევ outlineსტილებს ზოგიერთი ფორმის კონტროლზე და ვიყენებთ box-shadowმის ადგილას :focus.

დემო :focusსახელმწიფო

ზემოთ მოყვანილი მაგალითის შეყვანა იყენებს მორგებულ სტილებს ჩვენს დოკუმენტაციაში, რათა აჩვენოს :focusმდგომარეობა .form-control.

ინვალიდი მდგომარეობა

დაამატეთ disabledლოგიკური ატრიბუტი შეყვანაზე, რათა თავიდან აიცილოთ მომხმარებლის ურთიერთქმედება. გამორთული შეყვანები უფრო მსუბუქია და დაამატეთ not-allowedკურსორი.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

გამორთული ველების ნაკრები

დაამატეთ disabledატრიბუტი a- ს, რომ ერთდროულად <fieldset>გამორთოთ ყველა კონტროლი შიგნით .<fieldset>

გაფრთხილება ბმულის ფუნქციონალურობის შესახებ<a>

ნაგულისხმევად, ბრაუზერები განიხილავენ ყველა ბუნებრივ ფორმას ( <input>, <select>და <button>ელემენტებს) შიგნით, <fieldset disabled>როგორც გათიშულად, რაც ხელს უშლის მათზე კლავიატურისა და მაუსის ურთიერთქმედებას. თუმცა, თუ თქვენი ფორმა ასევე შეიცავს <a ... class="btn btn-*">ელემენტებს, მათ მიენიჭებათ მხოლოდ pointer-events: none. როგორც აღინიშნა ღილაკების გამორთული მდგომარეობის შესახებ სექციაში (და კონკრეტულად წამყვანი ელემენტების ქვეგანყოფილებაში), ეს CSS თვისება ჯერ არ არის სტანდარტიზებული და არ არის სრულად მხარდაჭერილი Opera 18 და ქვემოთ, ან Internet Explorer 11-ში და გაიმარჯვა. არ აიცილოთ კლავიატურის მომხმარებლებს ამ ბმულების ფოკუსირება ან გააქტიურება. ასე რომ, რომ იყოთ უსაფრთხო, გამოიყენეთ მორგებული JavaScript, რომ გამორთოთ ასეთი ბმულები.

ჯვარედინი ბრაუზერის თავსებადობა

მიუხედავად იმისა, რომ Bootstrap გამოიყენებს ამ სტილებს ყველა ბრაუზერში, Internet Explorer 11 და ქვემოთ არ არის სრულად მხარდაჭერილი disabledატრიბუტის შესახებ <fieldset>. გამოიყენეთ მორგებული JavaScript ამ ბრაუზერებში ველების ნაკრების გასათიშად.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

მხოლოდ წაკითხვის მდგომარეობა

დაამატეთ readonlyლოგიკური ატრიბუტი შეყვანაზე, რათა თავიდან აიცილოთ შეყვანის მნიშვნელობის შეცვლა. მხოლოდ წაკითხვადი შეყვანები უფრო მსუბუქია (ისევე, როგორც გამორთული შეყვანები), მაგრამ ინარჩუნებს სტანდარტულ კურსორს.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

დახმარების ტექსტი

ბლოკის დონის დახმარების ტექსტი ფორმის მართვისთვის.

დახმარების ტექსტის ასოცირება ფორმის კონტროლებთან

დახმარების ტექსტი აშკარად უნდა იყოს დაკავშირებული ფორმის კონტროლთან, რომელსაც ის ეხება aria-describedbyატრიბუტის გამოყენებით. ეს უზრუნველყოფს, რომ დამხმარე ტექნოლოგიები - როგორიცაა ეკრანის წამკითხველები - გამოაცხადებენ ამ დახმარების ტექსტს, როდესაც მომხმარებელი ფოკუსირებს ან შედის კონტროლზე.

დახმარების ტექსტის ბლოკი, რომელიც იშლება ახალ სტრიქონზე და შეიძლება გაგრძელდეს ერთი ხაზის მიღმა. 
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

ვალიდაციის ქვეყნები

Bootstrap მოიცავს შეცდომის, გაფრთხილებისა და წარმატების მდგომარეობების ვალიდაციის სტილებს ფორმის კონტროლებზე. გამოსაყენებლად, დამატება .has-warning, .has-errorან .has-successმშობელ ელემენტში. ნებისმიერი .control-label, .form-controlდა .help-blockამ ელემენტის ფარგლებში მიიღებს ვალიდაციის სტილებს.

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

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

დარწმუნდით, რომ ასევე უზრუნველყოფილია მდგომარეობის ალტერნატიული მითითება. მაგალითად, შეგიძლიათ შეიტანოთ მინიშნება მდგომარეობის შესახებ თავად ფორმის კონტროლის <label>ტექსტში (როგორც ეს ხდება კოდის შემდეგ მაგალითში), ჩართოთ Glyphicon (შესაბამისი ალტერნატიული ტექსტით .sr-onlyკლასის გამოყენებით - იხილეთ Glyphicon-ის მაგალითები ) ან მიწოდებით დამატებითი დახმარების ტექსტის ბლოკი. კონკრეტულად დამხმარე ტექნოლოგიებისთვის, არასწორი ფორმის კონტროლს ასევე შეიძლება მიენიჭოს aria-invalid="true"ატრიბუტი.

დახმარების ტექსტის ბლოკი, რომელიც იშლება ახალ სტრიქონზე და შეიძლება გაგრძელდეს ერთი ხაზის მიღმა. 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

არჩევითი ხატებით

თქვენ ასევე შეგიძლიათ დაამატოთ არასავალდებულო გამოხმაურების ხატები, დამატებით .has-feedbackდა მარჯვენა ხატულას.

უკუკავშირის ხატები მუშაობს მხოლოდ ტექსტურ <input class="form-control">ელემენტებთან.

ხატები, ლეიბლები და შეყვანის ჯგუფები

უკუკავშირის ხატულების ხელით განლაგება საჭიროა ეტიკეტის გარეშე შეყვანისთვის და შეყვანის ჯგუფებისთვის დანამატით მარჯვნივ. თქვენ მოგიწოდებთ მიაწოდოთ ეტიკეტები ყველა შეყვანისთვის ხელმისაწვდომობის მიზეზების გამო. თუ გსურთ თავიდან აიცილოთ ლეიბლების ჩვენება, დამალეთ ისინი .sr-onlyკლასთან. თუ თქვენ უნდა გააკეთოთ ეტიკეტების გარეშე, შეცვალეთ topგამოხმაურების ხატულა. შეყვანის ჯგუფებისთვის, დაარეგულირეთ rightმნიშვნელობა პიქსელის შესაბამის მნიშვნელობაზე, თქვენი დანამატის სიგანედან გამომდინარე.

ხატის მნიშვნელობის გადმოცემა დამხმარე ტექნოლოგიებზე

იმის უზრუნველსაყოფად, რომ დამხმარე ტექნოლოგიები - როგორიცაა ეკრანის წამკითხველები - სწორად გადმოსცემენ ხატის მნიშვნელობას, დამატებითი ფარული ტექსტი უნდა იყოს შეტანილი .sr-onlyკლასში და აშკარად ასოცირებული იყოს ფორმის კონტროლთან, რომელსაც იგი იყენებს aria-describedby. ალტერნატიულად, დარწმუნდით, რომ მნიშვნელობა (მაგალითად, ის ფაქტი, რომ არსებობს გაფრთხილება ტექსტის შეყვანის კონკრეტული ველისთვის) სხვა ფორმით არის გადმოცემული, როგორიცაა <label>ფორმის კონტროლთან დაკავშირებული რეალური ტექსტის შეცვლა.

მიუხედავად იმისა, რომ შემდეგ მაგალითებში უკვე ნახსენებია მათი შესაბამისი ფორმის კონტროლის ვალიდაციის მდგომარეობა <label>თავად ტექსტში, ზემოთ მოყვანილი ტექნიკა ( .sr-onlyტექსტის გამოყენებით და aria-describedby) ჩართულია საილუსტრაციო მიზნებისთვის.

(წარმატება)
(გაფრთხილება)
(შეცდომა)
@
(წარმატება) 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

არჩევითი ხატები ჰორიზონტალურ და ხაზოვან ფორმებში

(წარმატება)
@
(წარმატება) 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(წარმატება)

@
(წარმატება) 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

არჩევითი ხატები ფარული .sr-onlyეტიკეტებით

თუ .sr-onlyკლასს იყენებთ ფორმის კონტროლის დასამალად <label>(ვიდრე ეტიკეტირების სხვა ვარიანტების, როგორიცაა aria-labelატრიბუტის გამოყენება), Bootstrap ავტომატურად დაარეგულირებს ხატის პოზიციას მისი დამატების შემდეგ.

(წარმატება)
@
(წარმატება) 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

აკონტროლეთ ზომა

დააყენეთ სიმაღლეები კლასების გამოყენებით .input-lgდა დააყენეთ სიგანეები ბადის სვეტების კლასების გამოყენებით, როგორიცაა .col-lg-*.

სიმაღლის ზომა

შექმენით უფრო მაღალი ან მოკლე ფორმის კონტროლი, რომელიც შეესაბამება ღილაკების ზომებს.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ჰორიზონტალური ფორმის ჯგუფის ზომები

სწრაფად ზომავენ ლეიბლებს და ფორმებს კონტროლს შიგნით .form-horizontalდამატებით .form-group-lgან .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

სვეტის ზომა

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ღილაკები

ღილაკების ტეგები

გამოიყენეთ ღილაკის კლასები <a>, <button>, ან <input>ელემენტზე.

Ბმული 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

კონტექსტური გამოყენება

მიუხედავად იმისა, რომ ღილაკების კლასები შეიძლება გამოყენებულ იქნას ელემენტებზე <a>და <button>ელემენტებზე, მხოლოდ <button>ელემენტებია მხარდაჭერილი ჩვენს ნავიგ და ნავიბარის კომპონენტებში.

ბმულები მოქმედებს როგორც ღილაკები

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

ჯვარედინი ბრაუზერის რენდერი

როგორც საუკეთესო პრაქტიკა, ჩვენ გირჩევთ გამოიყენოთ <button>ელემენტი შეძლებისდაგვარად , ბრაუზერის შესატყვისი რენდერის უზრუნველსაყოფად.

სხვა საკითხებთან ერთად, არის შეცდომა Firefox-ში <30 , რომელიც ხელს გვიშლის დაყენებაში დაფუძნებული ღილაკების დაყენებაში line-height, <input>რის გამოც ისინი ზუსტად არ ემთხვევა Firefox-ის სხვა ღილაკების სიმაღლეს.

Პარამეტრები

გამოიყენეთ ნებისმიერი ხელმისაწვდომი ღილაკის კლასი სტილის ღილაკის სწრაფად შესაქმნელად.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

ღილაკზე მნიშვნელობის დასამატებლად ფერის გამოყენება იძლევა მხოლოდ ვიზუალურ მითითებას, რომელიც არ გადაეცემა დამხმარე ტექნოლოგიების მომხმარებლებს - როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (ღილაკის ხილული ტექსტი), ან შედის ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .sr-onlyკლასში.

ზომები

გსურთ უფრო დიდი თუ პატარა ღილაკები? დაამატეთ .btn-lg, .btn-smან .btn-xsდამატებითი ზომებისთვის.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

შექმენით ბლოკის დონის ღილაკები — ისინი, რომლებიც მოიცავს მშობლის მთელ სიგანეს — დამატებით .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

აქტიური მდგომარეობა

ღილაკები გამოჩნდება დაჭერით (უფრო მუქი ფონით, მუქი საზღვრით და ჩასმული ჩრდილით) გააქტიურებისას. ელემენტებისთვის ეს <button>კეთდება მეშვეობით :active. <a>ელემენტებისთვის ეს კეთდება .active. თუმცა, შეგიძლიათ გამოიყენოთ s- .activeზე <button>(და შეიტანოთ aria-pressed="true"ატრიბუტი), თუ დაგჭირდებათ აქტიური მდგომარეობის პროგრამულად გამეორება.

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

დამატება არ არის საჭირო, :activeრადგან ეს ფსევდო კლასია, მაგრამ თუ იგივე გარეგნობის იძულება გჭირდებათ, განაგრძეთ და დაამატეთ .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

წამყვანი ელემენტი

დაამატეთ .activeკლასი <a>ღილაკებში.

პირველადი ბმული Ბმული 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

ინვალიდი მდგომარეობა

გახადეთ ღილაკების დაწკაპუნება შეუძლებელია მათი უკან გაქრობით opacity.

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

დაამატეთ disabledატრიბუტი <button>ღილაკებს.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ჯვარედინი ბრაუზერის თავსებადობა

თუ დაამატებთ disabledატრიბუტს a-ს <button>, Internet Explorer 9 და ქვემოთ ტექსტი გამოიღებს ნაცრისფერ ტექსტს საზიზღარი ტექსტის ჩრდილით, რომელსაც ჩვენ ვერ გამოვასწორებთ.

წამყვანი ელემენტი

დაამატეთ .disabledკლასი <a>ღილაკებში.

პირველადი ბმული Ბმული 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

ჩვენ ვიყენებთ .disabledროგორც სასარგებლო კლასს აქ, ჩვეულებრივი .activeკლასის მსგავსი, ამიტომ პრეფიქსი არ არის საჭირო.

ბმული ფუნქციონალურობის გაფრთხილება

ეს კლასი იყენებს s- pointer-events: noneის ბმული ფუნქციის გამორთვის მცდელობას <a>, მაგრამ ეს CSS თვისება ჯერ არ არის სტანდარტიზებული და არ არის სრულად მხარდაჭერილი Opera 18-ში და ქვემოთ, ან Internet Explorer 11-ში. გარდა ამისა, ბრაუზერებშიც კი, რომლებიც მხარს უჭერენ pointer-events: noneკლავიატურას. ნავიგაცია უცვლელი რჩება, რაც იმას ნიშნავს, რომ მხედველობითი კლავიატურის მომხმარებლები და დამხმარე ტექნოლოგიების მომხმარებლები კვლავ შეძლებენ ამ ბმულების გააქტიურებას. ასე რომ, რომ იყოთ უსაფრთხო, გამოიყენეთ მორგებული JavaScript, რომ გამორთოთ ასეთი ბმულები.

სურათები

საპასუხო სურათები

Bootstrap 3-ის სურათები შეიძლება გახდეს საპასუხო მეგობრული .img-responsiveკლასის დამატებით. ეს ეხება max-width: 100%;დაheight: auto;display: block; , რომ ის მშვენივრად გაფართოვდეს მშობელ ელემენტზე.

სურათების დასაყრდენად, რომლებიც იყენებენ .img-responsiveკლასს, .center-blockგამოიყენეთ .text-center. გამოყენების შესახებ დამატებითი ინფორმაციისთვის იხილეთ დამხმარე კლასების განყოფილება.center-block .

SVG სურათები და IE 8-10

Internet Explorer 8-10-ში SVG გამოსახულებები .img-responsiveარაპროპორციული ზომისაა. ამის გამოსასწორებლად, დაამატეთ width: 100% \9;სადაც საჭიროა. Bootstrap არ იყენებს ამას ავტომატურად, რადგან ეს იწვევს გართულებებს გამოსახულების სხვა ფორმატებში.

<img src="..." class="img-responsive" alt="Responsive image">

გამოსახულების ფორმები

დაამატეთ კლასები <img>ელემენტს, რათა ადვილად დააპროექტოთ სურათები ნებისმიერ პროექტში.

ჯვარედინი ბრაუზერის თავსებადობა

გაითვალისწინეთ, რომ Internet Explorer 8-ს არ აქვს მომრგვალებული კუთხეების მხარდაჭერა.

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

დამხმარე კლასები

კონტექსტური ფერები

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultrices vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

საქმე კონკრეტულობასთან

ზოგჯერ აქცენტის კლასების გამოყენება შეუძლებელია სხვა სელექტორის სპეციფიკის გამო. უმეტეს შემთხვევაში, საკმარისი გამოსავალია თქვენი ტექსტის შეფუთვა <span>კლასთან ერთად.

დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

მნიშვნელობის დასამატებლად ფერის გამოყენება მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებს - როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (კონტექსტუალური ფერები გამოიყენება მხოლოდ ტექსტში/მარკეში უკვე არსებული მნიშვნელობის გასაძლიერებლად), ან შედის ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .sr-onlyკლასში . .

კონტექსტური ფონი

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

Nullam id dolor id nibh ultrices vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

საქმე კონკრეტულობასთან

ზოგჯერ კონტექსტური ფონის კლასების გამოყენება შეუძლებელია სხვა სელექტორის სპეციფიკის გამო. ზოგიერთ შემთხვევაში, საკმარისი გამოსავალია თქვენი ელემენტის შინაარსი <div>კლასთან a-ში შეფუთვა.

დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

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

დახურვის ხატულა

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

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

კარეტები

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

<span class="caret"></span>

სწრაფი მოძრავი

ელემენტის გადაადგილება მარცხნივ ან მარჯვნივ კლასით. !importantშედის სპეციფიკური საკითხების თავიდან ასაცილებლად. კლასები ასევე შეიძლება გამოყენებულ იქნას მიქსების სახით.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

არ გამოიყენება ნავიბარებში

ნავიბარებში კომპონენტების სასარგებლო კლასებთან გასასწორებლად გამოიყენეთ .navbar-leftან მის .navbar-rightნაცვლად. იხილეთ ნავიბარის დოკუმენტები დეტალებისთვის.

ცენტრის შინაარსის ბლოკები

ელემენტის დაყენება display: blockდა ცენტრის მეშვეობით margin. ხელმისაწვდომია როგორც მიქსინი და კლასი.

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

გარკვევა

floats-ის ადვილად გასუფთავება .clearfix მშობელ ელემენტზე დამატებით . იყენებს ნიკოლას გალაჰერის მიერ პოპულარულ მიკრო გარკვევას . შეიძლება გამოვიყენოთ მიქსინის სახითაც.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

შინაარსის ჩვენება და დამალვა

აიძულეთ ელემენტი იყოს ნაჩვენები ან დამალული ( მათ შორის ეკრანის წამკითხველებისთვის ) .showდა .hiddenკლასების გამოყენებით. ეს კლასები გამოიყენება !importantსპეციფიკურობის კონფლიქტების თავიდან ასაცილებლად, ისევე როგორც სწრაფი floats . ისინი ხელმისაწვდომია მხოლოდ ბლოკის დონის გადართვისთვის. ისინი ასევე შეიძლება გამოყენებულ იქნას როგორც მიქსები.

.hideხელმისაწვდომია, მაგრამ ის ყოველთვის არ მოქმედებს ეკრანის წამკითხველებზე და მოძველებულია v3.0.1-დან. გამოიყენეთ .hiddenან .sr-onlyნაცვლად.

გარდა ამისა, .invisibleშეიძლება გამოყენებულ იქნას მხოლოდ ელემენტის ხილვადობის გადასართავად, რაც იმას ნიშნავს, რომ displayის არ არის შეცვლილი და ელემენტს შეუძლია კვლავ იმოქმედოს დოკუმენტის ნაკადზე.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

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

ელემენტის დამალვა ყველა მოწყობილობაზე , ეკრანის წამკითხველების გარდა .sr-only. დააკავშირეთ ელემენტის .sr-onlyხელახლა .sr-only-focusableსაჩვენებლად, როდესაც ის ფოკუსირებულია (მაგ. მხოლოდ კლავიატურაზე მომუშავე მომხმარებლის მიერ). აუცილებელია ხელმისაწვდომობის საუკეთესო პრაქტიკის დაცვით . ასევე შეიძლება გამოყენებულ იქნას მიქსების სახით.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

გამოსახულების ჩანაცვლება

გამოიყენეთ .text-hideკლასი ან მიქსინი ელემენტის ტექსტური შინაარსის ფონის სურათით ჩანაცვლებისთვის.

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

საპასუხო კომუნალური საშუალებები

მობილურისთვის მოსახერხებელი განვითარებისთვის, გამოიყენეთ ეს სასარგებლო კლასები მოწყობილობის მიერ კონტენტის ჩვენებისა და დამალვისთვის მედია მოთხოვნის საშუალებით. ასევე შედის კომუნალური კლასები შინაარსის გადართვისას დაბეჭდვისას.

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

ხელმისაწვდომი კლასები

გამოიყენეთ ხელმისაწვდომი კლასების ერთი ან კომბინაცია კონტენტის გადასართავად ხედვის ავარიის წერტილებში.

დამატებითი პატარა მოწყობილობებიტელეფონები (<768 პიქსელი) მცირე მოწყობილობებიტაბლეტები (≥768px) საშუალო მოწყობილობებიდესკტოპები (≥992 პიქსელი) დიდი მოწყობილობებიდესკტოპები (≥1200 პიქსელი)
.visible-xs-* ხილული
.visible-sm-* ხილული
.visible-md-* ხილული
.visible-lg-* ხილული
.hidden-xs ხილული ხილული ხილული
.hidden-sm ხილული ხილული ხილული
.hidden-md ხილული ხილული ხილული
.hidden-lg ხილული ხილული ხილული

v3.2.0-ის მდგომარეობით, .visible-*-*კლასები თითოეული წყვეტის წერტილისთვის მოდის სამ ვარიაციად, ერთი displayქვემოთ ჩამოთვლილი CSS ქონების თითოეული მნიშვნელობისთვის.

კლასების ჯგუფი CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

ასე რომ, დამატებითი პატარა ( xs) ეკრანებისთვის, მაგალითად, ხელმისაწვდომი .visible-*-*კლასებია: .visible-xs-block, .visible-xs-inline, და .visible-xs-inline-block.

კლასები .visible-xs, .visible-sm, .visible-mdდა .visible-lgასევე არსებობს, მაგრამ მოძველებულია v3.2.0-დან . ისინი დაახლოებით ექვივალენტურია .visible-*-block, გარდა დამატებითი სპეციალური შემთხვევების გადართვასთან <table>დაკავშირებული ელემენტების.

ბეჭდვის კლასები

ჩვეულებრივი საპასუხო კლასების მსგავსად, გამოიყენეთ ისინი ბეჭდვისთვის შინაარსის გადასართავად.

კლასები ბრაუზერი ბეჭდვა
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		ხილული
.hidden-print ხილული

კლასი .visible-printასევე არსებობს, მაგრამ მოძველებულია v3.2.0-დან. ეს დაახლოებით უდრის .visible-print-block, გარდა დამატებითი სპეციალური შემთხვევებისა, <table>დაკავშირებული ელემენტების.

სატესტო შემთხვევები

შეცვალეთ თქვენი ბრაუზერის ზომა ან ჩატვირთეთ სხვადასხვა მოწყობილობებზე საპასუხო კომუნალური კლასების შესამოწმებლად.

ხილულია...

მწვანე გამშვები ნიშნები მიუთითებს, რომ ელემენტი ჩანს თქვენს ამჟამინდელ ხედში.

✔ ხილულია x-small-ზე
✔ ხილულია პატარაზე
საშუალო ✔ ხილულია საშუალოზე
✔ ხილულია დიდზე
✔ ხილულია x-small-ზე და პატარაზე
✔ ხილულია საშუალო და დიდზე
✔ ხილულია x-small-ზე და საშუალოზე
✔ ხილულია პატარაზე და დიდზე
✔ ხილულია x-small-ზე და large-ზე
✔ ხილულია მცირე და საშუალოზე

დამალული...

აქ, მწვანე გამშვები ნიშნები ასევე მიუთითებს, რომ ელემენტი დამალულია თქვენს ამჟამინდელ ხედში.

✔ დამალულია x-small-ზე
✔ დამალულია პატარაზე
საშუალო ✔ დამალულია საშუალოზე
✔ დამალულია დიდზე
✔ დამალულია x-small-ზე და პატარაზე
✔ დამალულია საშუალოზე და დიდზე
✔ დამალულია x-small-ზე და საშუალოზე
✔ დამალულია პატარაზე და დიდზე
✔ დამალულია x-small-ზე და large-ზე
✔ დამალულია მცირე და საშუალოზე

ნაკლების გამოყენება

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

ბადის ცვლადები და მიქსინები დაფარულია Grid system განყოფილებაში .

Bootstrap-ის შედგენა

Bootstrap შეიძლება გამოყენებულ იქნას მინიმუმ ორი გზით: კომპილირებული CSS-ით ან წყარო Less ფაილებით. Less ფაილების შედგენისთვის, იხილეთ განყოფილება „დაწყება “ თუ როგორ უნდა დააყენოთ თქვენი განვითარების გარემო საჭირო ბრძანებების გასაშვებად.

მესამე მხარის კომპილაციის ხელსაწყოებმა შეიძლება იმუშაოს Bootstrap-თან, მაგრამ ისინი არ არის მხარდაჭერილი ჩვენი ძირითადი გუნდის მიერ.

ცვლადები

ცვლადები გამოიყენება მთელი პროექტის განმავლობაში, როგორც ხშირად გამოყენებული მნიშვნელობების ცენტრალიზაციისა და გაზიარების საშუალება, როგორიცაა ფერები, ინტერვალი ან შრიფტის დასტა. სრული დაშლისთვის, გთხოვთ, იხილოთ Customizer .

Ფერები

მარტივად გამოიყენეთ ორი ფერის სქემა: ნაცრისფერი და სემანტიკური. ნაცრისფერი ფერები უზრუნველყოფს სწრაფ წვდომას შავის ჩვეულებრივ ფერებში, ხოლო სემანტიკა მოიცავს სხვადასხვა ფერებს, რომლებიც ენიჭება მნიშვნელოვან კონტექსტურ მნიშვნელობებს.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ხარაჩოები

რამდენიმე ცვლადი თქვენი საიტის ჩონჩხის ძირითადი ელემენტების სწრაფად მორგებისთვის.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

მარტივად გააფორმეთ თქვენი ბმულები სწორი ფერით მხოლოდ ერთი მნიშვნელობით.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

გაითვალისწინეთ, რომ @link-hover-colorიყენებს ფუნქციას, კიდევ ერთ გასაოცარ ინსტრუმენტს Less-ისგან, რათა ავტომატურად შექმნას სწორი ჰოვერის ფერი. შეგიძლიათ გამოიყენოთ darken, lighten, saturateდა desaturate.

ტიპოგრაფია

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ხატები

ორი სწრაფი ცვლადი თქვენი ხატების მდებარეობისა და ფაილის სახელის მორგებისთვის.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

კომპონენტები

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

გამყიდველი მიქსები

გამყიდველის მიქსები არის მიქსები, რომლებიც ხელს უწყობენ მრავალი ბრაუზერის მხარდაჭერას თქვენს შედგენილ CSS-ში ყველა შესაბამისი გამყიდველის პრეფიქსის ჩათვლით.

ყუთის ზომა

გადააყენეთ თქვენი კომპონენტების ყუთის მოდელი ერთი მიქსით. კონტექსტისთვის იხილეთ ეს სასარგებლო სტატია Mozilla-დან .

მიქსინი მოძველებულია v3.2.0-დან, Autoprefixer-ის დანერგვით. უკუშეთავსებადობის შესანარჩუნებლად, Bootstrap გააგრძელებს mixin-ის შიდა გამოყენებას Bootstrap v4-მდე.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Მომრგვალებული კუთხეები

დღეს ყველა თანამედროვე ბრაუზერი მხარს უჭერს არაპრეფიქსის border-radiusსაკუთრებას. როგორც ასეთი, არ არსებობს .border-radius()mixin, მაგრამ Bootstrap შეიცავს მალსახმობებს ორი კუთხის სწრაფად დამრგვალებისთვის ობიექტის კონკრეტულ მხარეს.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ყუთი (ჩაშვება) ჩრდილები

თუ თქვენი სამიზნე აუდიტორია იყენებს უახლეს და უდიდეს ბრაუზერებსა და მოწყობილობებს, დარწმუნდით, რომ გამოიყენეთ ეს box-shadowქონება დამოუკიდებლად. თუ გჭირდებათ ძველი Android (წინა v4) და iOS მოწყობილობების მხარდაჭერა (წინა iOS 5), გამოიყენეთ მოძველებული mixin საჭირო -webkitპრეფიქსის ასაღებად.

mixin მოძველებულია v3.1.0-დან, რადგან Bootstrap ოფიციალურად არ უჭერს მხარს მოძველებულ პლატფორმებს, რომლებიც არ უჭერენ მხარს სტანდარტულ თვისებებს. უკუშეთავსებადობის შესანარჩუნებლად, Bootstrap გააგრძელებს mixin-ის შიდა გამოყენებას Bootstrap v4-მდე.

დარწმუნდით, რომ გამოიყენეთ rgba()ფერები თქვენი ყუთის ჩრდილში, რათა ისინი რაც შეიძლება შეუფერხებლად ერწყმის ფონს.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

გადასვლები

მრავალი მიქსი მოქნილობისთვის. დააყენეთ ყველა გადასვლის ინფორმაცია ერთით, ან მიუთითეთ ცალკე შეფერხება და ხანგრძლივობა, როგორც საჭიროა.

მიქსინები მოძველებულია v3.2.0-დან, Autoprefixer-ის დანერგვით. უკუშეთავსებადობის შესანარჩუნებლად, Bootstrap გააგრძელებს მიქსების შიდა გამოყენებას Bootstrap v4-მდე.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ტრანსფორმაციები

როტაცია, მასშტაბირება, თარგმნა (გადაადგილება) ან რაიმე ობიექტის დახრილობა.

მიქსინები მოძველებულია v3.2.0-დან, Autoprefixer-ის დანერგვით. უკუშეთავსებადობის შესანარჩუნებლად, Bootstrap გააგრძელებს მიქსების შიდა გამოყენებას Bootstrap v4-მდე.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

ანიმაციები

ერთი მიქსინი CSS3-ის ყველა ანიმაციური თვისების გამოყენებისთვის ერთ დეკლარაციაში და სხვა მიქსები ცალკეული თვისებებისთვის.

მიქსინები მოძველებულია v3.2.0-დან, Autoprefixer-ის დანერგვით. უკუშეთავსებადობის შესანარჩუნებლად, Bootstrap გააგრძელებს მიქსების შიდა გამოყენებას Bootstrap v4-მდე.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

გამჭვირვალობა

დააყენეთ გამჭვირვალობა ყველა ბრაუზერისთვის და filterმიაწოდეთ სარეზერვო ვერსია IE8-ისთვის.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ჩანაცვლების ტექსტი

მიუთითეთ კონტექსტი ფორმის კონტროლისთვის თითოეულ ველში.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Სვეტები

შექმენით სვეტები CSS-ის საშუალებით ერთი ელემენტის ფარგლებში.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

გრადიენტები

მარტივად გადააქციეთ ნებისმიერი ორი ფერი ფონის გრადიენტად. მიაღწიეთ წინსვლას და დააყენეთ მიმართულება, გამოიყენეთ სამი ფერი ან გამოიყენეთ რადიალური გრადიენტი. ერთი მიქსინით თქვენ მიიღებთ ყველა პრეფიქსირებულ სინტაქსს, რომელიც დაგჭირდებათ.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

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

#gradient > .directional(#333; #000; 45deg);

თუ თქვენ გჭირდებათ დალაქის სტილის გრადიენტი, ეს ასევე მარტივია. უბრალოდ მიუთითეთ ერთი ფერი და ჩვენ გადავფარავთ გამჭვირვალე თეთრ ზოლს.

#gradient > .striped(#333; 45deg);

მაღლა ასწიეთ და გამოიყენეთ სამი ფერი. დააყენეთ პირველი ფერი, მეორე ფერი, მეორე ფერის გაჩერება (პროცენტული მნიშვნელობა, როგორიცაა 25%) და მესამე ფერი ამ მიქსებით:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Თავები მაღლა! თუ ოდესმე დაგჭირდებათ გრადიენტის ამოღება, დარწმუნდით, რომ წაშალეთ ნებისმიერი IE-სპეციფიკური filter, რომელიც შესაძლოა დამატებული გაქვთ. ამის გაკეთება შეგიძლიათ .reset-filter()მიქსინის გამოყენებით background-image: none;.

კომუნალური მიქსები

Utility mixins არის მიქსები, რომლებიც აერთიანებენ სხვაგვარად დაუკავშირებელ CSS თვისებებს კონკრეტული მიზნის ან ამოცანის მისაღწევად.

გარკვევა

დაივიწყეთ class="clearfix"რაიმე ელემენტის დამატება და ამის ნაცვლად დაამატეთ .clearfix()მიქსინი, სადაც საჭიროა. იყენებს ნიკოლას გალაჰერის მიკრო კლიფიქსს .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

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

სწრაფად მოათავსეთ ნებისმიერი ელემენტი მის მშობელში. მოითხოვს widthან max-widthუნდა იყოს მითითებული.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ზომის დამხმარეები

უფრო მარტივად მიუთითეთ ობიექტის ზომები.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ზომის შეცვლადი ტექსტური ზონები

მარტივად დააკონფიგურირეთ ზომის შეცვლის ვარიანტები ნებისმიერი ტექსტური ზონისთვის ან ნებისმიერი სხვა ელემენტისთვის. ნაგულისხმევი ბრაუზერის ნორმალური ქცევა ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ტექსტის შეკვეცა

მარტივად შეკვეცეთ ტექსტი ელიფსისით ერთი მიქსინით. მოითხოვს ელემენტს იყოს blockან inline-blockდონე.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

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

მიუთითეთ სურათის ორი ბილიკი და @1x გამოსახულების ზომები და Bootstrap უზრუნველყოფს @2x მედია მოთხოვნას. თუ თქვენ გაქვთ ბევრი გამოსახულება მოსამსახურე, განიხილეთ თქვენი ბადურის სურათის CSS ხელით დაწერა ერთ მედია მოთხოვნაში.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sass-ის გამოყენება

მიუხედავად იმისა, რომ Bootstrap აგებულია Less-ზე, მას ასევე აქვს ოფიციალური Sass პორტი . ჩვენ ვინახავთ მას ცალკე GitHub საცავში და ვამუშავებთ განახლებებს კონვერტაციის სკრიპტით.

რა შედის

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

ბილიკი აღწერა
lib/ Ruby Gem კოდი (Sass კონფიგურაცია, Rails და Compass ინტეგრაციები)
tasks/ გადამყვანის სკრიპტები (Upstream Less-ის გადაქცევა Sass-ზე)
test/ კომპილაციის ტესტები
templates/ კომპასის პაკეტის მანიფესტი
vendor/assets/ Sass, JavaScript და შრიფტის ფაილები
Rakefile შიდა ამოცანები, როგორიცაა რაკი და კონვერტირება

ეწვიეთ Sass პორტის GitHub საცავს , რომ ნახოთ ეს ფაილები მოქმედებაში.

ინსტალაცია

ინფორმაციისთვის, თუ როგორ დააინსტალიროთ და გამოიყენოთ Bootstrap for Sass, იხილეთ GitHub საცავი readme . ეს არის ყველაზე განახლებული წყარო და შეიცავს ინფორმაციას Rails, Compass და სტანდარტული Sass პროექტებთან გამოსაყენებლად.

Bootstrap Sass-ისთვის