Բաղադրիչներ

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

Օրինակներ

Երկու հիմնական տարբերակ, երկու ավելի կոնկրետ տատանումների հետ միասին:

Մեկ կոճակով խումբ

Փաթեթավորեք մի շարք կոճակներ ներսով .btn:.btn-group

    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>

Ուղղահայաց կոճակների խմբեր

Դարձրեք կոճակների հավաքածուն ուղղահայաց շարված, այլ ոչ թե հորիզոնական:

    1. <div class = "btn-group btn-group-vertical" >
    2. ...
    3. </div>

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

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

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

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

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

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

    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-ով:


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

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

    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>

Չափերը

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

    1. <div class = «btn-group» >
    2. <button class = "btn btn-mini" > Գործողություն </button>
    3. <button class = "btn btn-mini 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-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:

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

Ընտրանքներ

Հաշմանդամ և ակտիվ վիճակներ

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

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

Դուք կարող եք կամայականորեն փոխել ակտիվ կամ անջատված խարիսխները բացվածքների համար՝ հեռացնելով սեղմումների գործառույթը՝ պահպանելով նախատեսված ոճերը:

    1. <div class = «էջադրում» >
    2. <ul>
    3. <li class = "disabled" ><span> Նախորդ </span></li>
    4. <li class = «ակտիվ» ><span> 1 </span></li>
    5. ...
    6. </ul>
    7. </div>

Հավասարեցում

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

    1. <div class = «էջադրման էջադրում կենտրոնացված» >
    2. ...
    3. </div>
    1. <div class = "էջադրում-էջադրում-աջ" >
    2. ...
    3. </div>

Փեյջեր

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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>

Էջի վերնագիր

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

    1. <div class = «էջ-վերնագիր» >
    2. <h1> Էջի վերնագրի օրինակ <small> Ենթատեքստ վերնագրի համար </small></h1>
    3. </div>

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

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

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

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

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

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

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

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

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

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

Նշում

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

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

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

    1. <ul class = «մանրապատկերներ» >
    2. <li class = "span4" >
    3. <div class = «մանրապատկեր» >
    4. <img src = "https://placehold.it/300x200" alt = "" >
    5. <h3> Մանրապատկերի պիտակ </h3>
    6. <p> Մանրապատկերի վերնագիր... </p>
    7. </div>
    8. </li>
    9. ...
    10. </ul>

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

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

Կանխադրված ահազանգ

Փաթեթավորեք ցանկացած տեքստ և կամընտիր անջատման կոճակը՝ .alertհիմնական նախազգուշացման ազդանշանի հաղորդագրության համար:

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

Անտեսել կոճակները

Mobile Safari և Mobile Opera բրաուզերները, ի լրումն data-dismiss="alert"հատկանիշի, պահանջում են պիտակ href="#"օգտագործելիս զգուշացումների անջատում:<a>

    1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

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

    1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

Անտեսել ծանուցումները Javascript-ի միջոցով

Օգտագործեք ծանուցումների jQuery հավելվածը ՝ ահազանգերը արագ և հեշտ հեռացնելու համար:


Ընտրանքներ

Ավելի երկար հաղորդագրությունների համար ավելացրեք ազդանշանային փաթեթի վերևի և ներքևի ծածկը՝ ավելացնելով .alert-block:

Զգուշացում.

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

    1. <div class = «զգուշացումների բլոկ» >
    2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
    3. <h4> Զգուշացում. </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 = "bar" style = " լայնությունը : 60 %; " </div>
    3. </div>

Գծավոր

Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար: Հասանելի չէ IE7-8-ում:

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

Անիմացիոն

Ավելացրե՛ք .active՝ .progress-stripedգծերն աջից ձախ շարժելու համար: Հասանելի չէ IE-ի բոլոր տարբերակներում:

    1. <div class = "progress progress-striped active" >
    2. <div class = "bar" style = " լայնություն : 40 %; " </div>
    3. </div>

Դարձված

Տեղադրեք մի քանի ձողեր միևնույն մեջ՝ .progressդրանք կուտակելու համար:

    1. <div class = «առաջընթաց» >
    2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
    3. <div class = "bar bar-warning" style = " width : 20 %; " </div>
    4. <div class = "bar bar-danger" style = " լայնությունը : 10 %; " </div>
    5. </div>

Ընտրանքներ

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

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

    1. <div class = «առաջընթացի առաջընթաց-ինֆորմացիա» >
    2. <div class = "bar" style = " լայնությունը : 20 % " ></div>
    3. </div>
    4. <div class = «առաջընթաց առաջընթաց-հաջողություն» >
    5. <div class = "bar" style = " width : 40 % " ></div>
    6. </div>
    7. <div class = «առաջընթացի առաջընթաց-նախազգուշացում» >
    8. <div class = "bar" style = " width : 60 % " ></div>
    9. </div>
    10. <div class = «առաջընթաց առաջընթաց-վտանգ» >
    11. <div class = "bar" style = " width : 80 % " ></div>
    12. </div>

Գծավոր ձողեր

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

    1. <div class = "progress progress-info progress-striped" >
    2. <div class = "bar" style = " width : 20 % " ></div>
    3. </div>
    4. <div class = «առաջընթաց առաջընթաց-հաջողություն առաջընթաց-գծավոր» >
    5. <div class = "bar" style = " width : 40 % " ></div>
    6. </div>
    7. <div class = «առաջընթաց առաջընթաց-նախազգուշացում առաջընթաց-գծավոր» >
    8. <div class = "bar" style = " width : 60 % " ></div>
    9. </div>
    10. <div class = «առաջընթաց առաջընթաց-վտանգ առաջընթաց-գծավոր» >
    11. <div class = "bar" style = " width : 80 % " ></div>
    12. </div>

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

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

Internet Explorer 10-ից և Opera 12-ից ավելի վաղ տարբերակները չեն աջակցում անիմացիաներ:

Հորեր

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

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

Ընտրովի պարապմունքներ

Կառավարեք լիցքավորումը և կլորացված անկյունները երկու կամընտիր մոդիֆիկատորների դասերով:

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

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

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

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

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

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

Օգնական դասեր

Պարզ, կենտրոնացված դասեր փոքր ցուցադրման կամ վարքագծի ճշգրտումների համար:

.քաշեք-ձախ

Ձախ թողեք տարրը

    1. class = «ձախ-ձախ»
    1. . քաշել - ձախ {
    2. բոց : ձախ ;
    3. }

.քաշել-աջ

Լողալ տարրը աջ

    1. class = «քաշել-աջ»
    1. . քաշեք - աջ {
    2. բոց : աջ ;
    3. }

.խլացված

Փոխել տարրի գույնը#999

    1. class = «խլացված»
    1. . խլացված {
    2. գույնը ՝ #999;
    3. }

.պարզել

Մաքրել floatցանկացած տարրի վրա

    1. class = «պարզեցնել»
    1. . մաքրել {
    2. * Մեծացում ՝ 1 ;
    3. &: առաջ ,
    4. &: { հետո
    5. ցուցադրում : աղյուսակ ;
    6. բովանդակությունը ՝ "" ;
    7. }
    8. &: { հետո
    9. պարզ . երկուսն էլ ;
    10. }
    11. }