კომპონენტები
ათზე მეტი მრავალჯერადი გამოყენებადი კომპონენტი შექმნილია იკონოგრაფიის, ჩამოსაშლელი ფაილების, შეყვანის ჯგუფების, ნავიგაციის, გაფრთხილებებისა და მრავალი სხვას უზრუნველსაყოფად.
ათზე მეტი მრავალჯერადი გამოყენებადი კომპონენტი შექმნილია იკონოგრაფიის, ჩამოსაშლელი ფაილების, შეყვანის ჯგუფების, ნავიგაციის, გაფრთხილებებისა და მრავალი სხვას უზრუნველსაყოფად.
შეიცავს 250-ზე მეტ გლიფს შრიფტის ფორმატში Glyphicon Halflings ნაკრებიდან. Glyphicons Halflings ჩვეულებრივ არ არის ხელმისაწვდომი უფასოდ, მაგრამ მათმა შემქმნელმა ისინი ხელმისაწვდომი გახადა Bootstrap-ისთვის უფასოდ. მადლობის ნიშნად, ჩვენ მხოლოდ გთხოვთ, რომ შეძლებისდაგვარად შეიყვანოთ ბმული Glyphicons-ზე .
შესრულების მიზეზების გამო, ყველა ხატულა მოითხოვს საბაზისო კლასს და ინდივიდუალურ ხატულ კლასს. გამოსაყენებლად, განათავსეთ შემდეგი კოდი თითქმის ყველგან. დარწმუნდით, რომ დატოვეთ სივრცე ხატსა და ტექსტს შორის სათანადო შიგთავსისთვის.
ხატების კლასები არ შეიძლება პირდაპირ გაერთიანდეს სხვა კომპონენტებთან. ისინი არ უნდა იქნას გამოყენებული სხვა კლასებთან ერთად იმავე ელემენტზე. ამის ნაცვლად, დაამატეთ წყობილი <span>
და გამოიყენეთ ხატულას კლასები <span>
.
ხატულას კლასები უნდა იქნას გამოყენებული მხოლოდ იმ ელემენტებზე, რომლებიც არ შეიცავს ტექსტურ შინაარსს და არ გააჩნიათ შვილობილი ელემენტები.
Bootstrap ვარაუდობს, რომ ხატის შრიფტის ფაილები განთავსდება ../fonts/
დირექტორიაში, შედგენილ CSS ფაილებთან შედარებით. ამ შრიფტის ფაილების გადატანა ან სახელის გადარქმევა ნიშნავს CSS-ის განახლებას სამი გზით:
@icon-font-path
და/ან @icon-font-name
ცვლადები წყარო Less ფაილებში.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-right
a- .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>
დაამატეთ .disabled
a- <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-ის თქვენი პერსონალიზაციის მიხედვით, შეიძლება მოგინდეთ საზღვრების ამოღება ან ხელახლა შეღებვა.
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
) ერთ მხარეს.
ჩვენ არ ვუჭერთ მხარს რამდენიმე ფორმა-კონტროლს ერთ შეყვანის ჯგუფში.
<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
კლასით, ისევე როგორც საერთო მდგომარეობები. შეცვალეთ მოდიფიკატორის კლასები თითოეულ სტილს შორის გადასართავად.
გაითვალისწინეთ, რომ .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
. პატარა ეკრანებზე ნავიგაციის ბმულები დაწყობილია.
გამართლებული ნავიბარის ნავიგაციის ბმულები ამჟამად არ არის მხარდაჭერილი.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ნავიგაციის ნებისმიერი კომპონენტისთვის (ჩანართები ან ტაბლეტები), დაამატეთ .disabled
ნაცრისფერი ბმულები და არ არის სავალი ეფექტები .
<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 არის საპასუხო მეტა კომპონენტები, რომლებიც ემსახურებიან ნავიგაციის სათაურებს თქვენი აპლიკაციის ან საიტისთვის. ისინი იწყებენ კოლაფს (და გადართვას) მობილურ ხედებში და ხდებიან ჰორიზონტალური, როგორც კი ხელმისაწვდომი ხედის სიგანე იზრდება.
გამართლებული ნავიბარის ნავიგაციის ბმულები ამჟამად არ არის მხარდაჭერილი.
<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-inline
mixin-ის საშუალებით. ზოგიერთი ფორმის კონტროლი, როგორიცაა შეყვანის ჯგუფები, შეიძლება მოითხოვოს ფიქსირებული სიგანეების სწორად ჩვენება ნავიგაციის ზოლში.
<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>
დაამატეთ .navbar-btn
კლასი <button>
ელემენტებს, რომლებიც არ ცხოვრობენ a-ში, <form>
რათა ვერტიკალურად მოაწყოთ ისინი navbar-ში.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
ტექსტის სტრიქონები ელემენტში შეფუთეთ .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
მაგრამ ისინი მოთავსებულია მედია მოთხოვნებზე, მოწყობილობის ზომების მიხედვით ნავიბარის კომპონენტების უფრო მარტივი დამუშავებისთვის.
დაამატეთ .navbar-fixed-top
და ჩართეთ ნავიგაციის ზოლის შიგთავსი .container
ან .container-fluid
ცენტრში და დაბლოკეთ.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
დაამატეთ .navbar-fixed-bottom
და ჩართეთ ნავიგაციის ზოლის შიგთავსი .container
ან .container-fluid
ცენტრში და დაბლოკეთ.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
შექმენით სრული სიგანის ნავიგალური ზოლი, რომელიც გვერდის გვერდის გვერდის გვერდის გვერდის გვერდის გვერდით აშორებს ნავიბარის კონტენტის დამატებით .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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
პეიჯერის ბმულები ასევე იყენებენ ზოგად .disabled
სასარგებლო კლასს პაგინაციისგან.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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 ნავიგაციის და სხვათა დამატებით.
<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>
იმისათვის, რომ ჯუმბოტრონი სრული სიგანით და მომრგვალებული კუთხეების გარეშე მოათავსოთ, მოათავსეთ იგი ყველა .container
s-ის გარეთ და ამის ნაცვლად დაამატეთ .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 შინაარსის დამატება, როგორიცაა სათაურები, აბზაცები ან ღილაკები ესკიზებში.
<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 მოდული .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</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) , რომელიც არ იძლევა ნებას style-src 'unsafe-inline'
, მაშინ თქვენ ვერ შეძლებთ გამოიყენოთ inline style
ატრიბუტები პროგრესის ზოლის სიგანეების დასაყენებლად, როგორც ეს ნაჩვენებია ჩვენს მაგალითებში ქვემოთ. სიგანეების დაყენების ალტერნატიული მეთოდები, რომლებიც თავსებადია მკაცრ CSP-ებთან, მოიცავს მცირე მორგებული JavaScript-ის გამოყენებას (რომელიც ადგენს element.style.width
) ან პერსონალური CSS კლასების გამოყენებას.
ნაგულისხმევი პროგრესის ზოლი.
<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-only
class პროგრესის ზოლიდან, რათა ნახოთ ხილული პროცენტი.
<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-ს დამატება.
<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>
პროგრესის ზოლები იყენებენ იმავე ღილაკებს და გაფრთხილების კლასებს თანმიმდევრული სტილისთვის.
<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-ში და ქვემოთ.
<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-ში და ქვემოთ.
<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
რომ დააწყოთ ისინი.
<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>
აბსტრაქტული ობიექტების სტილები სხვადასხვა ტიპის კომპონენტების შესაქმნელად (როგორიცაა ბლოგის კომენტარები, ტვიტები და ა.შ.), რომლებიც შეიცავს მარცხნივ ან მარჯვნივ გასწორებულ სურათს ტექსტურ შინაარსთან ერთად.
ნაგულისხმევი მედია აჩვენებს მედია ობიექტს (სურათები, ვიდეო, აუდიო) შინაარსის ბლოკის მარცხნივ ან მარჯვნივ.
<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-body
html-ის შემდეგ.
სურათები ან სხვა მედია შეიძლება იყოს გასწორებული ზედა, შუა ან ქვედა. ნაგულისხმევი არის ზემოთ გასწორებული.
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.
<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 საჭიროებისამებრ.
<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>
დაამატეთ სამკერდე კომპონენტი სიის ჯგუფის ნებისმიერ ელემენტს და ის ავტომატურად განთავსდება მარჯვნივ.
<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>
დაამატეთ .disabled
a- .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
სახელმწიფოს.
<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 შიგნით, თუნდაც დაკავშირებული სიის ჯგუფებისთვის, როგორიცაა ქვემოთ.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<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 | ლარი | ჩიტი |
<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 | ლარი | ჩიტი |
<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.
<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>