Տասնյակ բազմակի օգտագործման բաղադրիչներ ներկառուցված են Bootstrap-ում՝ նավարկություն, ծանուցումներ, պոպովեր և շատ ավելին ապահովելու համար:
Չափազանց պարզեցված և նվազագույն ոճով էջադրում, որը ոգեշնչված է Rdio-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:
Հղումները հարմարեցված են և աշխատում են մի շարք հանգամանքներում ճիշտ դասի հետ: .disabled
չսեղմվող հղումների և .active
ընթացիկ էջի համար:
Ավելացրեք երկու կամընտիր դասերից որևէ մեկը՝ էջադրման հղումների հավասարեցումը փոխելու համար. .pagination-centered
և .pagination-right
.
Լռելյայն էջավորման բաղադրիչը ճկուն է և աշխատում է մի շարք տարբերակներով:
Ա-ով փաթաթված <div>
, էջադրումը պարզապես մի է <ul>
:
- <div class = «էջադրում» >
- <ul>
- <li><a href = "#" > Նախորդ </a></li>
- <li class = «ակտիվ» >
- <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 = "#" > Հաջորդը </a></li>
- </ul>
- </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>
Պիտակներ | Նշում |
---|---|
Կանխադրված | <span class="label">Default</span> |
Նոր | <span class="label label-success">New</span> |
Զգուշացում | <span class="label label-warning">Warning</span> |
Կարևոր | <span class="label label-important">Important</span> |
Ինֆո | <span class="label label-info">Info</span> |
Լռելյայնորեն, Bootstrap-ի մանրապատկերները նախատեսված են ցուցադրելու կապակցված պատկերները նվազագույն պահանջվող նշումներով:
Մի փոքր լրացուցիչ նշագրման դեպքում հնարավոր է մանրապատկերների մեջ ավելացնել ցանկացած տեսակի HTML բովանդակություն, ինչպիսիք են վերնագրերը, պարբերությունները կամ կոճակները:
Մանրապատկերները (նախկինում .media-grid
մինչև v1.4) հիանալի են լուսանկարների կամ տեսանյութերի ցանցերի, պատկերների որոնման արդյունքների, մանրածախ ապրանքների, պորտֆոլիոների և շատ այլ բաների համար: Դրանք կարող են լինել հղումներ կամ ստատիկ բովանդակություն:
Մանրապատկերների նշումը պարզ է . անհրաժեշտ է ul
միայն ցանկացած քանակի li
տարրերով: Այն նաև գերճկուն է, որը թույլ է տալիս ցանկացած տեսակի բովանդակություն՝ ընդամենը մի փոքր ավելի մեծ նշագրումով, ձեր բովանդակությունը փաթաթելու համար:
Վերջապես, մանրապատկերների բաղադրիչն օգտագործում է ցանցային համակարգի առկա դասերը՝ նման .span2
կամ .span3
՝ մանրապատկերների չափերը վերահսկելու համար:
Ինչպես նշվեց նախկինում, մանրապատկերների համար անհրաժեշտ նշումը թեթև է և պարզ: Ահա կապակցված պատկերների լռելյայն կարգավորումը .
- <ul class = «մանրապատկերներ» >
- <li class = "span3" >
- <a href = "#" class = "մանրապատկեր" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Մանրապատկերներում հատուկ HTML բովանդակության համար նշումը փոքր-ինչ փոխվում է: Բլոկի մակարդակի բովանդակությունը ցանկացած վայրում թույլատրելու համար մենք փոխում ենք նմանակը հետևյալ <a>
կերպ <div>
.
- <ul class = «մանրապատկերներ» >
- <li class = "span3" >
- <div class = «մանրապատկեր» >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Մանրապատկերի պիտակ </h5>
- <p> Մանրապատկերի ենթագիր հենց այստեղ... </p>
- </div>
- </li>
- ...
- </ul>
Bootstrap 2-ի միջոցով մենք պարզեցրել ենք բազային դասը՝ .alert
փոխարենը .alert-message
. Մենք նաև կրճատել ենք նվազագույն պահանջվող նշագրումը <p>
. լռելյայն պահանջվում է ոչ, միայն արտաքին<div>
:
Ավելի դիմացկուն բաղադրիչի համար՝ ավելի քիչ կոդով, մենք հեռացրել ենք բլոկի ազդանշանների տարբերակիչ տեսքը, հաղորդագրությունները, որոնք ուղեկցվում են ավելի շատ ներդիրներով և սովորաբար ավելի շատ տեքստով: Դասարանը նույնպես փոխվել է .alert-block
.
Bootstrap-ը գալիս է հիանալի jQuery հավելվածով, որն աջակցում է զգոն հաղորդագրություններին՝ արագ և հեշտ դարձնելով դրանք հեռացնելը:
Փաթեթավորեք ձեր հաղորդագրությունը և կամընտիր փակման պատկերակը պարզ դասակարգով div-ում:
- <div class = «զգուշացում» >
- <a class = "close" > × </a>
- <strong> Զգուշացում. </strong> Լավագույնս համոզվեք, որ դուք այնքան էլ լավ տեսք չունեք:
- </div>
Հեշտությամբ երկարացրեք ստանդարտ նախազգուշացման հաղորդագրությունը երկու կամընտիր դասերով՝ .alert-block
լրացուցիչ ներդիրների և տեքստային կառավարումների և .alert-heading
համապատասխան վերնագրի համար:
Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք: Nulla vitae elit libero, a pharetra augue: Praesent commodo cursus Magna, vel scelerisque nisl consectetur et.
- <div class = «զգուշացման ազդանշանային արգելափակում» >
- <a class = "close" > × </a>
- <h4 class = "alert-heading" > Զգուշացում: </h4>
- Լավագույնս ստուգեք ինքներդ ձեզ, դուք չեք ...
- </div>
- <div class = «զգուշացում-սխալ» >
- ...
- </div>
- <div class = «զգուշացում-հաջողություն» >
- ...
- </div>
- <div class = «զգուշացում-տեղեկատվություն» >
- ...
- </div>
Կանխադրված առաջընթացի գոտի ուղղահայաց գրադիենտով:
- <div class = «առաջընթաց» >
- <div class = «բար»
- style = " width : 60 %; " ></div>
- </div>
Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար:
- <div class = «առաջընթաց առաջընթաց-տեղեկություն
- առաջընթաց-գծավոր» >
- <div class = «բար»
- style = " լայնություն : 20 %; " ></div>
- </div>
Վերցնում է գծավոր օրինակը և կենդանացնում այն:
- <div class = «առաջընթաց առաջընթաց-վտանգ
- առաջընթաց-գծավոր ակտիվ» >
- <div class = «բար»
- style = " width : 40 %; " ></div>
- </div>
Առաջընթացի գծերը օգտագործում են միևնույն դասի անունները որպես կոճակներ և հիշեցումներ նմանատիպ ոճավորման համար:
.progress-info
.progress-success
.progress-danger
Որպես այլընտրանք, դուք կարող եք հարմարեցնել LESS ֆայլերը և գլորել ձեր սեփական գույներն ու չափերը:
Առաջընթացի գծերը օգտագործում են CSS3 անցումներ, այնպես որ, եթե դինամիկ կերպով կարգավորեք լայնությունը Javascript-ի միջոցով, այն սահուն կերպով կփոխի չափը:
Եթե դուք օգտագործում եք .active
դասը, ձեր .progress-striped
առաջընթացի գծերը կկենդանացնեն ձախից աջ շերտերը:
Առաջընթացի գծերը օգտագործում են CSS3 գրադիենտներ, անցումներ և անիմացիաներ՝ դրանց բոլոր էֆեկտներին հասնելու համար: Այս գործառույթները չեն աջակցվում IE7-8 կամ Firefox-ի ավելի հին տարբերակներում:
Opera-ն այս պահին չի աջակցում անիմացիաներին:
Օգտագործեք ջրհորը որպես պարզ ազդեցություն տարրի վրա՝ դրան ներդիր էֆեկտ տալու համար:
- <div class = «լավ» >
- ...
- </div>
Օգտագործեք փակման ընդհանուր պատկերակը բովանդակությունը, օրինակ՝ մոդալները և ծանուցումները մերժելու համար:
- <a class = "close" > × </a>