Բաղադրիչներ

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

Օրինակներ

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

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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ձախ </button>
  3. <button class = "btn" > Միջին </button>
  4. <button class = "btn" > Աջ </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 = "#" > 5 </a></li>
  9. <li><a href = "#" > Հաջորդը </a></li>
  10. </ul>
  11. </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 = «հաշմանդամ» ><span> « </span></li>
  4. <li class = «ակտիվ» ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Չափերը

Ցանկանում եք ավելի մեծ, թե փոքր էջադրում: Ավելացնել .pagination-large, .pagination-smallկամ .pagination-miniլրացուցիչ չափերի համար:

  1. <div class = «էջերի էջավորում-մեծ» >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = «էջադրում» >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = «էջադրում-փոքր» >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </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>

Հեշտությամբ ծալվող

Հեշտ իրականացման համար պիտակները և կրծքանշանները պարզապես կփլուզվեն (CSS-ի :emptyընտրիչի միջոցով), երբ ներսում որևէ բովանդակություն չկա:

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

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

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

Սա պարզ հերոսի միավոր է, պարզ 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 data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = «մանրապատկերներ» >
  2. <li class = "span4" >
  3. <div class = «մանրապատկեր» >
  4. <img data-src = "holder.js/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 = "զգուշացում" > × </button>
  3. <strong> Զգուշացում. </strong> Լավագույնը համոզվեք, որ դուք այնքան էլ լավ տեսք չունեք:
  4. </div>

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

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

  1. <a href = "#" class = "close" data-dismiss = "զգուշացում" > × </a>

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

  1. <button type = "button" class = "close" data-dismiss = "զգուշացում" > × </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 = "զգուշացում" > × </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 = " 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>

Գծավոր ձողեր

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

  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-ից ավելի վաղ տարբերակները չեն աջակցում անիմացիաներ:

Վերացական օբյեկտների ոճեր՝ տարբեր տեսակի բաղադրիչներ ստեղծելու համար (օրինակ՝ բլոգի մեկնաբանությունները, թվիթերը և այլն), որոնք տեքստային բովանդակության հետ մեկտեղ ցուցադրում են ձախ կամ աջ հարթեցված պատկեր:

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

Լռելյայն մեդիան թույլ է տալիս լողալ մեդիա օբյեկտը (պատկերներ, տեսանյութեր, աուդիո) բովանդակության բլոկի ձախ կամ աջ կողմում:

64x64

Մեդիա վերնագիր

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
64x64

Մեդիա վերնագիր

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
64x64

Մեդիա վերնագիր

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
  1. <div class = «մեդիա» >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = «մեդիա մարմին» >
  6. <h4 class = "media-heading" > Մեդիա վերնագիր </h4>
  7. ...
  8.  
  9. <!-- Ներդրված մեդիա օբյեկտ -->
  10. <div class = «մեդիա» >
  11. ...
  12. </div>
  13. </div>
  14. </div>

ԶԼՄ-ների ցանկ

Մի փոքր լրացուցիչ նշագրման դեպքում դուք կարող եք օգտագործել մեդիա ցանկի ներսում (օգտակար մեկնաբանությունների թեմաների կամ հոդվածների ցուցակների համար):

  • 64x64

    Մեդիա վերնագիր

    Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:

    64x64

    Ներդրված մեդիա վերնագիր

    Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
    64x64

    Ներդրված մեդիա վերնագիր

    Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
    64x64

    Ներդրված մեդիա վերնագիր

    Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
  • 64x64

    Մեդիա վերնագիր

    Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
  1. <ul class = «մեդիա ցուցակ» >
  2. <li class = «մեդիա» >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = «մեդիա մարմին» >
  7. <h4 class = "media-heading" > Մեդիա վերնագիր </h4>
  8. ...
  9.  
  10. <!-- Ներդրված մեդիա օբյեկտ -->
  11. <div class = «մեդիա» >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Հորեր

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

Տեսեք, ես ջրհորի մեջ եմ:
  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. }