Պատմություն

Twitter-ի ավելի վաղ օրերին ինժեներներն օգտագործում էին գրեթե ցանկացած գրադարան, որին ծանոթ էին, որպեսզի բավարարեին առջևի պահանջները: Bootstrap-ը սկսվեց որպես պատասխան այն մարտահրավերներին, որոնք ներկայացված էին, և զարգացումը արագ արագացավ Twitter-ի առաջին Hackweek-ի ընթացքում:

Twitter-ի բազմաթիվ ինժեներների օգնությամբ և արձագանքներով՝ Bootstrap-ը զգալիորեն աճել է՝ ներառելով ոչ միայն հիմնական ոճերը, այլև ավելի էլեգանտ և դիմացկուն առջևի դիզայնի նախշերը:

Կարդալ ավելին dev.twitter.com կայքում ›

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

Bootstrap-ը փորձարկված և աջակցվում է ժամանակակից խոշոր բրաուզերներում, ինչպիսիք են Chrome-ը, Safari-ն, Internet Explorer-ը և Firefox-ը:

• Վերջին Safari
• Վերջին Google Chrome-ը
• Firefox 4+
• Internet Explorer 7+
• Օպերա 11

Ինչ է ներառված

Bootstrap-ը համալրված է կոմպիլացված CSS-ով, չկոմպիլյացված և օրինակելի կաղապարներով:

• Բոլոր օրիգինալ .less ֆայլերը
• Լիովին կազմված և փոքրացված CSS
• Ամբողջական ոճի ուղեցույցի փաստաթղթեր
• Էջի կաղապարի օրինակ (ավելին շուտով)

Կանխադրված ցանց

Որպես Bootstrap-ի մաս տրամադրվող լռելյայն ցանցային համակարգը 940px լայնությամբ 16 սյունակ ցանց է: Դա հանրաճանաչ 960 ցանցային համակարգի համն է, բայց առանց ձախ և աջ կողմերի լրացուցիչ լուսանցքի/լիցքավորման:

Ցանցի նշագրման օրինակ

Ինչպես ցույց է տրված այստեղ, հիմնական դասավորությունը կարող է ստեղծվել երկու «սյունակներով», որոնցից յուրաքանչյուրը ընդգրկում է 16 հիմնային սյուներից, որոնք մենք սահմանել ենք որպես մեր ցանցային համակարգի մաս: Լրացուցիչ տատանումների համար տե՛ս ստորև բերված օրինակները:

<div class = «շարք» > 
  <div class = "span6 սյունակներ" > 
    ...
  </div>
  <div class = "span10 սյունակ" > 
    ...
  </div>
</div>

Ֆիքսված դասավորություն

Լռելյայն և պարզ 940px լայնությամբ, կենտրոնացված դասավորությունը գրեթե ցանկացած վեբկայքի կամ էջի համար, որը տրամադրվում է մեկ <div.container>.

<մարմին>
  <div class = «կոնտեյներ» > 
    ...
  </div>
</body>

Հեղուկ դասավորություն

Այլընտրանքային, ճկուն հեղուկ էջի կառուցվածք՝ min- և max-լայնություններով և ձախակողմյան կողագոտով: Հիանալի է հավելվածների և փաստաթղթերի համար:

<մարմին>
  <div class = «կոնտեյներ-հեղուկ» > 
    <div class = «կողային գոտի» > 
      ...
    </div>
    <div class = «բովանդակություն» > 
      ...
    </div>
  </div>
</body>

Վերնագրեր և պատճեններ

Ստանդարտ տպագրական հիերարխիա ձեր վեբ էջերի կառուցվածքի համար:

Ամբողջ տպագրական ցանցը հիմնված է երկու Less փոփոխականների վրա մեր preboot.less ֆայլում՝ @basefontև @baseline. Առաջինը բազային տառատեսակի չափն է, որն օգտագործվում է ամբողջ ընթացքում, իսկ երկրորդը՝ բազային տողի բարձրությունը:

Մենք օգտագործում ենք այդ փոփոխականները և որոշ մաթեմատիկա՝ ստեղծելու մեր բոլոր տեսակի լուսանցքները, լցոնումները և գծերի բարձրությունները և այլն:

հ1. Վերնագիր 1

h2. Վերնագիր 2

h3. Վերնագիր 3

h4. Վերնագիր 4

h5. Վերնագիր 5

h6. Վերնագիր 6

Օրինակ պարբերություն

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Օրինակ վերնագիր Ունի ենթավերնագիր…

Տարբեր տարրեր

Օգտագործելով շեշտադրումներ, հասցեներ և հապավումներ

<strong> <em> <address> <abbr>

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

Շեշտադրման պիտակները ( <strong>և <em>) պետք է օգտագործվեն բառի կամ արտահայտության լրացուցիչ կարևորությունը կամ շեշտադրումը դրա շրջակա պատճենի հետ կապված: Օգտագործեք <strong>կարևորության և սթրեսի շեշտադրման <em>համար :

Շեշտադրումը պարբերության մեջ

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus: Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue:

Նշում.<b> HTML5-ում օգտագործելը և պիտակները դեռևս նորմալ է <i>, և պարտադիր չէ, որ դրանք համապատասխանաբար ձևավորվեն թավ և շեղ (չնայած, եթե կա ավելի իմաստային տարր, օգտագործեք այն): <b>նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ <i>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

Հասցեներ

Տարրը <address>օգտագործվում է իր մոտակա նախնիների կամ ամբողջ աշխատանքի համար կոնտակտային տեղեկատվության համար: Ահա թե ինչպես է այն նայում.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Նշում. An-ի յուրաքանչյուր տող <address>պետք է ավարտվի տողերի ընդմիջումով ( <br />) կամ փաթաթված լինի բլոկի մակարդակի պիտակով (օրինակ՝ <p>)՝ բովանդակությունը ճիշտ ձևավորելու համար:

հապավումներ

Հապավումների և հապավումների համար օգտագործեք <abbr>պիտակը ( HTML5-<acronym> ում հնացած է ): Տեղադրեք սղագրության ձևը պիտակի մեջ և վերնագիր սահմանեք ամբողջական անվան համար:

Արգելափակման մեջբերումներ

<blockquote> <p> <small>

Ինչպես մեջբերել

Բլոկի մեջբերում ներառելու համար փաթաթեք <blockquote>և նշեք : Օգտագործեք տարրը՝ ձեր աղբյուրը նշելու համար, և դրանից առաջ կստանաք em գծիկ :<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ կամ առաջանալ:

Դոկտոր Ջուլիուս Հիբերտ

Չպատվիրված<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Ամբողջական մոլեստի լորեմ և մասսա
• Հեշտացում պրետիում նիսլ ալիքում
• Նալլա volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Էնեան նստել ամետ էրատ նունց
• Eget porttitor lorem

Ոչ ոճավորված<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Ամբողջական մոլեստի լորեմ և մասսա
• Հեշտացում պրետիում նիսլ ալիքում
• Նալլա volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Էնեան նստել ամետ էրատ նունց
• Eget porttitor lorem

Պատվիրել է<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Ամբողջական մոլեստի լորեմ և մասսա
4. Հեշտացում պրետիում նիսլ ալիքում
5. Նալլա volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Էնեան նստել ամետ էրատ նունց
8. Eget porttitor lorem

Նկարագրությունdl

Նկարագրության ցուցակներ

Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:

Էվիզմոդ

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Սեղանների կառուցում

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Սեղանները հիանալի են՝ շատ բաների համար: Հիանալի աղյուսակները, այնուամենայնիվ, կարիք ունեն մի փոքր նշագրման սիրո՝ օգտակար, մասշտաբային և ընթեռնելի (կոդի մակարդակով) լինելու համար: Ահա մի քանի խորհուրդներ, որոնք կօգնեն:

Միշտ փաթաթեք ձեր սյունակների վերնագրերը a<thead> այնպես, որ հիերարխիան լինի <thead>> <tr>> <th>:

Սյունակների վերնագրերի նման, ձեր աղյուսակի ամբողջ բովանդակությունը պետք է փաթաթված լինի <tbody>այնպես, որ ձեր հիերարխիան լինի <tbody>><tr> > <td>:

Օրինակ՝ աղյուսակի կանխադրված ոճերը

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

#	Անուն	Ազգանուն	Լեզու
1	Մի քանի	Մեկը	Անգլերեն
2	Ջո	Վեց տուփ	Անգլերեն
3	Ստյու	Դենտ	Կոդ

<աղյուսակ>
  ...
</table>

Օրինակ՝ Զեբրա գծավոր

Մի փոքր շքեղ եղեք ձեր սեղանների հետ՝ ավելացնելով զեբրա գծեր. պարզապես ավելացրեք .zebra-stripedդասը:

#	Անուն	Ազգանուն	Լեզու
1	Մի քանի	Մեկը	Անգլերեն
2	Ջո	Վեց տուփ	Անգլերեն
3	Ստյու	Դենտ	Կոդ

Նշում. Zebra-striping-ը առաջադեմ բարելավում է, որը հասանելի չէ հին բրաուզերների համար, ինչպիսիք են IE8-ը և ստորև:

<table class = "zebra-striped" > 
...
</table>

Օրինակ՝ Zebra-striped w/ TableSorter.js

Վերցնելով նախորդ օրինակը՝ մենք բարելավում ենք մեր աղյուսակների օգտակարությունը՝ ապահովելով տեսակավորման գործառույթ jQuery- ի և Tablesorter հավելվածի միջոցով: Սեղմեք ցանկացած սյունակի վերնագրի վրա՝ տեսակավորումը փոխելու համար:

#	Անուն	Ազգանուն	Լեզու
1	Ձեր	Մեկը	Անգլերեն
2	Ջո	Վեց տուփ	Անգլերեն
3	Ստյու	Դենտ	Կոդ

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<սկրիպտ > 
  $ ( ֆունկցիա () { 
    $ ( «table# sortTableExample» ): սեղանի տեսակավորող ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Կանխադրված ոճեր

Բոլոր ձևերին տրված են լռելյայն ոճեր՝ դրանք ընթեռնելի և մասշտաբային կերպով ներկայացնելու համար: Ոճերը տրամադրվում են տեքստի մուտքագրման, ընտրված ցուցակների, տեքստային տարածքների, ռադիո կոճակների և վանդակների և կոճակների համար:

Լեգենդի ձևի օրինակ

X-Large մուտքագրում

Ընտրել

1 2 3 4 5

Ընտրել

1 2 3 4 5

Չխմբագրվող մուտքագրում

Որոշ արժեքներ այստեղ

Անջատված մուտքագրում

X-Large մուտքագրում

Օգնության տեքստի փոքր հատված

Լեգենդի ձևի օրինակ

Նախապատրաստված տեքստ

@

Նախադրված վանդակ

Կցված վանդակ

Ֆայլի մուտքագրում

Լեգենդի ձևի օրինակ

Ընտրանքների ցանկ

• Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
• Երկրորդ տարբերակը կարող է նաև ստուգվել և ներառվել ձևի արդյունքներում
• Երրորդ տարբերակը, այո, կռահեցիք, նույնպես կարող է ստուգվել և ներառվել ձևի արդյունքներում
• Չորրորդ տարբերակը չի կարող ստուգվել, քանի որ այն անջատված է:

Նշում․ պիտակները շրջապատում են բոլոր ընտրանքները շատ ավելի մեծ սեղմումների տարածքների և ավելի օգտագործելի ձևի համար:

Ամսաթվերի միջակայք

դեպի Բոլոր ժամանակները ցուցադրվում են որպես Խաղաղօվկիանոսյան ստանդարտ ժամանակ (GMT -08:00):

Textarea

Անհրաժեշտության դեպքում օգնության տեքստի բլոկ՝ վերը նշված դաշտը նկարագրելու համար:

Ընտրանքների ցանկ

• Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
• Երկրորդ տարբերակը կարող է նաև ստուգվել և ներառվել ձևի արդյունքներում

Պահպանել փոփոխությունները  Չեղարկել

Խցանված ձևեր

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

Լեգենդի ձևի օրինակ

X-Large մուտքագրում

Ընտրել

1 2 3 4 5

Լեգենդի ձևի օրինակ

X-Large մուտքագրում

Օգնության տեքստի փոքր հատված

Ընտրանքների ցանկ

• Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
• Երկրորդ տարբերակը կարող է նաև ստուգվել և ներառվել ձևի արդյունքներում

Նշում․ պիտակները շրջապատում են բոլոր ընտրանքները շատ ավելի մեծ սեղմումների տարածքների և ավելի օգտագործելի ձևի համար:

Պահպանել փոփոխությունները  Չեղարկել

Կոճակներ

Որպես կոնվենցիա, կոճակները օգտագործվում են գործողությունների համար, մինչդեռ հղումները օգտագործվում են օբյեկտների համար: Օրինակ՝ «Ներբեռնում»-ը կարող է լինել կոճակ, իսկ «վերջին գործունեությունը»՝ հղում:

Բոլոր կոճակները լռելյայն ունեն բաց մոխրագույն ոճ, սակայն մի շարք ֆունկցիոնալ դասեր կարող են կիրառվել տարբեր գույների ոճերի համար: Այս դասերը ներառում են կապույտ .primaryդաս, բաց-կապույտ .info, կանաչ .successև կարմիր .dangerդաս: Բացի այդ, ձեր սեփական ոճերը գլորելը հեշտ է:

Օրինակ կոճակներ

Կոճակների ոճերը կարող են կիրառվել ցանկացածի վրա՝ .btnկիրառվածով: Սովորաբար դուք կցանկանաք կիրառել դրանք միայն <a>, <button>և ընտրել <input>տարրերի վրա: Ահա թե ինչպես է այն նայում.

Այլընտրանքային չափսեր

Ցանկանում եք ավելի մեծ կամ փոքր կոճակներ: Ունեցեք այն:

Հաշմանդամ վիճակ

Կոճակների համար, որոնք ակտիվ չեն կամ այս կամ այն ​​պատճառով անջատված են հավելվածի կողմից, օգտագործեք անջատված վիճակը: Դա .disabledհղումների և տարրերի :disabledհամար է :<button>

Հղումներ

Կոճակներ

Ինչ է դա

Մեր վերին գիծը ֆիքսված գիծ է, որը պարունակում է վեբկայքի պատկերանշանը կամ անունը, առաջնային նավիգացիան և որոնման ձևը:

Կարգավորելի

Ներսում գտնվող բոլոր տարրերը, ինչպես նաև ամբողջ վերին տողը, կամընտիր են: Դուք կարող եք ընտրել լոգոն/անուն, նավարկություն, որոնում և երկրորդական նավարկություն կամ դրանց ցանկացած համակցություն:

Ներառված են բացվող պատուհաններ

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

Ներդիրներ և հաբեր

Ստեղծեք պարզ երկրորդական նավարկություն a-ով <ul>: Փոխանակեք ներդիրների կամ հաբերի միջև՝ ավելացնելով համապատասխան դասը:

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

• տուն
• Անձնագիր
• Հաղորդագրություններ
• Կարգավորումներ
• Կապ

<ul class = «ներդիրներ» > 
  <li class = "active" ><a href = "#" > Գլխավոր </a></li>  
  <li><a href = "#" > Պրոֆիլ </a></li> 
  <li><a href = "#" > Հաղորդագրություններ </a></li> 
  <li><a href = "#" > Կարգավորումներ </a></li> 
  <li><a href = "#" > Կապ </a></li> 
</ul>

• տուն
• Անձնագիր
• Հաղորդագրություններ
• Կարգավորումներ
• Կապ

<ul class = «դեղահատեր» > 
  <li class = "active" ><a href = "#" > Գլխավոր </a></li>  
  <li><a href = "#" > Պրոֆիլ </a></li> 
  <li><a href = "#" > Հաղորդագրություններ </a></li> 
  <li><a href = "#" > Կարգավորումներ </a></li> 
  <li><a href = "#" > Կապ </a></li> 
</ul>

Էջավորում

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

<div class = «էջադրում» > 
  <ul>
    <li class = "prev disabled" ><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 = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Հաջորդ → </a></li>  
  </ul>
</div>

Հիմնական ահազանգեր

div.alert-message

Մեկ տողով հաղորդագրություններ՝ ընդգծելու ձախողումը, հնարավոր ձախողումը կամ գործողության հաջողությունը: Հատկապես օգտակար է ձևերի համար:

Արգելափակել հաղորդագրությունները

div.alert-message.block-message

Հաղորդագրությունների համար, որոնք պահանջում են մի փոքր բացատրություն, մենք ունենք պարբերության ոճի ազդանշաններ: Սրանք կատարյալ են ավելի երկար սխալի հաղորդագրություններ փրփրելու, օգտատիրոջը սպասող գործողության մասին նախազգուշացնելու կամ պարզապես էջի վրա ավելի մեծ շեշտադրման համար տեղեկատվություն ներկայացնելու համար:

Մոդալներ

Մոդալները՝ երկխոսությունները կամ լուսատուփերը, հիանալի են համատեքստային գործողությունների համար այն իրավիճակներում, երբ կարևոր է պահպանել ֆոնային համատեքստը:

Գործիքների խորհուրդներ

Twipsies-ը չափազանց օգտակար է շփոթված օգտատիրոջը օգնելու և նրան ճիշտ ուղղությամբ ուղղելու համար:

Պոպովերներ

Օգտագործեք popovers՝ ենթատեքստային տեղեկատվություն տրամադրելու էջին՝ առանց ազդելու դասավորության:

Bootstrap-ը կառուցվել է Preboot-ով , որը միքսինների և փոփոխականների բաց կոդով փաթեթ է, որը կօգտագործվի Less- ի հետ միասին ՝ CSS նախապրոցեսոր՝ ավելի արագ և հեշտ վեբ մշակման համար:

Ստուգեք, թե ինչպես ենք մենք օգտագործել Preboot-ը Bootstrap-ում և ինչպես կարող եք օգտագործել այն, եթե ընտրեք ավելի քիչ գործարկել ձեր հաջորդ նախագծում:

Ինչպես օգտագործել այն

Օգտագործեք այս տարբերակը՝ ձեր զննարկիչում javascript-ի միջոցով Bootstrap-ի Less փոփոխականները, միքսները և CSS-ում տեղադրումը ամբողջությամբ օգտագործելու համար:

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" </script> 

Չե՞ք զգում .js լուծումը: Փորձեք Less Mac հավելվածը կամ օգտագործեք Node.js ՝ ձեր կոդը տեղակայելիս կոմպիլյացիայի համար:

Ինչ է ներառված

Ահա Twitter Bootstrap-ում ներառված որոշ կարևոր կետեր՝ որպես Bootstrap-ի մաս: Անցեք Bootstrap կայք կամ Github նախագծի էջ՝ ներբեռնելու և ավելին իմանալու համար:

Փոփոխականներ

Less-ի փոփոխականները կատարյալ են ձեր CSS գլխացավանքից ազատ պահելու և թարմացնելու համար: Երբ ցանկանում եք փոխել գույնի արժեքը կամ հաճախ օգտագործվող արժեքը, թարմացրեք այն մեկ տեղում, և դուք պատրաստ եք:

// Հղումներ
@linkColor ՝ #8b59c2;         
@linkColorHover ՝     մթնել ( @linkColor , 10 ); 
 
// Մոխրագույններ
@սև : #000;             
@grayDark :           լուսավորել ( @սև , 25 %); 
@մոխրագույն ՝               լուսավորել ( @սև , 50 %); 
@grayLight :          լուսավորել ( @սև , 70 %); 
@grayLighter ՝        լուսավորել ( @սև , 90 %); 
@white : #fff;             
 
// Շեշտադրման գույներ
@blue : #08b5fb;              
@green : #46a546;             
@կարմիր ՝ # 9d261d ;               
@դեղին : # ffc40d ;            
@նարնջագույն ՝ # f89406 ;            
@pink : #c3325f;              
@մանուշակագույն ՝ # 7a43b6 ;            
 
// Ելակետային ցանց
@basefont ՝ 13px ;          
@baseline ՝ 18px ;          

Մեկնաբանելով

Less-ը նաև տրամադրում է մեկնաբանությունների մեկ այլ ոճ՝ բացի CSS-ի նորմալ /* ... */շարահյուսությունից:

// Սա մեկնաբանություն է
/* Սա նույնպես մեկնաբանություն է */

Խառնում է wazoo-ն

Միքսները հիմնականում ներառում են կամ մասնակի CSS-ի համար, ինչը թույլ է տալիս միավորել կոդի բլոկը մեկի մեջ: Դրանք հիանալի են վաճառողի նախածանցով հատկությունների համար, ինչպիսիք են box-shadow, զննարկիչի խաչմերուկի գրադիենտները, տառատեսակների կույտերը և այլն: Ստորև բերված է միքսների նմուշ, որոնք ներառված են Bootstrap-ում:

Տառատեսակների կույտեր

#տառատեսակ {
  . սղագրություն ( @weight : նորմալ , @size : 14px , @lineHeight : 20px ) {     
    տառատեսակի չափը ՝ @size ; _ 
    font - weight : @weight ; 
    տող - բարձրություն ՝ @lineHeight ; 
  }
  . sans - serif ( @weight ՝ նորմալ , @size ՝ 14px , @lineHeight ՝ 20px ) {     
    տառատեսակ - ընտանիք ՝ «Helvetica Neue» , Helvetica , Arial , sans - serif ;   
    տառատեսակի չափը ՝ @size ; _ 
    font - weight : @weight ; 
    տող - բարձրություն ՝ @lineHeight ; 
  }
  . սերիֆ ( @weight : նորմալ , @size : 14px , @lineHeight : 20px ) {     
    տառատեսակ - ընտանիք ՝ «Georgia» , Times New Roman , Times , sans - serif ;     
    տառատեսակի չափը ՝ @size ; _ 
    font - weight : @weight ; 
    տող - բարձրություն ՝ @lineHeight ; 
  }
  . monospace ( @weight : նորմալ , @size : 12px , @lineHeight : 20px ) {     
    տառատեսակ - ընտանիք ՝ «Monaco» , Courier New , monospace ;   
    տառատեսակի չափը ՝ @size ; _ 
    font - weight : @weight ; 
    տող - բարձրություն ՝ @lineHeight ; 
  }
}

Գրադիենտներ

#գրադիենտ {
  . հորիզոնական ( @startColor ՝ #555, @endColor՝ #333) { 
    ֆոնի գույնը ՝ @endColor ; _ 
    ֆոն - կրկնել . կրկնել - x ;
    ֆոն - պատկեր . - khtml - գրադիենտ ( գծային , ձախ վերև , աջ վերև , ( @startColor ), մինչև ( @endColor ) ); // Հաղթող   
    ֆոն - պատկեր . - moz - գծային - գրադիենտ ( ձախ , @startColor , @endColor ); // FF 3.6+    
    ֆոն - պատկեր . - ms - գծային - գրադիենտ ( ձախ , @startColor , @endColor ); // IE10    
    ֆոն - պատկեր . - webkit - գրադիենտ ( գծային , ձախ վերև , աջ վերև , գույնի կանգառ ( 0 %, @startColor ), գույնի կանգառ ( 100 % , @endColor ) ); // Safari 4+, Chrome 2+    
    ֆոն - պատկեր . - webkit - գծային - գրադիենտ ( ձախ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ֆոն - պատկեր . - o - գծային - գրադիենտ ( ձախ , @startColor , @endColor ); // Օպերա 11.10    
    ֆոն - պատկեր . գծային - գրադիենտ ( ձախ , @startColor , @endColor ); // Le ստանդարտ   
  }
  . ուղղահայաց ( @startColor ՝ #555, @endColor՝ #333) { 
    ֆոնի գույնը ՝ @endColor ; _ 
    ֆոն - կրկնել . կրկնել - x ;
    ֆոն - պատկեր . - khtml - գրադիենտ ( գծային , ձախ վերև , ձախ ներքև , ( @startColor ), մինչև ( @endColor ) ); // Հաղթող   
    ֆոն - պատկեր . - moz - գծային - գրադիենտ ( @startColor , @endColor ); // FF 3.6+   
    ֆոն - պատկեր . - ms - գծային - գրադիենտ ( @startColor , @endColor ); // IE10   
    ֆոն - պատկեր . - webkit - գրադիենտ ( գծային , ձախ վերև , ձախ ներքև , գույնի կանգառ ( 0 %, @startColor ), գույնի կանգառ ( 100 % , @endColor ) ); // Safari 4+, Chrome 2+    
    ֆոն - պատկեր . - webkit - գծային - գրադիենտ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ֆոն - պատկեր . - o - գծային - գրադիենտ ( @startColor , @endColor ); // Օպերա 11.10   
    ֆոնային պատկեր ՝ գծային - գրադիենտ ( @startColor , @endColor ) ; // Ստանդարտ  
  }
  . ուղղորդված ( @startColor ՝ #555, @endColor՝ #333, @deg: 45deg) { 
    ...
  }
  . ուղղահայաց - երեք - գույներ ( @startColor ՝ #00b3ee, @midColor՝ #7a43b6, @colorStop՝ 50%, @endColor՝ #c3325f) { 
    ...
  }
}

Գործողություններ և ցանցային համակարգ

Ձեռք բերեք շքեղություն և կատարեք մաթեմատիկա՝ ստորև բերվածի նման ճկուն և հզոր միքսներ ստեղծելու համար:

// Ցանց
@gridColumns ՝ 16 ;       
@gridColumnWidth ՝ 40px ;   
@gridGutterWidth ՝ 20px ;   
@siteWidth . ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Ցանցային համակարգ
. կոնտեյներ {
  լայնությունը ՝ @siteWidth ; 
  լուսանցք : 0 ավտոմատ ;  
  . հստակեցում ();
}
. սյունակներ ( @columnSpan : 1 ) {  
  լայնությունը ՝ ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. օֆսեթ ( @columnOffset : 1 ) {  
  լուսանցք - ձախ . ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}