ათზე მეტი მრავალჯერადი გამოყენებადი კომპონენტი შექმნილია იკონოგრაფიის, ჩამოსაშლელი ფაილების, შეყვანის ჯგუფების, ნავიგაციის, გაფრთხილებებისა და მრავალი სხვას უზრუნველსაყოფად.
გლიფიკონები
ხელმისაწვდომი გლიფები
შეიცავს 250-ზე მეტ გლიფს შრიფტის ფორმატში Glyphicon Halflings ნაკრებიდან. Glyphicons Halflings ჩვეულებრივ არ არის ხელმისაწვდომი უფასოდ, მაგრამ მათმა შემქმნელმა ისინი ხელმისაწვდომი გახადა Bootstrap-ისთვის უფასოდ. მადლობის ნიშნად, ჩვენ მხოლოდ გთხოვთ, რომ შეძლებისდაგვარად შეიყვანოთ ბმული Glyphicons-ზე .
შესრულების მიზეზების გამო, ყველა ხატულა მოითხოვს საბაზისო კლასს და ინდივიდუალურ ხატულ კლასს. გამოსაყენებლად, განათავსეთ შემდეგი კოდი თითქმის ყველგან. დარწმუნდით, რომ დატოვეთ სივრცე ხატსა და ტექსტს შორის სათანადო შიგთავსისთვის.
არ შეურიოთ სხვა კომპონენტებს
ხატების კლასები არ შეიძლება პირდაპირ გაერთიანდეს სხვა კომპონენტებთან. ისინი არ უნდა იქნას გამოყენებული სხვა კლასებთან ერთად იმავე ელემენტზე. ამის ნაცვლად, დაამატეთ წყობილი <span>და გამოიყენეთ ხატულას კლასები <span>.
მხოლოდ ცარიელ ელემენტებზე გამოსაყენებლად
ხატულას კლასები უნდა იქნას გამოყენებული მხოლოდ იმ ელემენტებზე, რომლებიც არ შეიცავს ტექსტურ შინაარსს და არ გააჩნიათ შვილობილი ელემენტები.
ხატის შრიფტის მდებარეობის შეცვლა
Bootstrap ვარაუდობს, რომ ხატის შრიფტის ფაილები განთავსდება ../fonts/დირექტორიაში, შედგენილ CSS ფაილებთან შედარებით. ამ შრიფტის ფაილების გადატანა ან სახელის გადარქმევა ნიშნავს CSS-ის განახლებას სამი გზით:
შეცვალეთ @icon-font-pathდა/ან @icon-font-nameცვლადები წყარო Less ფაილებში.
გამოიყენეთ ნებისმიერი ვარიანტი, რომელიც საუკეთესოდ შეეფერება თქვენს კონკრეტულ განვითარების კონფიგურაციას.
ხელმისაწვდომი ხატები
დამხმარე ტექნოლოგიების თანამედროვე ვერსიები გამოაცხადებს CSS გენერირებულ კონტენტს, ასევე უნიკოდის სპეციფიკურ სიმბოლოებს. იმისათვის, რომ თავიდან ავიცილოთ უნებლიე და დამაბნეველი გამომავალი ეკრანის მკითხველებში (განსაკუთრებით მაშინ, როდესაც ხატები გამოიყენება მხოლოდ დეკორაციისთვის), ჩვენ მათ ვმალავთ aria-hidden="true"ატრიბუტით.
თუ თქვენ იყენებთ ხატულას მნიშვნელობის გადმოსაცემად (და არა მხოლოდ როგორც დეკორატიულ ელემენტად), დარწმუნდით, რომ ეს მნიშვნელობა ასევე მიეწოდება დამხმარე ტექნოლოგიებს – მაგალითად, შეიტანეთ დამატებითი შინაარსი, ვიზუალურად დამალული .sr-onlyკლასში.
თუ თქვენ ქმნით მართვის საშუალებებს სხვა ტექსტის გარეშე (როგორიცაა <button>მხოლოდ ხატულა შეიცავს), ყოველთვის უნდა მიაწოდოთ ალტერნატიული კონტენტი კონტროლის მიზნის დასადგენად, რათა ის აზრი იყოს დამხმარე ტექნოლოგიების მომხმარებლებისთვის. ამ შემთხვევაში, თქვენ შეგიძლიათ დაამატოთ aria-labelატრიბუტი თავად კონტროლზე.
მაგალითები
გამოიყენეთ ისინი ღილაკებში, ღილაკების ჯგუფებში ხელსაწყოთა ზოლში, ნავიგაციაში ან წინასწარ დაყენებულ ფორმაში.
ხატულა, რომელიც გამოიყენება გაფრთხილებაში , რათა გადმოგცეთ, რომ ეს არის შეცდომის შეტყობინება, დამატებითი .sr-onlyტექსტით ამ მინიშნების გადასაცემად დამხმარე ტექნოლოგიების მომხმარებლებისთვის.
შეფუთეთ ჩამოსაშლელი ტრიგერის და ჩამოსაშლელი მენიუს შიგნით .dropdownან სხვა ელემენტში, რომელიც აცხადებს position: relative;. შემდეგ დაამატეთ მენიუს HTML.
ნაგულისხმევად, ჩამოსაშლელი მენიუ ავტომატურად განლაგებულია 100%-ით ზემოდან და მისი მშობლის მარცხენა მხარეს. დაამატეთ .dropdown-menu-righta- .dropdown-menuში მარჯვნივ გასწორება ჩამოსაშლელი მენიუში.
შეიძლება საჭირო გახდეს დამატებითი პოზიციონირება
ჩამოსაშლელი ფაილები ავტომატურად განლაგებულია CSS-ის საშუალებით დოკუმენტის ნორმალურ ნაკადში. ეს ნიშნავს, რომ ჩამოსაშლელი ფაილები შეიძლება ამოჭრას მშობლების მიერ გარკვეული overflowთვისებების მქონე ან გამოჩნდეს ხედვის საზღვრებს გარეთ. მოაგვარეთ ეს საკითხები დამოუკიდებლად, როგორც კი ისინი წარმოიქმნება.
მოძველებული .pull-rightგასწორება
v3.1.0- .pull-rightდან ჩამოსაშლელი მენიუები მოძველდა. მენიუს მარჯვნივ გასასწორებლად გამოიყენეთ .dropdown-menu-right. მარცხნივ გასწორებული nav-კომპონენტები navbar-ში იყენებენ ამ კლასის mixin ვერსიას მენიუს ავტომატურად გასწორებისთვის. მის გასაუქმებლად გამოიყენეთ .dropdown-menu-left.
სათაურები
დაამატეთ სათაური მოქმედებების სექციების ლეიბლისთვის ნებისმიერ ჩამოსაშლელ მენიუში.
დააჯგუფეთ ღილაკების სერია ერთ ხაზზე ღილაკების ჯგუფთან ერთად. დაამატეთ არასავალდებულო JavaScript რადიო და ჩამრთველი სტილის ქცევა ჩვენი ღილაკების მოდულით .
ღილაკების ჯგუფებში ინსტრუმენტების მინიშნებები და პოვერები საჭიროებს სპეციალურ პარამეტრს
როდესაც იყენებთ ინსტრუმენტების რჩევებს ან პოპოვერებს ელემენტებზე .btn-group, თქვენ უნდა მიუთითოთ container: 'body'არასასურველი გვერდითი ეფექტების თავიდან აცილების ვარიანტი (როგორიცაა ელემენტი ფართოვდება და/ან კარგავს მომრგვალებულ კუთხეებს, როდესაც ხელსაწყოს მინიშნება ან პოპოვერ ამოქმედდება).
დარწმუნდით, რომ სწორია roleდა მიაწოდეთ ეტიკეტი
იმისათვის, რომ დამხმარე ტექნოლოგიებმა - როგორიცაა ეკრანის წამკითხველები - გადმოგცეთ, რომ ღილაკების სერია დაჯგუფებულია, საჭიროა შესაბამისი roleატრიბუტის მიწოდება. ღილაკების ჯგუფებისთვის ეს იქნება role="group", ხოლო ხელსაწყოთა ზოლებს უნდა ჰქონდეს role="toolbar".
ერთი გამონაკლისი არის ჯგუფები, რომლებიც შეიცავს მხოლოდ ერთ კონტროლს (მაგალითად, გამართლებული ღილაკების ჯგუფებს ელემენტებით <button>) ან ჩამოსაშლელ ღილაკს.
გარდა ამისა, ჯგუფებს და ხელსაწყოების ზოლებს უნდა მიენიჭოს მკაფიო ეტიკეტი, რადგან დამხმარე ტექნოლოგიების უმეტესობა სხვაგვარად არ გამოაცხადებს მათ, მიუხედავად სწორი roleატრიბუტის არსებობისა. აქ მოყვანილ მაგალითებში ჩვენ ვიყენებთ aria-label, მაგრამ ისეთი ალტერნატივების aria-labelledbyგამოყენებაც შესაძლებელია.
იმის ნაცვლად, რომ გამოიყენოთ ღილაკების ზომის კლასები ჯგუფში ყველა ღილაკზე, უბრალოდ დაამატეთ .btn-group-*თითოეულს .btn-group, მათ შორის, მრავალი ჯგუფის ბუდობისას.
ბუდე
მოათავსეთ .btn-groupმეორეში, .btn-groupროდესაც გსურთ ჩამოსაშლელი მენიუები შერეული ღილაკების სერიით.
გააკეთეთ ღილაკების ჯგუფი, რომელიც გაიჭიმება თანაბარი ზომით, რათა დაფაროს მისი მშობლის მთელ სიგანეზე. ასევე მუშაობს ღილაკების ჩამოსაშლელებთან ღილაკების ჯგუფში.
საზღვრების დამუშავება
ღილაკების გასამართლებლად გამოყენებული სპეციფიკური HTML და CSS-ის გამო (კერძოდ display: table-cell), მათ შორის საზღვრები გაორმაგებულია. ჩვეულებრივ ღილაკების ჯგუფებში, margin-left: -1pxგამოიყენება საზღვრების დასაწყობად მათი ამოღების ნაცვლად. თუმცა, marginარ მუშაობს display: table-cell. შედეგად, Bootstrap-ის თქვენი პერსონალიზაციის მიხედვით, შეიძლება მოგინდეთ საზღვრების ამოღება ან ხელახლა შეღებვა.
IE8 და საზღვრები
Internet Explorer 8 არ ასახავს ღილაკების საზღვრებს გამართლებული ღილაკების ჯგუფში, იქნება ეს ჩართული <a>თუ <button>ელემენტები. ამის გადასაჭრელად, გადაიტანეთ თითოეული ღილაკი მეორეში .btn-group.
თუ <a>ელემენტები გამოიყენება ღილაკების როლში – ააქტიურებს გვერდის ფუნქციონირებას, ვიდრე მიმდინარე გვერდზე სხვა დოკუმენტში ან განყოფილებაში ნავიგაციისთვის – მათ ასევე უნდა მიეცეს შესაბამისი role="button".
<button>ელემენტებით _
<button>ელემენტებით დასაბუთებული ღილაკების ჯგუფების გამოსაყენებლად , თქვენ უნდა შეფუთოთ თითოეული ღილაკი ღილაკების ჯგუფში . ბრაუზერების უმეტესობა სათანადოდ არ იყენებს ჩვენს CSS-ს <button>ელემენტების დასაბუთებისთვის, მაგრამ რადგან ჩვენ მხარს ვუჭერთ ღილაკების ჩამოსაშლელებს, შეგვიძლია ვიმუშაოთ ამის გარშემო.
ღილაკების ჩამოსაშლელები
გამოიყენეთ ნებისმიერი ღილაკი ჩამოსაშლელი მენიუს გასააქტიურებლად, მისი მოთავსებით .btn-groupდა მენიუს შესაბამისი მარკირების უზრუნველყოფით.
დანამატის დამოკიდებულება
ღილაკების ჩამოსაშლელი ჩანაწერები მოითხოვს ჩამოსაშლელ დანამატს ჩართოთ Bootstrap-ის თქვენს ვერსიაში.
ერთი ღილაკის ჩამოსაშლელები
გადააქციეთ ღილაკი ჩამოსაშლელ გადამრთველად რამდენიმე ძირითადი მარკირების ცვლილებებით.
გააფართოვეთ ფორმის კონტროლი ტექსტის ან ღილაკების დამატებით ნებისმიერი ტექსტზე დაფუძნებული ტექსტის წინ, შემდეგ ან ორივე მხარეს <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) ერთ მხარეს.
ჩვენ არ ვუჭერთ მხარს რამდენიმე ფორმა-კონტროლს ერთ შეყვანის ჯგუფში.
გაზომვა
დაამატეთ ფორმის შედარებითი ზომის კლასები საკუთარ .input-groupთავში და შიგნით შიგთავსი ავტომატურად შეიცვლება ზომა-არ არის საჭირო თითოეულ ელემენტზე ფორმის კონტროლის ზომის კლასების გამეორება.
მოსანიშნი ველები და რადიო დამატებები
ტექსტის ნაცვლად მოათავსეთ ნებისმიერი მოსანიშნი ველი ან რადიო ვარიანტი შეყვანის ჯგუფის დანამატში.
ღილაკების დამატებები
შეყვანის ჯგუფებში ღილაკები ცოტა განსხვავებულია და საჭიროებენ ერთ დამატებით დონეს. ამის ნაცვლად .input-group-addon, თქვენ უნდა გამოიყენოთ .input-group-btnღილაკების გადასახვევად. ეს საჭიროა ბრაუზერის ნაგულისხმევი სტილის გამო, რომელთა გადაფარვა შეუძლებელია.
ღილაკები ჩამოსაშლელი ღილაკებით
სეგმენტირებული ღილაკები
მრავალი ღილაკი
მიუხედავად იმისა, რომ თქვენ შეგიძლიათ გქონდეთ მხოლოდ ერთი დანამატი თითოეულ მხარეს, შეგიძლიათ გქონდეთ რამდენიმე ღილაკი ერთში .input-group-btn.
ნავები
Bootstrap-ში ხელმისაწვდომ ნავიგს აქვს გაზიარებული მარკირება, დაწყებული საბაზისო .navკლასით, ისევე როგორც საერთო მდგომარეობები. შეცვალეთ მოდიფიკატორის კლასები თითოეულ სტილს შორის გადასართავად.
ჩანართების პანელებისთვის navs-ის გამოყენება მოითხოვს JavaScript ჩანართების დანამატს
ჩანართის მქონე ჩანართებისთვის, თქვენ უნდა გამოიყენოთ ჩანართების JavaScript მოდული . მარკირება ასევე საჭიროებს დამატებით და ARIA ატრიბუტებს – დამატებითი დეტალებისთვის roleიხილეთ მოდულის მარკირების მაგალითი .
გახადეთ ნავიგაციისთვის გამოყენებული ნავიგაციის ხელმისაწვდომობა
თუ იყენებთ ნავიგაციას ნავიგაციის ზოლის უზრუნველსაყოფად, დარწმუნდით, რომ დაამატეთ A- role="navigation"ს ყველაზე ლოგიკურ მშობელ კონტეინერში <ul>, ან გადაიტანეთ <nav>ელემენტი მთელ ნავიგაციაზე. არ დაამატოთ როლი <ul>თავისთავად, რადგან ეს ხელს შეუშლის მის გამოცხადებას დამხმარე ტექნოლოგიების მიერ რეალურ სიაში.
ჩანართები
გაითვალისწინეთ, რომ .nav-tabsკლასი მოითხოვს .navსაბაზისო კლასს.
მარტივად გააკეთეთ ჩანართები ან აბები მათი მშობლის სიგანეების 768 პიქსელზე ფართო ეკრანებზე .nav-justified. პატარა ეკრანებზე ნავიგაციის ბმულები დაწყობილია.
გამართლებული ნავიბარის ნავიგაციის ბმულები ამჟამად არ არის მხარდაჭერილი.
Safari და საპასუხო გამართლებული ნავი
v9.1.2-ის მდგომარეობით, Safari ავლენს შეცდომას, რომლის დროსაც თქვენი ბრაუზერის ზომის შეცვლა ჰორიზონტალურად იწვევს გამართლებულ ნავიგაციაში შეცდომებს, რომლებიც იშლება განახლებისას. ეს შეცდომა ასევე ნაჩვენებია გამართლებული nav-ის მაგალითში .
Navbars არის საპასუხო მეტა კომპონენტები, რომლებიც ემსახურებიან ნავიგაციის სათაურებს თქვენი აპლიკაციის ან საიტისთვის. ისინი იწყებენ კოლაფს (და გადართვას) მობილურ ხედებში და ხდებიან ჰორიზონტალური, როგორც კი ხელმისაწვდომი ხედის სიგანე იზრდება.
გამართლებული ნავიბარის ნავიგაციის ბმულები ამჟამად არ არის მხარდაჭერილი.
გადატვირთული შინაარსი
იმის გამო, რომ Bootstrap-მა არ იცის, რამდენი სივრცე სჭირდება შიგთავსს თქვენს navbar-ში, შეიძლება შეგექმნათ პრობლემები კონტენტის მეორე რიგში შეფუთვასთან დაკავშირებით. ამის გადასაჭრელად შეგიძლიათ:
შეამცირეთ ნავიბარის ელემენტების რაოდენობა ან სიგანე.
შეცვალეთ წერტილი, რომლითაც თქვენი ნავიბარი გადართავს ჩაკეცულ და ჰორიზონტალურ რეჟიმებს შორის. დააკონფიგურირეთ @grid-float-breakpointცვლადი ან დაამატეთ თქვენი საკუთარი მედია მოთხოვნა.
მოითხოვს JavaScript დანამატს
თუ JavaScript გამორთულია და ხედის პორტი საკმარისად ვიწროა, რომ ნავიგალური ზოლი დაიშალოს, შეუძლებელი იქნება ნავი ზოლის გაფართოება და შინაარსის ნახვა ში .navbar-collapse.
საპასუხო ნავიბარი მოითხოვს კოლაფსის მოდულის ჩართვას Bootstrap-ის თქვენს ვერსიაში.
ჩაკეცილი მობილური ნავიბარის წყვეტის წერტილის შეცვლა
Navbar იშლება მის ვერტიკალურ მობილურ ხედში, როდესაც ხედის პორტი უფრო ვიწროა @grid-float-breakpoint, და ფართოვდება მის ჰორიზონტალურ არამობილურ ხედში, როდესაც ხედის პორტი მინიმუმ @grid-float-breakpointსიგანეშია. დაარეგულირეთ ეს ცვლადი Less source-ში, რათა აკონტროლოთ ნავი ზოლის დაშლის/გაფართოების დროს. ნაგულისხმევი მნიშვნელობა არის 768px(ყველაზე პატარა "პატარა" ან "ტაბლეტის" ეკრანი).
გახადეთ ნავი ზოლები ხელმისაწვდომი
დარწმუნდით, რომ გამოიყენეთ <nav>ელემენტი, ან, თუ იყენებთ უფრო ზოგად ელემენტს, როგორიცაა <div>, დაამატეთ A role="navigation"ყველა ნავიგბარს, რათა მკაფიოდ განსაზღვროთ ის, როგორც საეტაპო რეგიონი დამხმარე ტექნოლოგიების მომხმარებლებისთვის.
ბრენდის იმიჯი
შეცვალეთ navbar-ის ბრენდი თქვენი საკუთარი გამოსახულებით, ტექსტის შეცვლით <img>. ვინაიდან მას .navbar-brandაქვს საკუთარი ბალიშები და სიმაღლე, შეიძლება დაგჭირდეთ ზოგიერთი CSS-ის გადალახვა თქვენი სურათიდან გამომდინარე.
ფორმები
მოათავსეთ ფორმის შინაარსი .navbar-formსწორი ვერტიკალური გასწორებისთვის და ჩაკეცილი ქცევისთვის ვიწრო ხედებში. გამოიყენეთ გასწორების ოფციები, რათა გადაწყვიტოთ სად არის ის ნავიბარის შინაარსში.
როგორც heads up, .navbar-formიზიარებს მისი კოდის დიდ ნაწილს .form-inlinemixin-ის საშუალებით. ზოგიერთი ფორმის კონტროლი, როგორიცაა შეყვანის ჯგუფები, შეიძლება მოითხოვოს ფიქსირებული სიგანეების სწორად ჩვენება ნავიგაციის ზოლში.
მობილური მოწყობილობის გაფრთხილებები
არსებობს გარკვეული გაფრთხილებები მობილური მოწყობილობებზე ფიქსირებულ ელემენტებში ფორმის კონტროლის გამოყენებასთან დაკავშირებით. იხილეთ ჩვენი ბრაუზერის მხარდაჭერის დოკუმენტები დეტალებისთვის.
ყოველთვის დაამატეთ ეტიკეტები
ეკრანის მკითხველებს პრობლემები შეექმნებათ თქვენს ფორმებთან დაკავშირებით, თუ არ ჩაურთავთ ლეიბლს ყველა შეყვანისთვის. ამ ხაზოვანი ფორმებისთვის შეგიძლიათ დაიმალოთ ეტიკეტები .sr-onlyკლასის გამოყენებით. არსებობს დამხმარე ტექნოლოგიებისთვის ეტიკეტის მიწოდების სხვა ალტერნატიული მეთოდები, როგორიცაა aria-label, aria-labelledbyან titleატრიბუტი. თუ არცერთი მათგანი არ არის, ეკრანის მკითხველებმა შეიძლება მიმართონ placeholderატრიბუტის გამოყენებას, თუ ეს არსებობს, მაგრამ გაითვალისწინეთ, რომ placeholderეტიკეტირების სხვა მეთოდების შემცვლელად გამოყენება არ არის რეკომენდებული.
ღილაკები
დაამატეთ .navbar-btnკლასი <button>ელემენტებს, რომლებიც არ ცხოვრობენ a-ში, <form>რათა ვერტიკალურად მოაწყოთ ისინი navbar-ში.
კონტექსტური გამოყენება
სტანდარტული ღილაკების კლასების მსგავსად , .navbar-btnშეიძლება გამოყენებულ იქნას <a>ელემენტებზე <input>. თუმცა, არც .navbar-btnღილაკების სტანდარტული კლასები არ უნდა იყოს <a>გამოყენებული .navbar-nav.
ტექსტი
ტექსტის სტრიქონები ელემენტში შეფუთეთ .navbar-text, ჩვეულებრივ <p>ტეგზე სწორი წამყვანის და ფერის მისაღებად.
არანავი ბმულები
მათთვის, ვინც იყენებს სტანდარტულ ბმულებს, რომლებიც არ შედის ნავიგაციის სტანდარტულ კომპონენტში, გამოიყენეთ .navbar-linkკლასი, რომ დაამატოთ შესაბამისი ფერები ნაგულისხმევი და ინვერსიული ნავიგაციის პარამეტრებისთვის.
კომპონენტის გასწორება
გაასწორეთ ნავიგაციის ბმულები, ფორმები, ღილაკები ან ტექსტი, .navbar-leftან .navbar-rightსასარგებლო კლასების გამოყენებით. ორივე კლასი დაამატებს CSS float-ს მითითებული მიმართულებით. მაგალითად, ნავიგაციის ბმულების გასასწორებლად, განათავსეთ ისინი განცალკევებულში <ul>შესაბამისი სასარგებლო კლასებით.
ეს კლასები არის და-ის შერეული ვერსიები .pull-left, .pull-rightმაგრამ ისინი მოთავსებულია მედია მოთხოვნებზე, მოწყობილობის ზომების მიხედვით ნავიბარის კომპონენტების უფრო მარტივი დამუშავებისთვის.
რამდენიმე კომპონენტის მარჯვენა გასწორება
Navbars ამჟამად აქვს შეზღუდვა მრავალი კლასით .navbar-right. იმისათვის, რომ სწორად შევცვალოთ შინაარსი, ჩვენ ვიყენებთ უარყოფით ზღვარს ბოლო .navbar-rightელემენტზე. როდესაც ამ კლასს იყენებს მრავალი ელემენტი, ეს მინდვრები არ მუშაობს ისე, როგორც ეს იყო დაგეგმილი.
ჩვენ განვიხილავთ ამას, როდესაც შევძლებთ ამ კომპონენტის გადაწერას v4-ში.
დამაგრებულია ზევით
დაამატეთ .navbar-fixed-topდა ჩართეთ ნავიგაციის ზოლის შიგთავსი .containerან .container-fluidცენტრში და დაბლოკეთ.
საჭიროა სხეულის ბალიშები
ფიქსირებული ნავიგატორი გადაფარავს თქვენს სხვა შინაარსს, თუ არ დაამატებთ paddingზევით <body>. სცადეთ თქვენი საკუთარი ღირებულებები ან გამოიყენეთ ჩვენი ფრაგმენტი ქვემოთ. რჩევა: ნაგულისხმევად, ნავი ბარი არის 50 პიქსელის სიმაღლე.
დარწმუნდით, რომ ჩართეთ ეს ძირითადი Bootstrap CSS-ის შემდეგ .
დაფიქსირდა ბოლოში
დაამატეთ .navbar-fixed-bottomდა ჩართეთ ნავიგაციის ზოლის შიგთავსი .containerან .container-fluidცენტრში და დაბლოკეთ.
საჭიროა სხეულის ბალიშები
ფიქსირებული ნავიგატორი გადაფარავს თქვენს სხვა შინაარსს, თუ არ დაამატებთ paddingბოლოში <body>. სცადეთ თქვენი საკუთარი ღირებულებები ან გამოიყენეთ ჩვენი ფრაგმენტი ქვემოთ. რჩევა: ნაგულისხმევად, ნავი ბარი არის 50 პიქსელის სიმაღლე.
დარწმუნდით, რომ ჩართეთ ეს ძირითადი Bootstrap CSS-ის შემდეგ .
სტატიკური ზედა
შექმენით სრული სიგანის ნავიგალური ზოლი, რომელიც გვერდის გვერდის გვერდის გვერდის გვერდის გვერდის გვერდით აშორებს ნავიბარის კონტენტის დამატებით .navbar-static-topან .containerცენტრში .container-fluidდა ბლოკის ჩასმა.
კლასებისგან განსხვავებით .navbar-fixed-*, თქვენ არ გჭირდებათ რაიმე ბალიშის შეცვლა body.
ინვერსიული ნავიგატორი
შეცვალეთ navbar-ის გარეგნობა დამატებით .navbar-inverse.
პურის ნამსხვრევები
მიუთითეთ მიმდინარე გვერდის მდებარეობა სანავიგაციო იერარქიაში.
მიაწოდეთ პაგინაციის ბმულები თქვენი საიტისთვის ან აპისთვის მრავალგვერდიანი პაგინაციის კომპონენტით ან პეიჯერის უფრო მარტივი ალტერნატივით .
ნაგულისხმევი პაგინაცია
მარტივი პაგინაცია, შთაგონებული Rdio-ით, შესანიშნავია აპებისა და ძიების შედეგებისთვის. დიდი ბლოკი ძნელია გამოტოვოთ, ადვილად მასშტაბირებადია და უზრუნველყოფს დაწკაპუნების დიდ არეებს.
პაგინაციის კომპონენტის მარკირება
პაგინაციის კომპონენტი უნდა იყოს შეფუთული <nav>ელემენტში, რათა იდენტიფიცირდეს ის, როგორც სანავიგაციო განყოფილება ეკრანის წამკითხველებისთვის და სხვა დამხმარე ტექნოლოგიებისთვის. გარდა ამისა, რადგან გვერდს სავარაუდოდ უკვე აქვს ერთზე მეტი ნავიგაციის სექცია (როგორიცაა პირველადი ნავიგაცია სათაურში ან გვერდითი ზოლის ნავიგაცია), მიზანშეწონილია მიაწოდოთ აღწერილობა aria-label, <nav>რომელიც ასახავს მის მიზანს. მაგალითად, თუ პაგინაციის კომპონენტი გამოიყენება ძიების შედეგებს შორის ნავიგაციისთვის, შესაბამისი ლეიბლი შეიძლება იყოს aria-label="Search results pages".
ინვალიდი და აქტიური ქვეყნები
ბმულები მორგებულია სხვადასხვა სიტუაციისთვის. გამოიყენეთ .disabledდაუწკაპუნებელი ბმულებისთვის და .activeმიმდინარე გვერდის მითითებისთვის.
ჩვენ გირჩევთ, შეცვალოთ აქტიური ან გამორთული წამყვანები <span>ან გამოტოვოთ წამყვანი წინა/შემდეგი ისრების შემთხვევაში, რათა ამოიღოთ დაწკაპუნების ფუნქციონალობა და შეინარჩუნოთ განკუთვნილი სტილი.
გაზომვა
გნებავთ უფრო დიდი თუ პატარა პაგინაცია? დაამატეთ .pagination-lgან .pagination-smდამატებითი ზომებისთვის.
პეიჯერი
სწრაფი წინა და შემდეგი ბმულები მარტივი პაგინაციის განხორციელებისთვის მსუბუქი მარკირებით და სტილებით. ეს შესანიშნავია მარტივი საიტებისთვის, როგორიცაა ბლოგები ან ჟურნალები.
ნაგულისხმევი მაგალითი
ნაგულისხმევად, პეიჯერის ცენტრებში ბმულები.
გასწორებული ბმულები
ალტერნატიულად, თქვენ შეგიძლიათ გაასწოროთ თითოეული ბმული გვერდებზე:
სურვილისამებრ გამორთული მდგომარეობა
პეიჯერის ბმულები ასევე იყენებენ ზოგად .disabledსასარგებლო კლასს პაგინაციისგან.
ეტიკეტები
მაგალითი
მაგალითი სათაური ახალი
მაგალითი სათაური ახალი
მაგალითი სათაური ახალი
მაგალითი სათაური ახალი
მაგალითი სათაური ახალი
მაგალითი სათაური ახალი
ხელმისაწვდომი ვარიაციები
დაამატეთ ქვემოთ ჩამოთვლილი მოდიფიკატორების კლასებიდან რომელიმე, რომ შეცვალოთ ლეიბლის გარეგნობა.
ნაგულისხმევი პირველადი წარმატების ინფორმაცია გაფრთხილების საფრთხე
ტონა ეტიკეტები გაქვთ?
რენდერინგის პრობლემები შეიძლება წარმოიშვას, როდესაც ვიწრო კონტეინერში გაქვთ ათობით ჩასმული ლეიბლი, თითოეული შეიცავს საკუთარ inline-blockელემენტს (ხატის მსგავსად). ეს არის დაყენება display: inline-block;. კონტექსტისა და მაგალითისთვის იხილეთ #13219 .
სამკერდე ნიშნები
მარტივად მონიშნეთ ახალი ან წაუკითხავი ელემენტები <span class="badge">ბმულების, Bootstrap ნავიგაციის და სხვათა დამატებით.
როდესაც არ არის ახალი ან წაუკითხავი ერთეულები, სამკერდე ნიშნები უბრალოდ იშლება (CSS-ის :emptyამომრჩეველის მეშვეობით) იმ პირობით, რომ მასში შინაარსი არ არის.
ჯვარედინი ბრაუზერის თავსებადობა
სამკერდე ნიშნები თავად არ იშლება Internet Explorer 8-ში, რადგან მას არ გააჩნია :emptyსელექტორის მხარდაჭერა.
ადაპტირდება ნავიგაციის აქტიურ მდგომარეობებთან
ჩაშენებული სტილები შედის სამკერდე ნიშნების აქტიურ მდგომარეობებში დასაყენებლად ტაბლეტების ნავიგაციაში.
იმისათვის, რომ ჯუმბოტრონი სრული სიგანით და მომრგვალებული კუთხეების გარეშე მოათავსოთ, მოათავსეთ იგი ყველა .containers-ის გარეთ და ამის ნაცვლად დაამატეთ .containerშიგნით.
გვერდის სათაური
მარტივი გარსი h1გვერდის შინაარსის სექციების სათანადოდ განსათავსებლად და სეგმენტისთვის. მას შეუძლია გამოიყენოს h1ნაგულისხმევი smallელემენტი, ისევე როგორც სხვა კომპონენტების უმეტესობა (დამატებითი სტილებით).
გვერდის სათაურის მაგალითი სათაურის ქვეტექსტი
ესკიზები
გააფართოვეთ Bootstrap-ის ბადის სისტემა მინიატურების კომპონენტით, რათა ადვილად აჩვენოთ სურათების, ვიდეოების, ტექსტის და სხვა ბადეები.
თუ თქვენ ეძებთ Pinterest-ის მსგავს პრეზენტაციას სხვადასხვა სიმაღლის და/ან სიგანის ესკიზების, თქვენ უნდა გამოიყენოთ მესამე მხარის დანამატი, როგორიცაა Masonry , იზოტოპი ან Salvattore .
ნაგულისხმევი მაგალითი
ნაგულისხმევად, Bootstrap-ის ესკიზები შექმნილია იმისთვის, რომ აჩვენოს დაკავშირებული სურათები მინიმალური საჭირო მარკირებით.
მორგებული კონტენტი
ცოტა დამატებითი მარკირებით, შესაძლებელია ნებისმიერი სახის HTML შინაარსის დამატება, როგორიცაა სათაურები, აბზაცები ან ღილაკები ესკიზებში.
მინიატურების ეტიკეტი
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.
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.
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.
მიაწოდეთ კონტექსტური უკუკავშირის შეტყობინებები მომხმარებლის ტიპიური ქმედებებისთვის რამდენიმე ხელმისაწვდომი და მოქნილი გაფრთხილების შეტყობინებებით.
მაგალითები
შეფუთეთ ნებისმიერი ტექსტი და არჩევითი გაუქმების ღილაკი .alertდა ოთხი კონტექსტური კლასიდან ერთ-ერთში (მაგ., .alert-success) ძირითადი გაფრთხილების შეტყობინებებისთვის.
ნაგულისხმევი კლასი არ არის
გაფრთხილებებს არ აქვს ნაგულისხმევი კლასები, მხოლოდ საბაზისო და მოდიფიკატორის კლასები. ნაგულისხმევი ნაცრისფერი გაფრთხილება არ აქვს ზედმეტად აზრი, ამიტომ თქვენ უნდა მიუთითოთ ტიპი კონტექსტური კლასის მეშვეობით. აირჩიეთ წარმატება, ინფორმაცია, გაფრთხილება ან საფრთხე.
კარგად გააკეთე! თქვენ წარმატებით წაიკითხეთ ეს მნიშვნელოვანი გაფრთხილება.
Თავები მაღლა! ეს გაფრთხილება საჭიროებს თქვენს ყურადღებას, მაგრამ ეს არ არის ძალიან მნიშვნელოვანი.
გაფრთხილება! სჯობს შეამოწმოთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით.
ოჰ სნეპი! შეცვალეთ რამდენიმე რამ და სცადეთ ხელახლა გაგზავნა.
გაუქმებული გაფრთხილებები
ააშენეთ ნებისმიერი გაფრთხილება არჩევითი .alert-dismissibleდა დახურვის ღილაკის დამატებით.
მიაწოდეთ განახლებული გამოხმაურება სამუშაო პროცესის ან მოქმედების მიმდინარეობის შესახებ მარტივი, მაგრამ მოქნილი პროგრესის ზოლებით.
ჯვარედინი ბრაუზერის თავსებადობა
პროგრესის ზოლები იყენებენ CSS3 გადასვლებს და ანიმაციებს მათი ზოგიერთი ეფექტის მისაღწევად. ეს ფუნქციები არ არის მხარდაჭერილი Internet Explorer 9-ში და Firefox-ის ქვემოთ ან უფრო ძველ ვერსიებში. Opera 12 არ უჭერს მხარს ანიმაციას.
კონტენტის უსაფრთხოების პოლიტიკის (CSP) თავსებადობა
თუ თქვენს ვებსაიტს აქვს შიგთავსის უსაფრთხოების პოლიტიკა (CSP) , რომელიც არ იძლევა ნებას style-src 'unsafe-inline', მაშინ თქვენ ვერ შეძლებთ გამოიყენოთ inline styleატრიბუტები პროგრესის ზოლის სიგანეების დასაყენებლად, როგორც ეს ნაჩვენებია ჩვენს მაგალითებში ქვემოთ. სიგანეების დაყენების ალტერნატიული მეთოდები, რომლებიც თავსებადია მკაცრ CSP-ებთან, მოიცავს მცირე მორგებული JavaScript-ის გამოყენებას (რომელიც ადგენს element.style.width) ან პერსონალური CSS კლასების გამოყენებას.
ძირითადი მაგალითი
ნაგულისხმევი პროგრესის ზოლი.
60% დასრულებული
ეტიკეტით
ამოიღეთ <span>with .sr-onlyclass პროგრესის ზოლიდან, რათა ნახოთ ხილული პროცენტი.
60%
იმის უზრუნველსაყოფად, რომ ლეიბლის ტექსტი იკითხება დაბალ პროცენტებშიც კი, განიხილეთ min-widthპროგრესის ზოლში a-ს დამატება.
0%
2%
კონტექსტური ალტერნატივები
პროგრესის ზოლები იყენებენ იმავე ღილაკებს და გაფრთხილების კლასებს თანმიმდევრული სტილისთვის.
40% დასრულებული (წარმატება)
20% დასრულებული
60% დასრულებული (გაფრთხილება)
80% დასრულებული (საშიში)
ზოლიანი
იყენებს გრადიენტს ზოლიანი ეფექტის შესაქმნელად. მიუწვდომელია IE9-ში და ქვემოთ.
40% დასრულებული (წარმატება)
20% დასრულებული
60% დასრულებული (გაფრთხილება)
80% დასრულებული (საშიში)
ანიმაციური
დაამატეთ ზოლების ანიმაციისთვის მარჯვნივ მარცხნივ .active. .progress-bar-stripedმიუწვდომელია IE9-ში და ქვემოთ.
45% დასრულებული
დაწყობილი
მოათავსეთ რამდენიმე ზოლი იმავეში, .progressრომ დააწყოთ ისინი.
35% დასრულებული (წარმატება)
20% დასრულებული (გაფრთხილება)
10% დასრულებული (საშიში)
მედია ობიექტი
აბსტრაქტული ობიექტების სტილები სხვადასხვა ტიპის კომპონენტების შესაქმნელად (როგორიცაა ბლოგის კომენტარები, ტვიტები და ა.შ.), რომლებიც შეიცავს მარცხნივ ან მარჯვნივ გასწორებულ სურათს ტექსტურ შინაარსთან ერთად.
ნაგულისხმევი მედია
ნაგულისხმევი მედია აჩვენებს მედია ობიექტს (სურათები, ვიდეო, აუდიო) შინაარსის ბლოკის მარცხნივ ან მარჯვნივ.
მედიის სათაური
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.
კლასები .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.
მედიის სია
ცოტა დამატებითი მარკირებით, შეგიძლიათ გამოიყენოთ მედია შიგნიდან სიაში (გამოყენებულია კომენტარების თემებისთვის ან სტატიების სიებისთვის).
მედიის სათაური
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.
სიის ჯგუფი
სიის ჯგუფები არის მოქნილი და ძლიერი კომპონენტი ელემენტების არა მხოლოდ მარტივი სიების საჩვენებლად, არამედ კომპლექსური პერსონალური შინაარსით.
ძირითადი მაგალითი
სიის ყველაზე ძირითადი ჯგუფი არის უბრალოდ შეუკვეთავი სია სიის ელემენტებით და შესაბამისი კლასებით. დაეყრდნობით მას შემდეგი ვარიანტებით, ან თქვენი საკუთარი CSS საჭიროებისამებრ.
Cras justo odio
Dapibus ac facilisis in
მორბი ლეო რისუსი
Porta ac consectetur ac
ვესტიბულუმი და ეროსი
სამკერდე ნიშნები
დაამატეთ სამკერდე კომპონენტი სიის ჯგუფის ნებისმიერ ელემენტს და ის ავტომატურად განთავსდება მარჯვნივ.
14Cras justo odio
2Dapibus ac facilisis in
1მორბი ლეო რისუსი
დაკავშირებული ელემენტები
სიის ჯგუფის ელემენტების დაკავშირება სიის ელემენტების ნაცვლად წამყვანი ტეგების გამოყენებით (ეს ასევე ნიშნავს მშობელს <div>, ნაცვლად <ul>). არ არის საჭირო ინდივიდუალური მშობლები თითოეული ელემენტის გარშემო.
სიის ჯგუფის ელემენტები შეიძლება იყოს ღილაკები სიის ელემენტების ნაცვლად (ეს ასევე ნიშნავს მშობელს <div>ნაცვლად <ul>). არ არის საჭირო ინდივიდუალური მშობლები თითოეული ელემენტის გარშემო. არ გამოიყენოთ აქ სტანდარტული .btnკლასები.
გამორთული ნივთები
დაამატეთ .disableda- .list-group-itemს ნაცრისფერში, რათა გამოჩნდეს გამორთული.
მიუხედავად იმისა, რომ ყოველთვის არ არის საჭირო, ზოგჯერ საჭიროა თქვენი DOM ყუთში ჩასმა. ამ სიტუაციებისთვის, სცადეთ პანელის კომპონენტი.
ძირითადი მაგალითი
ნაგულისხმევად, ყველაფერი რაც .panelაკეთებს არის გარკვეული ძირითადი საზღვრების და შიგთავსის გამოყენება გარკვეული შინაარსის შესატანად.
ძირითადი პანელის მაგალითი
პანელი სათაურით
მარტივად დაამატეთ სათაურის კონტეინერი თქვენს პანელზე .panel-heading. თქვენ ასევე შეგიძლიათ შეიყვანოთ ნებისმიერი <h1>- კლასთან <h6>ერთად .panel-titleწინასწარ სტილის სათაურის დასამატებლად. თუმცა, შრიფტის ზომები <h1>- <h6>უგულებელყოფილია .panel-heading.
ბმულების სათანადო შეღებვისთვის, დარწმუნდით, რომ მოათავსეთ ბმულები სათაურებში .panel-title.
პანელის სათაური სათაურის გარეშე
პანელის შინაარსი
პანელის სათაური
პანელის შინაარსი
პანელი ქვედა კოლონტიტულით
შეფუთეთ ღილაკები ან მეორადი ტექსტი .panel-footer. გაითვალისწინეთ, რომ პანელის ქვედა კოლონტიტულები არ მემკვიდრეობით იღებენ ფერებს და საზღვრებს კონტექსტური ვარიაციების გამოყენებისას, რადგან ისინი არ არის განკუთვნილი წინა პლანზე.
პანელის შინაარსი
კონტექსტური ალტერნატივები
სხვა კომპონენტების მსგავსად, მარტივად გახადეთ პანელი უფრო მნიშვნელოვანი კონკრეტულ კონტექსტში ნებისმიერი კონტექსტური მდგომარეობის კლასის დამატებით.
პანელის სათაური
პანელის შინაარსი
პანელის სათაური
პანელის შინაარსი
პანელის სათაური
პანელის შინაარსი
პანელის სათაური
პანელის შინაარსი
პანელის სათაური
პანელის შინაარსი
მაგიდებით
დაამატეთ ნებისმიერი შეუზღუდავი .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
თუ პანელის სხეული არ არის, კომპონენტი შეუფერხებლად გადადის პანელის სათაურიდან მაგიდაზე.
პანელის სათაური
#
Სახელი
Გვარი
მომხმარებლის სახელი
1
მარკო
ოთო
@mdo
2
იაკობ
თორნტონი
@ fat
3
ლარი
ჩიტი
@twitter
სიის ჯგუფებთან ერთად
მარტივად ჩართეთ სრული სიგანის სიის ჯგუფები ნებისმიერ პანელში.
პანელის სათაური
პანელის ნაგულისხმევი შინაარსი აქ. 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
ვესტიბულუმი და ეროსი
საპასუხო ჩაშენება
მიეცით საშუალება ბრაუზერებს, დაადგინონ ვიდეოს ან სლაიდშოუს ზომები მათი შემცველი ბლოკის სიგანეზე დაყრდნობით, შინაგანი თანაფარდობის შექმნით, რომელიც სათანადო მასშტაბის იქნება ნებისმიერ მოწყობილობაზე.
წესები პირდაპირ გამოიყენება <iframe>, <embed>, <video>, და <object>ელემენტებზე; სურვილისამებრ გამოიყენეთ აშკარა შთამომავალი კლასი .embed-responsive-item, როდესაც გსურთ სტილის შეხამება სხვა ატრიბუტებისთვის.
პრო-წვერი! თქვენ არ გჭირდებათ frameborder="0"თქვენს <iframe>s-ში ჩართვა, რადგან ჩვენ ამას ვარღვევთ თქვენთვის.
ჭალები
ნაგულისხმევი კარგად
გამოიყენეთ ჭა, როგორც მარტივი ეფექტი ელემენტზე, რომ მისცეთ მას ჩასმული ეფექტი.
შეხედე, ჭაში ვარ!
არჩევითი კლასები
აკონტროლეთ ბალიშები და მომრგვალებული კუთხეები ორი არჩევითი მოდიფიკატორის კლასით.