Տասնյակ բազմակի օգտագործման բաղադրիչներ, որոնք ստեղծվել են նավիգացիա, ծանուցումներ, պոպովեր և այլն ապահովելու համար:
Փոխարկվող, համատեքստային ընտրացանկ՝ հղումների ցուցակները ցուցադրելու համար: Ստեղծվել է ինտերակտիվ JavaScript-ի բացվող հավելվածով :
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Գործողություն </a></li>
- <li><a tabindex = "-1" href = "#" > Մեկ այլ գործողություն </a></li>
- <li><a tabindex = "-1" href = "#" > Այստեղ այլ բան </a></li>
- <li class = «բաժանարար» ></li>
- <li><a tabindex = "-1" href = "#" > Առանձնացված հղում </a></li>
- </ul>
Նայելով միայն բացվող մենյուին, ահա անհրաժեշտ HTML-ը: Դուք պետք է փաթեթավորեք բացվող ցանկի գործարկիչը և բացվող ընտրացանկը .dropdown
կամ մեկ այլ տարր, որը հայտարարում է position: relative;
. Այնուհետև պարզապես ստեղծեք ընտրացանկը:
- <div class = «բացվող» >
- <!-- Հղում կամ կոճակ՝ բացվող ցանկը փոխելու համար
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Գործողություն </a></li>
- <li><a tabindex = "-1" href = "#" > Մեկ այլ գործողություն </a></li>
- <li><a tabindex = "-1" href = "#" > Այստեղ այլ բան </a></li>
- <li class = «բաժանարար» ></li>
- <li><a tabindex = "-1" href = "#" > Առանձնացված հղում </a></li>
- </ul>
- </div>
Հավասարեցրեք ընտրացանկերը դեպի աջ և ավելացրեք՝ ներառելով բացվող ցանկերի լրացուցիչ մակարդակներ:
Ավելացնել .pull-right
a-ին .dropdown-menu
դեպի աջ հավասարեցնել բացվող ընտրացանկը:
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Ավելացրեք .disabled
a- <li>
ին բացվող ցանկում՝ հղումն անջատելու համար:
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Կանոնավոր հղում </a></li>
- <li class = "disabled" ><a tabindex = "-1" href = "#" > Անջատված հղում </a></li>
- <li><a tabindex = "-1" href = "#" > Մեկ այլ հղում </a></li>
- </ul>
Ավելացրեք բացվող ընտրացանկերի լրացուցիչ մակարդակ, որոնք կհայտնվեն սավառնողների վրա, ինչպես OS X-ը, որոշ պարզ նշագծման հավելումներով: Ավտոմատ ոճավորելու համար գոյություն ունեցող բացվող ընտրացանկում ավելացրեք .dropdown-submenu
որևէ մեկին :li
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = «բացվող-ենթացանկ» >
- <a tabindex = "-1" href = "#" > Լրացուցիչ ընտրանքներ </a>
- <ul class = «dropdown-menu» >
- ...
- </ul>
- </li>
- </ul>
Պարզ էջավորում՝ ոգեշնչված Rdio-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:
- <div class = «էջադրում» >
- <ul>
- <li><a href = "#" > Նախորդ </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 = "#" > Հաջորդը </a></li>
- </ul>
- </div>
Հղումները հարմարեցված են տարբեր հանգամանքների համար: Օգտագործեք .disabled
չսեղմվող հղումների և .active
ընթացիկ էջը նշելու համար:
- <div class = «էջադրում» >
- <ul>
- <li class = "disabled" ><a href = "#" > « </a></li>
- <li class = "ակտիվ" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Դուք կարող եք կամայականորեն փոխել ակտիվ կամ անջատված խարիսխները բացվածքների համար՝ հեռացնելով սեղմումների գործառույթը՝ պահպանելով նախատեսված ոճերը:
- <div class = «էջադրում» >
- <ul>
- <li class = «հաշմանդամ» ><span> « </span></li>
- <li class = «ակտիվ» ><span> 1 </span></li>
- ...
- </ul>
- </div>
Ցանկանում եք ավելի մեծ, թե փոքր էջադրում: Ավելացնել .pagination-large
, .pagination-small
կամ .pagination-mini
լրացուցիչ չափերի համար:
- <div class = «էջերի էջավորում-մեծ» >
- <ul>
- ...
- </ul>
- </div>
- <div class = «էջադրում» >
- <ul>
- ...
- </ul>
- </div>
- <div class = «էջադրում-փոքր» >
- <ul>
- ...
- </ul>
- </div>
- <div class = "pagination pagination-mini" >
- <ul>
- ...
- </ul>
- </div>
Էջավորման հղումների հավասարեցումը փոխելու համար ավելացրեք երկու կամընտիր դասերից մեկը՝ .pagination-centered
և .pagination-right
.
- <div class = «էջադրման էջադրման կենտրոնացված» >
- ...
- </div>
- <div class = "էջադրում-էջադրում-աջ" >
- ...
- </div>
Արագ նախորդ և հաջորդ հղումներ պարզ էջադրման իրականացման համար՝ թեթև նշագրումով և ոճերով: Դա հիանալի է պարզ կայքերի համար, ինչպիսիք են բլոգները կամ ամսագրերը:
Լռելյայնորեն, փեյջերը կենտրոնացնում է հղումները:
- <ul class = «փեյջեր» >
- <li><a href = "#" > Նախորդը </a></li>
- <li><a href = "#" > Հաջորդը </a></li>
- </ul>
Որպես այլընտրանք, դուք կարող եք հավասարեցնել յուրաքանչյուր հղումը կողմերին.
- <ul class = «փեյջեր» >
- <li class = «նախորդ» >
- <a href = "#" > ← Ավելի հին </a>
- </li>
- <li class = «հաջորդ» >
- <a href = "#" > Ավելի նոր → </a>
- </li>
- </ul>
Էջերի հղումները նաև օգտագործում են էջագրման ընդհանուր .disabled
օգտակար դասը:
- <ul class = «փեյջեր» >
- <li class = «նախորդ հաշմանդամ» >
- <a href = "#" > ← Ավելի հին </a>
- </li>
- ...
- </ul>
Պիտակներ | Նշում |
---|---|
Կանխադրված | <span class="label">Default</span> |
Հաջողություն | <span class="label label-success">Success</span> |
Զգուշացում | <span class="label label-warning">Warning</span> |
Կարևոր | <span class="label label-important">Important</span> |
Ինֆո | <span class="label label-info">Info</span> |
Հակադարձ | <span class="label label-inverse">Inverse</span> |
Անուն | Օրինակ | Նշում |
---|---|---|
Կանխադրված | 1 | <span class="badge">1</span> |
Հաջողություն | 2 | <span class="badge badge-success">2</span> |
Զգուշացում | 4 | <span class="badge badge-warning">4</span> |
Կարևոր | 6 | <span class="badge badge-important">6</span> |
Ինֆո | 8 | <span class="badge badge-info">8</span> |
Հակադարձ | 10 | <span class="badge badge-inverse">10</span> |
Հեշտ իրականացման համար պիտակները և կրծքանշանները պարզապես կփլուզվեն (CSS-ի :empty
ընտրիչի միջոցով), երբ ներսում որևէ բովանդակություն չկա:
Թեթև, ճկուն բաղադրիչ՝ ձեր կայքի հիմնական բովանդակությունը ցուցադրելու համար: Այն լավ է աշխատում մարքեթինգային և բովանդակությամբ ծանր կայքերում:
Սա պարզ հերոսի միավոր է, պարզ jumbotron ոճի բաղադրիչ՝ հատուկ ուշադրություն հրավիրելու համար ներկայացված բովանդակությանը կամ տեղեկատվությանը:
- <div class = «հերոս-միավոր» >
- <h1> Վերնագիր </h1>
- <p> Նշագիր </p>
- <p>
- <a class = «btn btn-հիմնական btn-large» >
- Իմացեք ավելին
- </a>
- </p>
- </div>
Պարզ կեղև h1
՝ էջի վրա բովանդակության հատվածները պատշաճ կերպով տարածելու և հատվածավորելու համար: Այն կարող է օգտագործել h1
լռելյայն small
, տարրը, ինչպես նաև այլ բաղադրիչների մեծ մասը (լրացուցիչ ոճերով):
- <div class = «էջ-վերնագիր» >
- <h1> Էջի վերնագրի օրինակ <small> Ենթատեքստ վերնագրի համար </small></h1>
- </div>
Լռելյայնորեն, 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 ultricies 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 ultricies 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 ultricies vehicula ut id elit.
Մանրապատկերները (նախկինում .media-grid
մինչև v1.4) հիանալի են լուսանկարների կամ տեսանյութերի ցանցերի, պատկերների որոնման արդյունքների, մանրածախ ապրանքների, պորտֆոլիոների և շատ այլ բաների համար: Դրանք կարող են լինել հղումներ կամ ստատիկ բովանդակություն:
Մանրապատկերների նշումը պարզ է. պահանջվում ul
է ցանկացած քանակի տարրերով: li
Այն նաև գերճկուն է, որը թույլ է տալիս ցանկացած տեսակի բովանդակություն՝ ընդամենը մի փոքր ավելի մեծ նշագրումով, ձեր բովանդակությունը փաթաթելու համար:
Վերջապես, մանրապատկերների բաղադրիչն օգտագործում է ցանցային համակարգի առկա դասերը՝ նման .span2
կամ .span3
՝ մանրապատկերների չափերը վերահսկելու համար:
Ինչպես նշվեց նախկինում, մանրապատկերների համար անհրաժեշտ նշումը թեթև է և պարզ: Ահա կապակցված պատկերների լռելյայն կարգավորումը .
- <ul class = «մանրապատկերներ» >
- <li class = "span4" >
- <a href = "#" class = "մանրապատկեր" >
- <img data-src = "holder.js/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
Մանրապատկերներում հատուկ HTML բովանդակության համար նշումը փոքր-ինչ փոխվում է: Բլոկի մակարդակի բովանդակությունը ցանկացած վայրում թույլատրելու համար մենք փոխում ենք նմանակը հետևյալ <a>
կերպ <div>
.
- <ul class = «մանրապատկերներ» >
- <li class = "span4" >
- <div class = «մանրապատկեր» >
- <img data-src = "holder.js/300x200" alt = "" >
- <h3> Մանրապատկերի պիտակ </h3>
- <p> Մանրապատկերի վերնագիր... </p>
- </div>
- </li>
- ...
- </ul>
Բացահայտեք ձեր բոլոր տարբերակները՝ ձեզ հասանելի տարբեր ցանցային դասերի միջոցով: Կարող եք նաև խառնել և համապատասխանեցնել տարբեր չափսեր:
Փաթեթավորեք ցանկացած տեքստ և կամընտիր անջատման կոճակը՝ .alert
հիմնական նախազգուշացման ազդանշանի հաղորդագրության համար:
- <div class = «զգուշացում» >
- <button type = "button" class = "close" data-dismiss = "զգուշացում" > × </button>
- <strong> Զգուշացում. </strong> Լավագույնը համոզվեք, որ դուք այնքան էլ լավ տեսք չունեք:
- </div>
Mobile Safari և Mobile Opera բրաուզերները, ի լրումն data-dismiss="alert"
հատկանիշի, պահանջում են պիտակ href="#"
օգտագործելիս զգուշացումների անջատում:<a>
- <a href = "#" class = "close" data-dismiss = "զգուշացում" > × </a>
Որպես այլընտրանք, դուք կարող եք օգտագործել <button>
տվյալների հատկանիշով տարր, որը մենք ընտրել ենք մեր փաստաթղթերի համար: Օգտագործելիս <button>
դուք պետք է ներառեք, հակառակ type="button"
դեպքում ձեր ձևերը կարող են չներկայացնել:
- <button type = "button" class = "close" data-dismiss = "զգուշացում" > × </button>
Օգտագործեք ծանուցումների jQuery հավելվածը ՝ ահազանգերը արագ և հեշտ հեռացնելու համար:
Ավելի երկար հաղորդագրությունների համար ավելացրեք ազդանշանային փաթեթի վերևի և ներքևի ծածկը՝ ավելացնելով .alert-block
:
Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք: Nulla vitae elit libero, a pharetra augue: Praesent commodo cursus Magna, vel scelerisque nisl consectetur et.
- <div class = «զգուշացումների բլոկ» >
- <button type = "button" class = "close" data-dismiss = "զգուշացում" > × </button>
- <h4> Զգուշացում. </h4>
- Լավագույնս ստուգեք ինքներդ ձեզ, դուք չեք ...
- </div>
Ավելացրեք կամընտիր դասեր՝ ազդանշանի ենթատեքստը փոխելու համար:
- <div class = «զգուշացում-սխալ» >
- ...
- </div>
- <div class = «զգուշացում-հաջողություն» >
- ...
- </div>
- <div class = «նախազգուշացում-տեղեկատվություն» >
- ...
- </div>
Կանխադրված առաջընթացի գոտի ուղղահայաց գրադիենտով:
- <div class = «առաջընթաց» >
- <div class = "bar" style = " լայնությունը : 60 %; " </div>
- </div>
Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար: Հասանելի չէ IE7-8-ում:
- <div class = «առաջընթաց առաջընթաց-գծավոր» >
- <div class = "bar" style = " լայնությունը : 20 %; " </div>
- </div>
Ավելացրե՛ք .active
՝ .progress-striped
գծերն աջից ձախ շարժելու համար: Հասանելի չէ IE-ի բոլոր տարբերակներում:
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " լայնությունը : 40 %; " </div>
- </div>
Տեղադրեք մի քանի ձողեր միևնույն մեջ՝ .progress
դրանք կուտակելու համար:
- <div class = «առաջընթաց» >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " </div>
- <div class = "bar bar-danger" style = " լայնությունը : 10 %; " </div>
- </div>
Առաջընթացի գծերը օգտագործում են միևնույն կոճակներից մի քանիսը և ազդանշանային դասեր՝ հետևողական ոճերի համար:
- <div class = «առաջընթացի մասին տեղեկատվություն» >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = «առաջընթաց առաջընթաց-հաջողություն» >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = «առաջընթացի առաջընթաց-նախազգուշացում» >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = «առաջընթաց առաջընթաց-վտանգ» >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Միաձույլ գույների նման, մենք ունենք զանազան գծավոր առաջընթաց գծեր:
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = «առաջընթաց առաջընթաց-հաջողություն առաջընթաց-գծավոր» >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = «առաջընթաց առաջընթաց-նախազգուշացում առաջընթաց-գծավոր» >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = «առաջընթաց առաջընթաց-վտանգ առաջընթաց-գծավոր» >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Առաջընթացի գծերը օգտագործում են CSS3 գրադիենտներ, անցումներ և անիմացիաներ՝ դրանց բոլոր էֆեկտներին հասնելու համար: Այս գործառույթները չեն աջակցվում IE7-9 կամ Firefox-ի ավելի հին տարբերակներում:
Internet Explorer 10-ից և Opera 12-ից ավելի վաղ տարբերակները չեն աջակցում անիմացիաներ:
Վերացական օբյեկտների ոճեր՝ տարբեր տեսակի բաղադրիչներ ստեղծելու համար (օրինակ՝ բլոգի մեկնաբանությունները, թվիթերը և այլն), որոնք տեքստային բովանդակության հետ մեկտեղ ցուցադրում են ձախ կամ աջ հարթեցված պատկեր:
Լռելյայն մեդիան թույլ է տալիս լողալ մեդիա օբյեկտը (պատկերներ, տեսանյութեր, աուդիո) բովանդակության բլոկի ձախ կամ աջ կողմում:
- <div class = «մեդիա» >
- <a class = "pull-left" href = "#" >
- <img class = "media-object" data-src = "holder.js/64x64" >
- </a>
- <div class = «մեդիա մարմին» >
- <h4 class = "media-heading" > Մեդիա վերնագիր </h4>
- ...
- <!-- Ներդրված մեդիա օբյեկտ -->
- <div class = «մեդիա» >
- ...
- </div>
- </div>
- </div>
Մի փոքր լրացուցիչ նշագրման դեպքում դուք կարող եք օգտագործել մեդիա ցանկի ներսում (օգտակար մեկնաբանությունների թեմաների կամ հոդվածների ցուցակների համար):
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
- <ul class = «մեդիա ցուցակ» >
- <li class = «մեդիա» >
- <a class = "pull-left" href = "#" >
- <img class = "media-object" data-src = "holder.js/64x64" >
- </a>
- <div class = «մեդիա մարմին» >
- <h4 class = "media-heading" > Մեդիա վերնագիր </h4>
- ...
- <!-- Ներդրված մեդիա օբյեկտ -->
- <div class = «մեդիա» >
- ...
- </div>
- </div>
- </li>
- </ul>
Օգտագործեք ջրհորը որպես պարզ ազդեցություն տարրի վրա՝ դրան ներդիր էֆեկտ տալու համար:
- <div class = «լավ» >
- ...
- </div>
Կառավարեք լիցքավորումը և կլորացված անկյունները երկու կամընտիր մոդիֆիկատորների դասերով:
- <div class = «լավ լավ մեծ» >
- ...
- </div>
- <div class = «լավ լավ-փոքր» >
- ...
- </div>
Օգտագործեք փակման ընդհանուր պատկերակը բովանդակությունը, օրինակ՝ մոդալները և ծանուցումները մերժելու համար:
- <button class = "close" > × </button>
iOS սարքերը պահանջում են href="#"
սեղմումների համար նախատեսված իրադարձություններ, եթե նախընտրում եք օգտագործել խարիսխ:
- <a class = "close" href = "#" > × </a>
Պարզ, կենտրոնացված դասեր փոքր ցուցադրման կամ վարքագծի ճշգրտումների համար:
Ձախ թողեք տարրը
- class = «ձախ-ձախ»
- . քաշել - ձախ {
- բոց : ձախ ;
- }
Լողալ տարրը աջ
- class = «քաշել-աջ»
- . քաշեք - աջ {
- բոց : աջ ;
- }
Փոխել տարրի գույնը#999
- class = «խլացված»
- . խլացված {
- գույնը ՝ #999;
- }
Մաքրել float
ցանկացած տարրի վրա
- class = «պարզեցնել»
- . մաքրել {
- * Մեծացում ՝ 1 ;
- &: առաջ ,
- &: { հետո
- ցուցադրում : աղյուսակ ;
- բովանդակությունը ՝ "" ;
- }
- &: { հետո
- պարզ . երկուսն էլ ;
- }
- }