გლიფიკონები

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

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

  • glyphicon glyphicon-ვარსკვლავი
  • გლიფიკონ გლიფიკონ-პლუს
  • გლიფიკონ გლიფიკონ-ევრო
  • გლიფიკონ გლიფიკონ-ეურ
  • გლიფიკონ გლიფიკონ-მინუს
  • გლიფიკონ გლიფიკონ-ღრუბელი
  • გლიფიკონი გლიფიკონ-კონვერტი
  • გლიფიკონ გლიფიკონ-ფანქარი
  • გლიფიკონი გლიფიკონ-მინა
  • გლიფიკონ გლიფიკონ-მუსიკა
  • glyphicon glyphicon-ძიება
  • გლიფიკონ გლიფიკონ-გული
  • გლიფიკონი გლიფიკონ-ვარსკვლავი
  • glyphicon glyphicon-ვარსკვლავი-ცარიელი
  • glyphicon glyphicon-მომხმარებელი
  • glyphicon glyphicon-ფილმი
  • გლიფიკონი გლიფიკონ-ე-დიდი
  • გლიფიკონი გლიფიკონ-თ
  • glyphicon glyphicon-th-list
  • გლიფიკონ გლიფიკონ-ოკ
  • glyphicon glyphicon-ამოღება
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-გადიდება
  • გლიფიკონი გლიფიკონ-გამორთვა
  • გლიფიკონი გლიფიკონ-სიგნალი
  • გლიფიკონ გლიფიკონ-კოგ
  • გლიფიკონ გლიფიკონ-ნაგავი
  • glyphicon glyphicon-სახლი
  • glyphicon glyphicon-ფაილი
  • გლიფიკონ გლიფიკონ-დრო
  • გლიფიკონ გლიფიკონ-გზა
  • glyphicon glyphicon-ჩამოტვირთვა-ალტ
  • glyphicon glyphicon-ჩამოტვირთვა
  • glyphicon glyphicon-ატვირთვა
  • glyphicon glyphicon-inbox
  • glyphicon გლიფიკონ-თამაში-წრე
  • glyphicon glyphicon-გამეორება
  • glyphicon glyphicon-განახლება
  • glyphicon glyphicon-list-alt
  • glyphicon გლიფიკონ-საკეტი
  • გლიფიკონ გლიფიკონ-დროშა
  • glyphicon glyphicon-ყურსასმენები
  • glyphicon glyphicon-მოცულობის გამორთვა
  • glyphicon glyphicon-მოცულობის შემცირება
  • glyphicon glyphicon-მოცულობის გაზრდა
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-შტრიხკოდი
  • გლიფიკონ გლიფიკონ-ტეგი
  • გლიფიკონ გლიფიკონ-ტეგები
  • გლიფიკონ გლიფიკონ-წიგნი
  • glyphicon glyphicon-სანიშნე
  • გლიფიკონი გლიფიკონ-პრინტი
  • გლიფიკონ გლიფიკონ-კამერა
  • glyphicon glyphicon-ფონტი
  • glyphicon გლიფიკონ-გამბედავი
  • გლიფიკონი გლიფიკონ-იტალიკი
  • გლიფიკონი გლიფიკონ-ტექსტი-სიმაღლე
  • glyphicon glyphicon-ტექსტი-სიგანე
  • glyphicon glyphicon-align-მარცხნივ
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • გლიფიკონ გლიფიკონ-გასწორება-გამართლება
  • glyphicon glyphicon-სია
  • glyphicon glyphicon-შეწევა-მარცხნივ
  • glyphicon glyphicon-შეწევა-მარჯვნივ
  • glyphicon glyphicon-facetime-ვიდეო
  • glyphicon გლიფიკონ-სურათი
  • glyphicon glyphicon-რუკა-მარკერი
  • glyphicon glyphicon-მორგება
  • გლიფიკონი გლიფიკონ-ელფერით
  • glyphicon glyphicon-რედაქტირება
  • გლიფიკონ გლიფიკონ-წილი
  • glyphicon glyphicon-შემოწმება
  • გლიფიკონ გლიფიკონ-მოძრავი
  • glyphicon glyphicon-ნაბიჯი-უკან
  • glyphicon glyphicon-სწრაფი-უკან
  • გლიფიკონ გლიფიკონ-უკუღმა
  • გლიფიკონ გლიფიკონ-თამაში
  • glyphicon glyphicon-პაუზა
  • გლიფიკონ გლიფიკონ-გაჩერება
  • გლიფიკონ გლიფიკონ-წინ
  • glyphicon glyphicon-სწრაფად-წინ
  • glyphicon glyphicon-ნაბიჯი-წინ
  • გლიფიკონ გლიფიკონ-ამოგდება
  • glyphicon glyphicon-შევრონი-მარცხნივ
  • გლიფიკონი გლიფიკონ-შევრონი-მარჯვნივ
  • glyphicon glyphicon-პლუს-ნიშანი
  • glyphicon glyphicon-მინუს-ნიშანი
  • glyphicon glyphicon-მოხსნა-ნიშანი
  • glyphicon glyphicon-ok-ნიშანი
  • glyphicon glyphicon-კითხვა-ნიშანი
  • glyphicon glyphicon-ინფო-ნიშანი
  • glyphicon glyphicon-სკრინშოტი
  • glyphicon glyphicon-მოხსნა-წრე
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ბან-წრე
  • glyphicon glyphicon-ისარი-მარცხნივ
  • glyphicon glyphicon-ისარი-მარჯვნივ
  • glyphicon glyphicon-ისარი
  • glyphicon glyphicon-ისარი-ქვემო
  • გლიფიკონ გლიფიკონ-გაზიარება-ალტ
  • glyphicon glyphicon-size-სრული
  • glyphicon glyphicon-size-small
  • glyphicon glyphicon-ძახილის ნიშანი
  • გლიფიკონ გლიფიკონ-საჩუქარი
  • გლიფიკონ გლიფიკონ-ფოთოლი
  • გლიფიკონ გლიფიკონ-ცეცხლი
  • გლიფიკონ გლიფიკონ-თვალგახელილი
  • გლიფიკონ გლიფიკონ-თვალის დახუჭვა
  • glyphicon glyphicon-გამაფრთხილებელი ნიშანი
  • გლიფიკონი გლიფიკონ-თვითმფრინავი
  • glyphicon გლიფიკონ-კალენდარი
  • glyphicon glyphicon-შემთხვევითი
  • glyphicon glyphicon-კომენტარი
  • გლიფიკონი გლიფიკონ-მაგნიტი
  • გლიფიკონ გლიფიკონ-შევრონ-უფ
  • გლიფიკონი გლიფიკონ-შევრონ-ქვემო
  • glyphicon glyphicon-რეტვიტი
  • glyphicon glyphicon-საყიდლების კალათა
  • glyphicon glyphicon-საქაღალდე-დახურვა
  • glyphicon glyphicon-საქაღალდე-გახსნა
  • glyphicon glyphicon-size-ვერტიკალური
  • glyphicon glyphicon-size-horizontal
  • გლიფიკონ გლიფიკონ-ჰდდ
  • გლიფიკონი გლიფიკონ-ბულჰორნი
  • გლიფიკონი გლიფიკონ-ზარი
  • glyphicon glyphicon-სერთიფიკატი
  • glyphicon glyphicon-ზემოთ
  • glyphicon glyphicon-თითები-ქვემოთ
  • გლიფიკონ გლიფიკონ-ხელ-მარჯვნივ
  • გლიფიკონი გლიფიკონ-ხელ-მარცხნივ
  • glyphicon გლიფიკონ-ხელ-აღმა
  • გლიფიკონი გლიფიკონ-ხელი
  • glyphicon glyphicon-წრე-ისარი-მარჯვნივ
  • glyphicon glyphicon-წრე-ისარი-მარცხნივ
  • glyphicon glyphicon-წრე-ისარი-ზემოთ
  • glyphicon glyphicon-წრე-ისარი-ქვემო
  • გლიფიკონ გლიფიკონ-გლობუსი
  • glyphicon glyphicon-გამრთველი
  • გლიფიკონ გლიფიკონ-დავალებები
  • glyphicon glyphicon-ფილტრი
  • glyphicon glyphicon-პორტფელი
  • glyphicon glyphicon-სრულ ეკრანზე
  • glyphicon glyphicon-დაფა
  • glyphicon glyphicon-ქაღალდის სამაგრი
  • glyphicon glyphicon-გული-ცარიელი
  • გლიფიკონ გლიფიკონ-ლინკი
  • გლიფიკონ გლიფიკონ-ტელეფონი
  • გლიფიკონი გლიფიკონ-პუშპინი
  • გლიფიკონ გლიფიკონ-სდ
  • glyphicon glyphicon-gbp
  • გლიფიკონ გლიფიკონ-დალაგება
  • glyphicon glyphicon-დახარისხება-ანბანის მიხედვით
  • glyphicon glyphicon-დახარისხება-ანბანის მიხედვით-ალტ
  • glyphicon glyphicon-დახარისხება-შეკვეთით
  • glyphicon glyphicon-დახარისხება-შეკვეთით-ალტ
  • glyphicon glyphicon-დახარისხება ატრიბუტების მიხედვით
  • glyphicon glyphicon-დახარისხება ატრიბუტების მიხედვით-ალტ
  • glyphicon glyphicon-მოუნიშნული
  • გლიფიკონ გლიფიკონ-გაფართოება
  • glyphicon glyphicon-ჩამოვარდნა
  • glyphicon glyphicon-დაშლა
  • glyphicon glyphicon-შესვლა
  • გლიფიკონი გლიფიკონ-ფლეშ
  • glyphicon glyphicon-გამოსვლა
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-ჩანაწერი
  • გლიფიკონ გლიფიკონ-შენახვა
  • გლიფიკონ გლიფიკონ-გახსნილი
  • გლიფიკონ გლიფიკონ-შენახული
  • გლიფიკონ გლიფიკონ-იმპორტი
  • გლიფიკონ გლიფიკონ-ექსპორტი
  • გლიფიკონ გლიფიკონ-გაგზავნა
  • glyphicon glyphicon-ფლოპი-დისკი
  • glyphicon glyphicon-ფლოპი-შენახული
  • glyphicon glyphicon-ფლოპი-მოხსნა
  • glyphicon glyphicon-ფლოპი-შენახვა
  • glyphicon glyphicon-ფლოპი-ღია
  • glyphicon glyphicon-საკრედიტო ბარათი
  • გლიფიკონ გლიფიკონ-გადაცემა
  • გლიფიკონ გლიფიკონ-დანაჩანგალი
  • glyphicon glyphicon-header
  • გლიფიკონ გლიფიკონ-შეკუმშული
  • glyphicon glyphicon-ყურსასმენი
  • გლიფიკონ გლიფიკონ-ტელეფონ-ალტ
  • გლიფიკონ გლიფიკონ-კოშკი
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-სუბტიტრები
  • გლიფიკონი გლიფიკონ-ხმა-სტერეო
  • გლიფიკონი გლიფიკონ-ხმა-დოლბი
  • გლიფიკონი გლიფიკონ-ხმა-5-1
  • გლიფიკონ გლიფიკონ-ხმა-6-1
  • გლიფიკონ გლიფიკონ-ხმა-7-1
  • glyphicon glyphicon-საავტორო-ნიშანი
  • glyphicon glyphicon-რეგისტრაციული ნიშანი
  • glyphicon glyphicon-cloud-ჩამოტვირთვა
  • glyphicon glyphicon-ღრუბელი-ატვირთვა
  • გლიფიკონი გლიფიკონ-ხე-წიწვოვანი
  • გლიფიკონი გლიფიკონ-ხე-ფოთლოვანი
  • გლიფიკონ გლიფიკონ-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-დონე-ზემოთ
  • გლიფიკონ გლიფიკონ-ასლი
  • გლიფიკონ გლიფიკონ-პასტა
  • გლიფიკონ გლიფიკონ-გაფრთხილება
  • glyphicon გლიფიკონ-ექვალაიზერი
  • გლიფიკონ გლიფიკონ-მეფე
  • გლიფიკონი გლიფიკონ-დედოფალი
  • გლიფიკონ გლიფიკონ-ლომბარდი
  • გლიფიკონ გლიფიკონ-ეპისკოპოსი
  • გლიფიკონ გლიფიკონ-რაინდი
  • glyphicon glyphicon-ბავშვის-ფორმულა
  • გლიფიკონ გლიფიკონ-კარავი
  • glyphicon glyphicon-დაფა
  • გლიფიკონ გლიფიკონ-საწოლი
  • გლიფიკონ გლიფიკონ-ვაშლი
  • გლიფიკონ გლიფიკონ-წაშლა
  • glyphicon glyphicon-ქვიშის საათი
  • გლიფიკონ გლიფიკონ-ნათურა
  • glyphicon glyphicon-დუბლიკატი
  • გლიფიკონ გლიფიკონ-ყულაბა
  • glyphicon glyphicon-მაკრატელი
  • გლიფიკონ გლიფიკონ-ბიტკოინი
  • გლიფიკონ გლიფიკონ-ბტკ
  • გლიფიკონ გლიფიკონ-xbt
  • გლიფიკონ გლიფიკონ-იენი
  • გლიფიკონ გლიფიკონ-ჯპი
  • glyphicon glyphicon-რუბლი
  • გლიფიკონ გლიფიკონ-რუბ
  • გლიფიკონი გლიფიკონ-სკალი
  • გლიფიკონი გლიფიკონ-ყინულის ლოლი
  • glyphicon გლიფიკონ-ყინულის ლოლის გემო
  • glyphicon გლიფიკონ-განათლება
  • glyphicon glyphicon-ოფცია-ჰორიზონტალური
  • glyphicon glyphicon-ოფცია-ვერტიკალური
  • glyphicon glyphicon-მენიუ-ჰამბურგერი
  • glyphicon glyphicon-მოდალური-ფანჯარა
  • გლიფიკონ გლიფიკონ-ზეთი
  • გლიფიკონი გლიფიკონ-მარცვალი
  • glyphicon glyphicon-მზის სათვალე
  • glyphicon glyphicon-ტექსტის ზომა
  • glyphicon glyphicon-ტექსტი-ფერი
  • glyphicon glyphicon-ტექსტი-ფონი
  • glyphicon glyphicon-ობიექტ-გასწორება-ზემოდან
  • glyphicon glyphicon-ობიექტი-გასწორება-ქვედა
  • glyphicon glyphicon-ობიექტი-გასწორება-ჰორიზონტალური
  • glyphicon glyphicon-ობიექტი-გასწორება-მარცხნივ
  • glyphicon glyphicon-ობიექტის გასწორება-ვერტიკალური
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-სამკუთხედი-მარჯვენა
  • glyphicon glyphicon-სამკუთხედი-მარცხნივ
  • glyphicon glyphicon-სამკუთხედი-ქვედა
  • glyphicon გლიფიკონ-სამკუთხედი-ზედა
  • glyphicon glyphicon-კონსოლი
  • glyphicon გლიფიკონ-ზედამწერი
  • glyphicon გლიფიკონ-ქვემოწერა
  • glyphicon glyphicon-მენიუ-მარცხნივ
  • glyphicon glyphicon-მენიუ-მარჯვნივ
  • glyphicon glyphicon-მენიუ-ქვემოთ
  • glyphicon glyphicon-მენიუ-up

Როგორ გამოვიყენო

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

არ შეურიოთ სხვა კომპონენტებს

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

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

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

ხატის შრიფტის მდებარეობის შეცვლა

Bootstrap ვარაუდობს, რომ ხატის შრიფტის ფაილები განთავსდება ../fonts/დირექტორიაში, შედგენილ CSS ფაილებთან შედარებით. ამ შრიფტის ფაილების გადატანა ან სახელის გადარქმევა ნიშნავს CSS-ის განახლებას სამი გზით:

  • შეცვალეთ @icon-font-pathდა/ან @icon-font-nameცვლადები წყარო Less ფაილებში.
  • გამოიყენეთ Less შემდგენლის მიერ მოწოდებული შედარებითი URL-ების ვარიანტი .
  • შეცვალეთ url()ბილიკები შედგენილ CSS-ში.

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

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

დამხმარე ტექნოლოგიების თანამედროვე ვერსიები გამოაცხადებს CSS გენერირებულ კონტენტს, ასევე უნიკოდის სპეციფიკურ სიმბოლოებს. იმისათვის, რომ თავიდან ავიცილოთ უნებლიე და დამაბნეველი გამომავალი ეკრანის მკითხველებში (განსაკუთრებით მაშინ, როდესაც ხატები გამოიყენება მხოლოდ დეკორაციისთვის), ჩვენ მათ ვმალავთ aria-hidden="true"ატრიბუტით.

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

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

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

მაგალითები

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

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

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ჩამოსაშლელები

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

შეფუთეთ ჩამოსაშლელი ტრიგერის და ჩამოსაშლელი მენიუს შიგნით .dropdownან სხვა ელემენტში, რომელიც აცხადებს position: relative;. შემდეგ დაამატეთ მენიუს HTML.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ნაგულისხმევად, ჩამოსაშლელი მენიუ ავტომატურად განლაგებულია 100%-ით ზემოდან და მისი მშობლის მარცხენა მხარეს. დაამატეთ .dropdown-menu-righta- .dropdown-menuში მარჯვნივ გასწორება ჩამოსაშლელი მენიუში.

შეიძლება საჭირო გახდეს დამატებითი პოზიციონირება

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

მოძველებული .pull-rightგასწორება

v3.1.0- .pull-rightდან ჩამოსაშლელი მენიუები მოძველდა. მენიუს მარჯვნივ გასასწორებლად გამოიყენეთ .dropdown-menu-right. მარცხნივ გასწორებული nav-კომპონენტები navbar-ში იყენებენ ამ კლასის mixin ვერსიას მენიუს ავტომატურად გასწორებისთვის. მის გასაუქმებლად გამოიყენეთ .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

დაამატეთ .disableda- <li>ს ჩამოსაშლელ სიაში ბმულის გასათიშად.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

ღილაკების ჯგუფები

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

ღილაკების ჯგუფებში ინსტრუმენტების მინიშნებები და პოვერები საჭიროებს სპეციალურ პარამეტრს

როდესაც იყენებთ ინსტრუმენტების რჩევებს ან პოპოვერებს ელემენტებზე .btn-group, თქვენ უნდა მიუთითოთ container: 'body'არასასურველი გვერდითი ეფექტების თავიდან აცილების ვარიანტი (როგორიცაა ელემენტი ფართოვდება და/ან კარგავს მომრგვალებულ კუთხეებს, როდესაც ხელსაწყოს მინიშნება ან პოპოვერ ამოქმედდება).

დარწმუნდით, რომ სწორია roleდა მიაწოდეთ ეტიკეტი

იმისათვის, რომ დამხმარე ტექნოლოგიებმა - როგორიცაა ეკრანის წამკითხველები - გადმოგცეთ, რომ ღილაკების სერია დაჯგუფებულია, საჭიროა შესაბამისი roleატრიბუტის მიწოდება. ღილაკების ჯგუფებისთვის ეს იქნება role="group", ხოლო ხელსაწყოთა ზოლებს უნდა ჰქონდეს role="toolbar".

ერთი გამონაკლისი არის ჯგუფები, რომლებიც შეიცავს მხოლოდ ერთ კონტროლს (მაგალითად, გამართლებული ღილაკების ჯგუფებს ელემენტებით <button>) ან ჩამოსაშლელ ღილაკს.

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

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

შემოახვიეთ ღილაკების სერია .btnში .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ღილაკების პანელი

შეუთავსეთ კომპლექტები <div class="btn-group">უფრო <div class="btn-toolbar">რთული კომპონენტებისთვის.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

გაზომვა

იმის ნაცვლად, რომ გამოიყენოთ ღილაკების ზომის კლასები ჯგუფში ყველა ღილაკზე, უბრალოდ დაამატეთ .btn-group-*თითოეულს .btn-group, მათ შორის, მრავალი ჯგუფის ბუდობისას.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ბუდე

მოათავსეთ .btn-groupმეორეში, .btn-groupროდესაც გსურთ ჩამოსაშლელი მენიუები შერეული ღილაკების სერიით.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ვერტიკალური ვარიაცია

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

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

გამართლებული ღილაკების ჯგუფები

გააკეთეთ ღილაკების ჯგუფი, რომელიც გაიჭიმება თანაბარი ზომით, რათა დაფაროს მისი მშობლის მთელ სიგანეზე. ასევე მუშაობს ღილაკების ჩამოსაშლელებთან ღილაკების ჯგუფში.

საზღვრების დამუშავება

ღილაკების გასამართლებლად გამოყენებული სპეციფიკური HTML და CSS-ის გამო (კერძოდ display: table-cell), მათ შორის საზღვრები გაორმაგებულია. ჩვეულებრივ ღილაკების ჯგუფებში, margin-left: -1pxგამოიყენება საზღვრების დასაწყობად მათი ამოღების ნაცვლად. თუმცა, marginარ მუშაობს display: table-cell. შედეგად, Bootstrap-ის თქვენი პერსონალიზაციის მიხედვით, შეიძლება მოგინდეთ საზღვრების ამოღება ან ხელახლა შეღებვა.

IE8 და საზღვრები

Internet Explorer 8 არ ასახავს ღილაკების საზღვრებს გამართლებული ღილაკების ჯგუფში, იქნება ეს ჩართული <a>თუ <button>ელემენტები. ამის გადასაჭრელად, გადაიტანეთ თითოეული ღილაკი მეორეში .btn-group.

იხილეთ #12476 დამატებითი ინფორმაციისთვის.

<a>ელემენტებით _

უბრალოდ შეფუთეთ ს- .btnების სერია .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

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

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

<button>ელემენტებით _

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

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

ღილაკების ჩამოსაშლელები

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

დანამატის დამოკიდებულება

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

ერთი ღილაკის ჩამოსაშლელები

გადააქციეთ ღილაკი ჩამოსაშლელ გადამრთველად რამდენიმე ძირითადი მარკირების ცვლილებებით.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

გაყოფის ღილაკების ჩამოსაშლელები

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

გაზომვა

ღილაკების ჩამოსაშლელები მუშაობს ყველა ზომის ღილაკებით.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ჩამოსაშლელი ვარიაცია

ელემენტების ზემოთ ჩამოსაშლელი მენიუების ჩართვა მშობელში დამატებით .dropup.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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

გააფართოვეთ ფორმის კონტროლი ტექსტის ან ღილაკების დამატებით ნებისმიერი ტექსტზე დაფუძნებული ტექსტის წინ, შემდეგ ან ორივე მხარეს <input>. გამოიყენეთ ან .input-groupერთად .input-group-addonან .input-group-btnელემენტების დასამაგრებლად ან ერთზე დასამატებლად .form-control.

<input>მხოლოდ ტექსტური

მოერიდეთ <select>აქ ელემენტების გამოყენებას, რადგან მათი სრული სტილისტიკა WebKit ბრაუზერებში შეუძლებელია.

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

ინსტრუმენტების მინიშნებები და პოვერები შეყვანის ჯგუფებში საჭიროებს სპეციალურ პარამეტრს

როდესაც იყენებთ ინსტრუმენტების რჩევებს ან პოპოვერებს ელემენტებზე .input-group, თქვენ უნდა მიუთითოთ ვარიანტი container: 'body'არასასურველი გვერდითი ეფექტების თავიდან ასაცილებლად (როგორიცაა ელემენტი ფართოვდება და/ან კარგავს მომრგვალებულ კუთხეებს, როდესაც ხელსაწყოს მინიშნება ან პოვერი ამოქმედდება).

არ შეურიოთ სხვა კომპონენტებს

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

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

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

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

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

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

ჩვენ არ ვუჭერთ მხარს მრავალ დანამატს ( .input-group-addonან .input-group-btn) ერთ მხარეს.

ჩვენ არ ვუჭერთ მხარს რამდენიმე ფორმა-კონტროლს ერთ შეყვანის ჯგუფში.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

გაზომვა

დაამატეთ ფორმის შედარებითი ზომის კლასები საკუთარ .input-groupთავში და შიგნით შიგთავსი ავტომატურად შეიცვლება ზომა-არ არის საჭირო თითოეულ ელემენტზე ფორმის კონტროლის ზომის კლასების გამეორება.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

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

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ღილაკების დამატებები

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ღილაკები ჩამოსაშლელი ღილაკებით

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

მრავალი ღილაკი

მიუხედავად იმისა, რომ თქვენ შეგიძლიათ გქონდეთ მხოლოდ ერთი დანამატი თითოეულ მხარეს, შეგიძლიათ გქონდეთ რამდენიმე ღილაკი ერთში .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ნავები

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

ჩანართების პანელებისთვის navs-ის გამოყენება მოითხოვს JavaScript ჩანართების დანამატს

ჩანართის მქონე ჩანართებისთვის, თქვენ უნდა გამოიყენოთ ჩანართების JavaScript მოდული . მარკირება ასევე საჭიროებს დამატებით და ARIA ატრიბუტებს – დამატებითი დეტალებისთვის roleიხილეთ მოდულის მარკირების მაგალითი .

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

თუ იყენებთ ნავიგაციას ნავიგაციის ზოლის უზრუნველსაყოფად, დარწმუნდით, რომ დაამატეთ A- role="navigation"ს ყველაზე ლოგიკურ მშობელ კონტეინერში <ul>, ან გადაიტანეთ <nav>ელემენტი მთელ ნავიგაციაზე. არ დაამატოთ როლი <ul>თავისთავად, რადგან ეს ხელს შეუშლის მის გამოცხადებას დამხმარე ტექნოლოგიების მიერ რეალურ სიაში.

გაითვალისწინეთ, რომ .nav-tabsკლასი მოითხოვს .navსაბაზისო კლასს.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

აიღეთ იგივე HTML, მაგრამ .nav-pillsამის ნაცვლად გამოიყენეთ:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

აბები ასევე არის ვერტიკალურად დაწყობილი. უბრალოდ დაამატეთ .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

მარტივად გააკეთეთ ჩანართები ან აბები მათი მშობლის სიგანეების 768 პიქსელზე ფართო ეკრანებზე .nav-justified. პატარა ეკრანებზე ნავიგაციის ბმულები დაწყობილია.

გამართლებული ნავიბარის ნავიგაციის ბმულები ამჟამად არ არის მხარდაჭერილი.

Safari და საპასუხო გამართლებული ნავი

v9.1.2-ის მდგომარეობით, Safari ავლენს შეცდომას, რომლის დროსაც თქვენი ბრაუზერის ზომის შეცვლა ჰორიზონტალურად იწვევს გამართლებულ ნავიგაციაში შეცდომებს, რომლებიც იშლება განახლებისას. ეს შეცდომა ასევე ნაჩვენებია გამართლებული nav-ის მაგალითში .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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

ბმულის ფუნქციონირება არ იმოქმედებს

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

დაამატეთ ჩამოსაშლელი მენიუები ცოტა დამატებითი HTML-ით და ჩამოსაშლელი JavaScript მოდულით .

ჩანართები ჩამოსაშლელი ღილაკებით

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

აბები წვეთებით

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ნავიბარი

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

გამართლებული ნავიბარის ნავიგაციის ბმულები ამჟამად არ არის მხარდაჭერილი.

გადატვირთული შინაარსი

იმის გამო, რომ Bootstrap-მა არ იცის, რამდენი სივრცე სჭირდება შიგთავსს თქვენს navbar-ში, შეიძლება შეგექმნათ პრობლემები კონტენტის მეორე რიგში შეფუთვასთან დაკავშირებით. ამის გადასაჭრელად შეგიძლიათ:

  1. შეამცირეთ ნავიბარის ელემენტების რაოდენობა ან სიგანე.
  2. დამალეთ ზოგიერთი ნავიგარის ელემენტი ეკრანის გარკვეულ ზომებზე, საპასუხო კომუნალური კლასების გამოყენებით .
  3. შეცვალეთ წერტილი, რომლითაც თქვენი ნავიბარი გადართავს ჩაკეცულ და ჰორიზონტალურ რეჟიმებს შორის. დააკონფიგურირეთ @grid-float-breakpointცვლადი ან დაამატეთ თქვენი საკუთარი მედია მოთხოვნა.

მოითხოვს JavaScript დანამატს

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

საპასუხო ნავიბარი მოითხოვს კოლაფსის მოდულის ჩართვას Bootstrap-ის თქვენს ვერსიაში.

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

Navbar იშლება მის ვერტიკალურ მობილურ ხედში, როდესაც ხედის პორტი უფრო ვიწროა @grid-float-breakpoint, და ფართოვდება მის ჰორიზონტალურ არამობილურ ხედში, როდესაც ხედის პორტი მინიმუმ @grid-float-breakpointსიგანეშია. დაარეგულირეთ ეს ცვლადი Less source-ში, რათა აკონტროლოთ ნავი ზოლის დაშლის/გაფართოების დროს. ნაგულისხმევი მნიშვნელობა არის 768px(ყველაზე პატარა "პატარა" ან "ტაბლეტის" ეკრანი).

გახადეთ ნავი ზოლები ხელმისაწვდომი

დარწმუნდით, რომ გამოიყენეთ <nav>ელემენტი, ან, თუ იყენებთ უფრო ზოგად ელემენტს, როგორიცაა <div>, დაამატეთ A role="navigation"ყველა ნავიგბარს, რათა მკაფიოდ განსაზღვროთ ის, როგორც საეტაპო რეგიონი დამხმარე ტექნოლოგიების მომხმარებლებისთვის.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

შეცვალეთ navbar-ის ბრენდი თქვენი საკუთარი გამოსახულებით, ტექსტის შეცვლით <img>. ვინაიდან მას .navbar-brandაქვს საკუთარი ბალიშები და სიმაღლე, შეიძლება დაგჭირდეთ ზოგიერთი CSS-ის გადალახვა თქვენი სურათიდან გამომდინარე.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

როგორც heads up, .navbar-formიზიარებს მისი კოდის დიდ ნაწილს .form-inlinemixin-ის საშუალებით. ზოგიერთი ფორმის კონტროლი, როგორიცაა შეყვანის ჯგუფები, შეიძლება მოითხოვოს ფიქსირებული სიგანეების სწორად ჩვენება ნავიგაციის ზოლში.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

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

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

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

დაამატეთ .navbar-btnკლასი <button>ელემენტებს, რომლებიც არ ცხოვრობენ a-ში, <form>რათა ვერტიკალურად მოაწყოთ ისინი navbar-ში.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

სტანდარტული ღილაკების კლასების მსგავსად , .navbar-btnშეიძლება გამოყენებულ იქნას <a>ელემენტებზე <input>. თუმცა, არც .navbar-btnღილაკების სტანდარტული კლასები არ უნდა იყოს <a>გამოყენებული .navbar-nav.

ტექსტის სტრიქონები ელემენტში შეფუთეთ .navbar-text, ჩვეულებრივ <p>ტეგზე სწორი წამყვანის და ფერის მისაღებად.

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

გაასწორეთ ნავიგაციის ბმულები, ფორმები, ღილაკები ან ტექსტი, .navbar-leftან .navbar-rightსასარგებლო კლასების გამოყენებით. ორივე კლასი დაამატებს CSS float-ს მითითებული მიმართულებით. მაგალითად, ნავიგაციის ბმულების გასასწორებლად, განათავსეთ ისინი განცალკევებულში <ul>შესაბამისი სასარგებლო კლასებით.

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

რამდენიმე კომპონენტის მარჯვენა გასწორება

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

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

დაამატეთ .navbar-fixed-topდა ჩართეთ ნავიგაციის ზოლის შიგთავსი .containerან .container-fluidცენტრში და დაბლოკეთ.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

საჭიროა სხეულის ბალიშები

ფიქსირებული ნავიგატორი გადაფარავს თქვენს სხვა შინაარსს, თუ არ დაამატებთ paddingზევით <body>. სცადეთ თქვენი საკუთარი ღირებულებები ან გამოიყენეთ ჩვენი ფრაგმენტი ქვემოთ. რჩევა: ნაგულისხმევად, ნავი ბარი არის 50 პიქსელის სიმაღლე.

body { padding-top: 70px; }

დარწმუნდით, რომ ჩართეთ ეს ძირითადი Bootstrap CSS-ის შემდეგ .

დაამატეთ .navbar-fixed-bottomდა ჩართეთ ნავიგაციის ზოლის შიგთავსი .containerან .container-fluidცენტრში და დაბლოკეთ.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

საჭიროა სხეულის ბალიშები

ფიქსირებული ნავიგატორი გადაფარავს თქვენს სხვა შინაარსს, თუ არ დაამატებთ paddingბოლოში <body>. სცადეთ თქვენი საკუთარი ღირებულებები ან გამოიყენეთ ჩვენი ფრაგმენტი ქვემოთ. რჩევა: ნაგულისხმევად, ნავი ბარი არის 50 პიქსელის სიმაღლე.

body { padding-bottom: 70px; }

დარწმუნდით, რომ ჩართეთ ეს ძირითადი Bootstrap CSS-ის შემდეგ .

შექმენით სრული სიგანის ნავიგალური ზოლი, რომელიც გვერდის გვერდის გვერდის გვერდის გვერდის გვერდის გვერდით აშორებს ნავიბარის კონტენტის დამატებით .navbar-static-topან .containerცენტრში .container-fluidდა ბლოკის ჩასმა.

კლასებისგან განსხვავებით .navbar-fixed-*, თქვენ არ გჭირდებათ რაიმე ბალიშის შეცვლა body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

შეცვალეთ navbar-ის გარეგნობა დამატებით .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

პურის ნამსხვრევები

მიუთითეთ მიმდინარე გვერდის მდებარეობა სანავიგაციო იერარქიაში.

გამყოფები ავტომატურად ემატება CSS-ში :beforeდა content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

პაგირება

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

ნაგულისხმევი პაგინაცია

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

პაგინაციის კომპონენტის მარკირება

პაგინაციის კომპონენტი უნდა იყოს შეფუთული <nav>ელემენტში, რათა იდენტიფიცირდეს ის, როგორც სანავიგაციო განყოფილება ეკრანის წამკითხველებისთვის და სხვა დამხმარე ტექნოლოგიებისთვის. გარდა ამისა, რადგან გვერდს სავარაუდოდ უკვე აქვს ერთზე მეტი ნავიგაციის სექცია (როგორიცაა პირველადი ნავიგაცია სათაურში ან გვერდითი ზოლის ნავიგაცია), მიზანშეწონილია მიაწოდოთ აღწერილობა aria-label, <nav>რომელიც ასახავს მის მიზანს. მაგალითად, თუ პაგინაციის კომპონენტი გამოიყენება ძიების შედეგებს შორის ნავიგაციისთვის, შესაბამისი ლეიბლი შეიძლება იყოს aria-label="Search results pages".

ინვალიდი და აქტიური ქვეყნები

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

გაზომვა

გნებავთ უფრო დიდი თუ პატარა პაგინაცია? დაამატეთ .pagination-lgან .pagination-smდამატებითი ზომებისთვის.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

პეიჯერი

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

ნაგულისხმევი მაგალითი

ნაგულისხმევად, პეიჯერის ცენტრებში ბმულები.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

პეიჯერის ბმულები ასევე იყენებენ ზოგად .disabledსასარგებლო კლასს პაგინაციისგან.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ეტიკეტები

მაგალითი

მაგალითი სათაური ახალი

მაგალითი სათაური ახალი

მაგალითი სათაური ახალი

მაგალითი სათაური ახალი

მაგალითი სათაური ახალი
მაგალითი სათაური ახალი
<h3>Example heading <span class="label label-default">New</span></h3>

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

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

ნაგულისხმევი პირველადი წარმატების ინფორმაცია გაფრთხილების საფრთხე
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ტონა ეტიკეტები გაქვთ?

რენდერინგის პრობლემები შეიძლება წარმოიშვას, როდესაც ვიწრო კონტეინერში გაქვთ ათობით ჩასმული ლეიბლი, თითოეული შეიცავს საკუთარ inline-blockელემენტს (ხატის მსგავსად). ეს არის დაყენება display: inline-block;. კონტექსტისა და მაგალითისთვის იხილეთ #13219 .

სამკერდე ნიშნები

მარტივად მონიშნეთ ახალი ან წაუკითხავი ელემენტები <span class="badge">ბმულების, Bootstrap ნავიგაციის და სხვათა დამატებით.

Შემომავალი42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

თვით ნგრევა

როდესაც არ არის ახალი ან წაუკითხავი ერთეულები, სამკერდე ნიშნები უბრალოდ იშლება (CSS-ის :emptyამომრჩეველის მეშვეობით) იმ პირობით, რომ მასში შინაარსი არ არის.

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

სამკერდე ნიშნები თავად არ იშლება Internet Explorer 8-ში, რადგან მას არ გააჩნია :emptyსელექტორის მხარდაჭერა.

ადაპტირდება ნავიგაციის აქტიურ მდგომარეობებთან

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ჯუმბოტრონი

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

Გამარჯობა მსოფლიო!

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

Გაიგე მეტი

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

იმისათვის, რომ ჯუმბოტრონი სრული სიგანით და მომრგვალებული კუთხეების გარეშე მოათავსოთ, მოათავსეთ იგი ყველა .containers-ის გარეთ და ამის ნაცვლად დაამატეთ .containerშიგნით.

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

გვერდის სათაური

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ესკიზები

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

თუ თქვენ ეძებთ Pinterest-ის მსგავს პრეზენტაციას სხვადასხვა სიმაღლის და/ან სიგანის ესკიზების, თქვენ უნდა გამოიყენოთ მესამე მხარის დანამატი, როგორიცაა Masonry , იზოტოპი ან Salvattore .

ნაგულისხმევი მაგალითი

ნაგულისხმევად, Bootstrap-ის ესკიზები შექმნილია იმისთვის, რომ აჩვენოს დაკავშირებული სურათები მინიმალური საჭირო მარკირებით.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

მორგებული კონტენტი

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

100% x 200

მინიატურების ეტიკეტი

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

ღილაკი ღილაკი

100% x 200

მინიატურების ეტიკეტი

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

ღილაკი ღილაკი

100% x 200

მინიატურების ეტიკეტი

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

ღილაკი ღილაკი

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

გაფრთხილებები

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

მაგალითები

შეფუთეთ ნებისმიერი ტექსტი და არჩევითი გაუქმების ღილაკი .alertდა ოთხი კონტექსტური კლასიდან ერთ-ერთში (მაგ., .alert-success) ძირითადი გაფრთხილების შეტყობინებებისთვის.

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

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

გაუქმებული გაფრთხილებები

ააშენეთ ნებისმიერი გაფრთხილება არჩევითი .alert-dismissibleდა დახურვის ღილაკის დამატებით.

საჭიროებს JavaScript-ის გაფრთხილების დანამატს

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

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

დარწმუნდით, რომ გამოიყენოთ <button>ელემენტი data-dismiss="alert"მონაცემთა ატრიბუტით.

გამოიყენეთ .alert-linkკომუნალური კლასი, რათა სწრაფად მიაწოდოთ შესაბამისი ფერადი ბმულები ნებისმიერი გაფრთხილების ფარგლებში.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

პროგრესის ზოლები

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

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

პროგრესის ზოლები იყენებენ CSS3 გადასვლებს და ანიმაციებს მათი ზოგიერთი ეფექტის მისაღწევად. ეს ფუნქციები არ არის მხარდაჭერილი Internet Explorer 9-ში და Firefox-ის ქვემოთ ან უფრო ძველ ვერსიებში. Opera 12 არ უჭერს მხარს ანიმაციას.

კონტენტის უსაფრთხოების პოლიტიკის (CSP) თავსებადობა

თუ თქვენს ვებსაიტს აქვს შიგთავსის უსაფრთხოების პოლიტიკა (CSP) , რომელიც არ იძლევა ნებას style-src 'unsafe-inline', მაშინ თქვენ ვერ შეძლებთ გამოიყენოთ inline styleატრიბუტები პროგრესის ზოლის სიგანეების დასაყენებლად, როგორც ეს ნაჩვენებია ჩვენს მაგალითებში ქვემოთ. სიგანეების დაყენების ალტერნატიული მეთოდები, რომლებიც თავსებადია მკაცრ CSP-ებთან, მოიცავს მცირე მორგებული JavaScript-ის გამოყენებას (რომელიც ადგენს element.style.width) ან პერსონალური CSS კლასების გამოყენებას.

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

ნაგულისხმევი პროგრესის ზოლი.

60% დასრულებული
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ეტიკეტით

ამოიღეთ <span>with .sr-onlyclass პროგრესის ზოლიდან, რათა ნახოთ ხილული პროცენტი.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

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

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

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

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

40% დასრულებული (წარმატება)
20% დასრულებული
60% დასრულებული (გაფრთხილება)
80% დასრულებული (საშიში)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ზოლიანი

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

40% დასრულებული (წარმატება)
20% დასრულებული
60% დასრულებული (გაფრთხილება)
80% დასრულებული (საშიში)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ანიმაციური

დაამატეთ ზოლების ანიმაციისთვის მარჯვნივ მარცხნივ .active. .progress-bar-stripedმიუწვდომელია IE9-ში და ქვემოთ.

45% დასრულებული
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

დაწყობილი

მოათავსეთ რამდენიმე ზოლი იმავეში, .progressრომ დააწყოთ ისინი.

35% დასრულებული (წარმატება)
20% დასრულებული (გაფრთხილება)
10% დასრულებული (საშიში)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

მედია ობიექტი

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

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

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

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

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

ჩადგმული მედია სათაური

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

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

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

კლასები .pull-leftდა .pull-rightასევე არსებობს და ადრე გამოიყენებოდა მედია კომპონენტის ნაწილად, მაგრამ ამ გამოყენებისთვის მოძველებულია v3.3.0-დან. ისინი დაახლოებით ექვივალენტურია .media-leftდა .media-right, გარდა იმისა, რომ .media-rightუნდა განთავსდეს .media-bodyhtml-ის შემდეგ.

მედიის გასწორება

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

ზედა გასწორებული მედია

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

შუა გასწორებული მედია

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

ქვედა გასწორებული მედია

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

მედიის სია

ცოტა დამატებითი მარკირებით, შეგიძლიათ გამოიყენოთ მედია შიგნიდან სიაში (გამოყენებულია კომენტარების თემებისთვის ან სტატიების სიებისთვის).

  • მედიის სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    ჩადგმული მედია სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    ჩადგმული მედია სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    ჩადგმული მედია სათაური

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

სიის ჯგუფი

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • მორბი ლეო რისუსი
  • Porta ac consectetur ac
  • ვესტიბულუმი და ეროსი
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

სამკერდე ნიშნები

დაამატეთ სამკერდე კომპონენტი სიის ჯგუფის ნებისმიერ ელემენტს და ის ავტომატურად განთავსდება მარჯვნივ.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1მორბი ლეო რისუსი
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

დაკავშირებული ელემენტები

სიის ჯგუფის ელემენტების დაკავშირება სიის ელემენტების ნაცვლად წამყვანი ტეგების გამოყენებით (ეს ასევე ნიშნავს მშობელს <div>, ნაცვლად <ul>). არ არის საჭირო ინდივიდუალური მშობლები თითოეული ელემენტის გარშემო.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ღილაკების ნივთები

სიის ჯგუფის ელემენტები შეიძლება იყოს ღილაკები სიის ელემენტების ნაცვლად (ეს ასევე ნიშნავს მშობელს <div>ნაცვლად <ul>). არ არის საჭირო ინდივიდუალური მშობლები თითოეული ელემენტის გარშემო. არ გამოიყენოთ აქ სტანდარტული .btnკლასები.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

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

დაამატეთ .disableda- .list-group-itemს ნაცრისფერში, რათა გამოჩნდეს გამორთული.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

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

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

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • ვესტიბულუმი და ეროსი
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

მორგებული კონტენტი

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

პანელები

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

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

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

ძირითადი პანელის მაგალითი
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

პანელი სათაურით

მარტივად დაამატეთ სათაურის კონტეინერი თქვენს პანელზე .panel-heading. თქვენ ასევე შეგიძლიათ შეიყვანოთ ნებისმიერი <h1>- კლასთან <h6>ერთად .panel-titleწინასწარ სტილის სათაურის დასამატებლად. თუმცა, შრიფტის ზომები <h1>- <h6>უგულებელყოფილია .panel-heading.

ბმულების სათანადო შეღებვისთვის, დარწმუნდით, რომ მოათავსეთ ბმულები სათაურებში .panel-title.

პანელის სათაური სათაურის გარეშე
პანელის შინაარსი

პანელის სათაური

პანელის შინაარსი
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

პანელის შინაარსი
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

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

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

პანელის სათაური

პანელის შინაარსი

პანელის სათაური

პანელის შინაარსი

პანელის სათაური

პანელის შინაარსი

პანელის სათაური

პანელის შინაარსი

პანელის სათაური

პანელის შინაარსი
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

მაგიდებით

დაამატეთ ნებისმიერი შეუზღუდავი .tableპანელში უწყვეტი დიზაინისთვის. თუ არის .panel-body, ჩვენ ვამატებთ დამატებით საზღვარს ცხრილის ზედა ნაწილში გამოყოფისთვის.

პანელის სათაური

პანელის ნაგულისხმევი შინაარსი აქ. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultrices vehicula ut id elit.

# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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

პანელის სათაური
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

სიის ჯგუფებთან ერთად

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

პანელის სათაური

პანელის ნაგულისხმევი შინაარსი აქ. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultrices vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • მორბი ლეო რისუსი
  • Porta ac consectetur ac
  • ვესტიბულუმი და ეროსი
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

საპასუხო ჩაშენება

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

წესები პირდაპირ გამოიყენება <iframe>, <embed>, <video>, და <object>ელემენტებზე; სურვილისამებრ გამოიყენეთ აშკარა შთამომავალი კლასი .embed-responsive-item, როდესაც გსურთ სტილის შეხამება სხვა ატრიბუტებისთვის.

პრო-წვერი! თქვენ არ გჭირდებათ frameborder="0"თქვენს <iframe>s-ში ჩართვა, რადგან ჩვენ ამას ვარღვევთ თქვენთვის.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ჭალები

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

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

შეხედე, ჭაში ვარ!
<div class="well">...</div>

არჩევითი კლასები

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

შეხედე, მე ვარ დიდ ჭაში!
<div class="well well-lg">...</div>
შეხედე, მე პატარა ჭაში ვარ!
<div class="well well-sm">...</div>