Բաղադրիչներ

Տասնյակ բազմակի օգտագործման բաղադրիչներ ներկառուցված են Bootstrap-ում՝ նավարկություն, ծանուցումներ, պոպովեր և շատ ավելին ապահովելու համար:

Կոճակների խմբեր

Օգտագործեք կոճակների խմբերը մի քանի կոճակներ միացնելու համար որպես մեկ կոմպոզիտային բաղադրիչ: Կառուցեք դրանք մի շարք <a>կամ <button>տարրերով:

Լավագույն փորձը

Կոճակների խմբերի և գործիքների տողերի օգտագործման համար խորհուրդ ենք տալիս հետևյալ ուղեցույցները.

  • Միշտ օգտագործեք նույն տարրը մեկ կոճակի խմբում <a>կամ <button>.
  • Մի խառնեք տարբեր գույների կոճակները նույն կոճակների խմբում:
  • Օգտագործեք պատկերակներ՝ ի լրումն կամ տեքստի փոխարեն, բայց համոզվեք, որ անհրաժեշտության դեպքում ներառեք alt և վերնագրի տեքստը:

Առնչվող կոճակների խմբերը բացվող ցանկերով (տե՛ս ստորև) պետք է կանչվեն առանձին և միշտ ներառեն իջնող զետեղում՝ նախատեսված վարքագիծը ցույց տալու համար:

Կանխադրված օրինակ

Ահա թե ինչպես է HTML-ը փնտրում ստանդարտ կոճակների խումբ, որը կառուցված է խարիսխի պիտակի կոճակներով.

  1. <div class = «btn-group» >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Գործիքադարակի օրինակ

Կոմպլեկտները միացրեք <div class="btn-group">ավելի <div class="btn-toolbar">բարդ բաղադրիչների համար:

  1. <div class = "btn-գործիքադարակ" >
  2. <div class = «btn-group» >
  3. ...
  4. </div>
  5. </div>

Checkbox և ռադիո համային տեսականի

Կոճակների խմբերը կարող են նաև գործել որպես ռադիո, որտեղ միայն մեկ կոճակ կարող է ակտիվ լինել, կամ վանդակներ, որտեղ ցանկացած թվով կոճակներ կարող են ակտիվ լինել: Դիտեք Javascript-ի փաստաթղթերը դրա համար:

Ստացեք javascript »

Բացվող կոճակների խմբերում

Գլուխը վեր Բացվող կոճակները պետք է առանձին-առանձին փաթաթվեն իրենց .btn-groupմեջ .btn-toolbar՝ պատշաճ մատուցման համար:

Կոճակների բացվող պատուհաններ

Ընդհանուր ակնարկ և օրինակներ

Օգտագործեք ցանկացած կոճակ՝ բացվող ընտրացանկը գործարկելու համար՝ տեղադրելով այն a-ում .btn-groupև ապահովելով մենյուի համապատասխան նշում:

Նշման օրինակ

Կոճակների խմբի նման, մեր նշագրումը օգտագործում է կոճակի կանոնավոր նշում, բայց մի քանի հավելումներով՝ ոճը ճշգրտելու և Bootstrap-ի բացվող jQuery հավելվածին աջակցելու համար:

  1. <div class = «btn-group» >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Գործողություն
  4. <span class = «caret» ></span>
  5. </a>
  6. <ul class = «dropdown-menu» >
  7. <!-- բացվող ցանկի հղումներ -->
  8. </ul>
  9. </div>

Աշխատում է կոճակների բոլոր չափերի հետ

Կոճակների բացվող պատուհաններն աշխատում են ցանկացած չափի: ձեր կոճակների չափերը մինչև .btn-large, .btn-smallկամ .btn-mini:

Պահանջում է Javascript

Կոճակների բացման համար պահանջվում է Bootstrap բացվող հավելվածը գործելու համար:

Որոշ դեպքերում, օրինակ՝ շարժական, բացվող ընտրացանկերը կտարածվեն տեսադաշտից դուրս: Դուք պետք է լուծեք հավասարեցումը ձեռքով կամ հատուկ javascript-ով:


Պառակտման կոճակների բացվող ցանկեր

Ընդհանուր ակնարկ և օրինակներ

Հիմնվելով կոճակների խմբի ոճերի և նշագրման վրա՝ մենք կարող ենք հեշտությամբ ստեղծել բաժանման կոճակ: Պառակտման կոճակները ցուցադրում են ստանդարտ գործողություն ձախ կողմում և բացվող անջատիչ՝ աջ կողմում՝ համատեքստային հղումներով:

Չափերը

Օգտագործեք լրացուցիչ կոճակների դասերը .btn-mini, .btn-smallկամ .btn-largeչափագրման համար:

  1. <div class = «btn-group» >
  2. ...
  3. <ul class = «dropdown-menu pull-right» >
  4. <!-- բացվող ցանկի հղումներ -->
  5. </ul>
  6. </div>

Նշման օրինակ

Մենք ընդլայնում ենք կոճակի սովորական բացվող ցանկերը՝ ապահովելու կոճակի երկրորդ գործողությունը, որը գործում է որպես առանձին բացվող գործարկիչ:

  1. <div class = «btn-group» >
  2. <button class = "btn" > Գործողություն </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = «caret» ></span>
  5. </button>
  6. <ul class = «dropdown-menu» >
  7. <!-- բացվող ցանկի հղումներ -->
  8. </ul>
  9. </div>

Բացվող ընտրացանկեր

Բացվող ընտրացանկերը կարող են նաև փոխարկվել ներքևից վեր՝ ավելացնելով մեկ դաս ի անմիջական ծնողին .dropdown-menu: Այն կշրջի ուղղությունը .caretև կվերափոխի մենյուի դիրքը՝ վերևից ներքև շարժվելու փոխարեն ներքևից վեր:

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Բացվող </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = «caret» ></span>
  5. </button>
  6. <ul class = «dropdown-menu» >
  7. <!-- բացվող ցանկի հղումներ -->
  8. </ul>
  9. </div>

Բազմակի էջերի էջադրում

Երբ օգտագործել

Չափազանց պարզեցված և նվազագույն ոճով էջադրում, որը ոգեշնչված է Rdio-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:

Պետական ​​էջի հղումներ

Հղումները հարմարեցված են և աշխատում են մի շարք հանգամանքներում ճիշտ դասի հետ: .disabledչսեղմվող հղումների և .activeընթացիկ էջի համար:

Ճկուն հավասարեցում

Ավելացրեք երկու կամընտիր դասերից որևէ մեկը՝ էջադրման հղումների հավասարեցումը փոխելու համար. .pagination-centeredև .pagination-right.

Օրինակներ

Լռելյայն էջավորման բաղադրիչը ճկուն է և աշխատում է մի շարք տարբերակներով:

Նշում

Ա-ով փաթաթված <div>, էջադրումը պարզապես մի է <ul>:

  1. <div class = «էջադրում» >
  2. <ul>
  3. <li><a href = "#" > Նախորդ </a></li>
  4. <li class = «ակտիվ» >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Հաջորդը </a></li>
  11. </ul>
  12. </div>

Փեյջեր արագ նախորդ և հաջորդ հղումների համար

Փեյջերի մասին

Փեյջերի բաղադրիչը հղումների մի շարք է պարզ էջադրման իրականացման համար՝ թեթև նշագրմամբ և նույնիսկ ավելի թեթև ոճերով: Այն հիանալի է պարզ կայքերի համար, ինչպիսիք են բլոգները կամ ամսագրերը:

Ընտրովի անջատված վիճակ

Փեյջերի հղումներն օգտագործում են նաև .disabledէջագրման ընդհանուր դասը:

Կանխադրված օրինակ

Լռելյայնորեն, փեյջերը կենտրոնացնում է հղումները:

  1. <ul class = «փեյջեր» >
  2. <li>
  3. <a href = "#" > Նախորդը </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Հաջորդը </a>
  7. </li>
  8. </ul>

Հավասարեցված հղումներ

Որպես այլընտրանք, դուք կարող եք հավասարեցնել յուրաքանչյուր հղումը կողմերին.

  1. <ul class = «փեյջեր» >
  2. <li class = «նախորդ» >
  3. <a href = "#" > Ավելի հին </a>
  4. </li>
  5. <li class = «հաջորդ» >
  6. <a href = "#" > Ավելի նոր → </a>
  7. </li>
  8. </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>

Մասին

Կրծքանշանները փոքր, պարզ բաղադրիչներ են՝ ինչ-որ ցուցիչ կամ թվաքանակ ցուցադրելու համար: Դրանք սովորաբար հանդիպում են էլփոստի սպասառուներում, ինչպիսիք են Mail.app-ը կամ բջջային հավելվածներում՝ push ծանուցումների համար:

Հասանելի դասեր

Անուն Օրինակ Նշում
Կանխադրված 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>

Հերոսի միավոր

Bootstrap-ն ապահովում է թեթև, ճկուն բաղադրիչ, որը կոչվում է հերոսի միավոր՝ ձեր կայքում բովանդակությունը ցուցադրելու համար: Այն լավ է աշխատում մարքեթինգային և բովանդակությամբ ծանր կայքերում:

Նշում

Փաթաթեք ձեր բովանդակությունը divնման կերպ.

  1. <div class = «հերոս-միավոր» >
  2. <h1> Վերնագիր </h1>
  3. <p> Նշագիր </p>
  4. <p>
  5. <a class = «btn btn-հիմնական btn-large» >
  6. Իմացեք ավելին
  7. </a>
  8. </p>
  9. </div>

Բարեւ աշխարհ!

Սա պարզ հերոսի միավոր է, պարզ jumbotron ոճի բաղադրիչ՝ հատուկ ուշադրություն հրավիրելու համար ներկայացված բովանդակությանը կամ տեղեկատվությանը:

Իմացեք ավելին

Էջի վերնագիր

Պարզ կեղև h1՝ էջի վրա բովանդակության հատվածները պատշաճ կերպով տարածելու և հատվածավորելու համար: Այն կարող է օգտագործել h1լռելյայն small, տարրը, ինչպես նաև այլ բաղադրիչների մեծ մասը (լրացուցիչ ոճերով):

  1. <div class = «էջ-վերնագիր» >
  2. <h1> Էջի վերնագրի օրինակ </h1>
  3. </div>

Կանխադրված մանրապատկերներ

Լռելյայնորեն, Bootstrap-ի մանրապատկերները նախատեսված են ցուցադրելու կապակցված պատկերները նվազագույն պահանջվող նշումներով:

Բարձր կարգավորելի

Մի փոքր լրացուցիչ նշագրման դեպքում հնարավոր է մանրապատկերների մեջ ավելացնել ցանկացած տեսակի HTML բովանդակություն, ինչպիսիք են վերնագրերը, պարբերությունները կամ կոճակները:

Ինչու օգտագործել մանրապատկերներ

Մանրապատկերները (նախկինում .media-gridմինչև v1.4) հիանալի են լուսանկարների կամ տեսանյութերի ցանցերի, պատկերների որոնման արդյունքների, մանրածախ ապրանքների, պորտֆոլիոների և շատ այլ բաների համար: Դրանք կարող են լինել հղումներ կամ ստատիկ բովանդակություն:

Պարզ, ճկուն նշում

Մանրապատկերների նշումը պարզ է . անհրաժեշտ է ulմիայն ցանկացած քանակի liտարրերով: Այն նաև գերճկուն է, որը թույլ է տալիս ցանկացած տեսակի բովանդակություն՝ ընդամենը մի փոքր ավելի մեծ նշագրումով, ձեր բովանդակությունը փաթաթելու համար:

Օգտագործում է ցանցի սյունակների չափերը

Վերջապես, մանրապատկերների բաղադրիչն օգտագործում է ցանցային համակարգի առկա դասերը՝ նման .span2կամ .span3՝ մանրապատկերների չափերը վերահսկելու համար:

Նշում

Ինչպես նշվեց նախկինում, մանրապատկերների համար անհրաժեշտ նշումը թեթև է և պարզ: Ահա կապակցված պատկերների լռելյայն կարգավորումը .

  1. <ul class = «մանրապատկերներ» >
  2. <li class = "span3" >
  3. <a href = "#" class = "մանրապատկեր" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Մանրապատկերներում հատուկ HTML բովանդակության համար նշումը փոքր-ինչ փոխվում է: Բլոկի մակարդակի բովանդակությունը ցանկացած վայրում թույլատրելու համար մենք փոխում ենք նմանակը հետևյալ <a>կերպ <div>.

  1. <ul class = «մանրապատկերներ» >
  2. <li class = "span3" >
  3. <div class = «մանրապատկեր» >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Մանրապատկերի պիտակ </h5>
  6. <p> Մանրապատկերի ենթագիր հենց այստեղ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Ավելի շատ օրինակներ

Բացահայտեք ձեր բոլոր տարբերակները՝ ձեզ հասանելի տարբեր ցանցային դասերի միջոցով: Կարող եք նաև խառնել և համապատասխանեցնել տարբեր չափսեր:

Թեթև լռելյայն

Վերաշարադրված բազային դաս

Bootstrap 2-ի միջոցով մենք պարզեցրել ենք բազային դասը՝ .alertփոխարենը .alert-message. Մենք նաև կրճատել ենք նվազագույն պահանջվող նշագրումը . <p>լռելյայն պահանջվում է ոչ, միայն արտաքին <div>.

Մեկ ահազանգման հաղորդագրություն

Ավելի դիմացկուն բաղադրիչի համար՝ ավելի քիչ կոդով, մենք հեռացրել ենք բլոկի ազդանշանների տարբերակիչ տեսքը, հաղորդագրությունները, որոնք ուղեկցվում են ավելի շատ ներդիրներով և սովորաբար ավելի շատ տեքստով: Դասարանը նույնպես փոխվել է .alert-block.


Հիանալի է Javascript-ի հետ

Bootstrap-ը գալիս է հիանալի jQuery հավելվածով, որն աջակցում է զգոն հաղորդագրություններին՝ արագ և հեշտ դարձնելով դրանք հեռացնելը:

Ստացեք հավելվածը »

Զգուշացումների օրինակներ

Փաթեթավորեք ձեր հաղորդագրությունը և կամընտիր փակման պատկերակը պարզ դասակարգով div-ում:

Զգուշացում. Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք:
  1. <div class = «զգուշացում» >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Զգուշացում. </strong> Լավագույնս համոզվեք, որ դուք այնքան էլ լավ տեսք չունեք:
  4. </div>

Գլուխը վեր iOS սարքերը պահանջում են href="#"ծանուցումների անջատում: Համոզվեք, որ ներառեք այն և տվյալների հատկանիշը խարիսխի փակման պատկերակների համար: Որպես այլընտրանք, դուք կարող եք օգտագործել <button>տվյալների հատկանիշով տարր, որը մենք ընտրել ենք մեր փաստաթղթերի համար: Օգտագործելիս <button>դուք պետք է ներառեք, հակառակ type="button"դեպքում ձեր ձևերը կարող են չներկայացնել:

Հեշտությամբ երկարացրեք ստանդարտ նախազգուշացման հաղորդագրությունը երկու կամընտիր դասերով՝ .alert-blockլրացուցիչ ներդիրների և տեքստային կառավարումների և .alert-headingհամապատասխան վերնագրի համար:

Զգուշացում.

Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք: Nulla vitae elit libero, a pharetra augue: Praesent commodo cursus Magna, vel scelerisque nisl consectetur et.

  1. <div class = «զգուշացումների բլոկ» >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Զգուշացում: </h4>
  4. Լավագույնս ստուգեք ինքներդ ձեզ, դուք չեք ...
  5. </div>

Համատեքստային այլընտրանքներ Ավելացրեք կամընտիր դասեր՝ ազդանշանի ենթատեքստը փոխելու համար

Սխալ կամ վտանգ

Օ՜, դիպուկ Փոխեք մի քանի բան և փորձեք նորից ուղարկել:
  1. <div class = «զգուշացում-սխալ» >
  2. ...
  3. </div>

Հաջողություն

Լավ արեցիր։ Դուք հաջողությամբ կարդացել եք այս կարևոր նախազգուշական հաղորդագրությունը:
  1. <div class = «զգուշացում-հաջողություն» >
  2. ...
  3. </div>

Տեղեկություն

Գլուխը վեր Այս ահազանգը ձեր ուշադրության կարիքն ունի, բայց դա այնքան էլ կարևոր չէ:
  1. <div class = «նախազգուշացում-տեղեկատվություն» >
  2. ...
  3. </div>

Օրինակներ և նշումներ

Հիմնական

Կանխադրված առաջընթացի գոտի ուղղահայաց գրադիենտով:

  1. <div class = «առաջընթաց» >
  2. <div class = «բար»
  3. style = " width : 60 %; " ></div>
  4. </div>

Գծավոր

Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար (առանց IE):

  1. <div class = «առաջընթաց առաջընթաց-գծավոր» >
  2. <div class = «բար»
  3. style = " լայնություն : 20 %; " ></div>
  4. </div>

Անիմացիոն

Վերցնում է գծավոր օրինակը և կենդանացնում այն ​​(ոչ IE):

  1. <div class = «առաջընթաց առաջընթաց-գծավոր
  2. ակտիվ» >
  3. <div class = «բար»
  4. style = " width : 40 %; " ></div>
  5. </div>

Ընտրանքներ և բրաուզերի աջակցություն

Լրացուցիչ գույներ

Առաջընթացի գծերը օգտագործում են միևնույն կոճակներից մի քանիսը և ազդանշանային դասեր՝ հետևողական ոճերի համար:

Գծավոր ձողեր

Միաձույլ գույների նման, մենք ունենք զանազան գծավոր առաջընթաց գծեր:

Վարքագիծ

Առաջընթացի գծերը օգտագործում են CSS3 անցումներ, այնպես որ, եթե դինամիկ կերպով կարգավորեք լայնությունը Javascript-ի միջոցով, այն սահուն կերպով կփոխի չափը:

Եթե ​​դուք օգտագործում եք .activeդասը, ձեր .progress-stripedառաջընթացի գծերը կկենդանացնեն ձախից աջ շերտերը:

Բրաուզերի աջակցություն

Առաջընթացի գծերը օգտագործում են CSS3 գրադիենտներ, անցումներ և անիմացիաներ՝ դրանց բոլոր էֆեկտներին հասնելու համար: Այս գործառույթները չեն աջակցվում IE7-9 կամ Firefox-ի ավելի հին տարբերակներում:

Opera-ն և IE-ն այս պահին չեն աջակցում անիմացիաներին:

Հորեր

Օգտագործեք ջրհորը որպես պարզ ազդեցություն տարրի վրա՝ դրան ներդիր էֆեկտ տալու համար:

Տեսեք, ես ջրհորի մեջ եմ:
  1. <div class = «լավ» >
  2. ...
  3. </div>

Փակել պատկերակը

Օգտագործեք փակման ընդհանուր պատկերակը բովանդակությունը, օրինակ՝ մոդալները և ծանուցումները մերժելու համար:

  1. <button class = "close" > × </button>

iOS սարքերը պահանջում են href="#" սեղմումների իրադարձությունների համար, եթե ավելի շուտ խարիսխ եք օգտագործում:

  1. <a class = "close" href = "#" > × </a>