Տպագրական սանդղակ

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

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

Հիմնական տեքստի օրինակ

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Օգտագործելով շեշտը

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, a pharetra augue:

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

Հասցեների օրինակներ

Ահա երկու օրինակ, թե ինչպես <address>կարելի է օգտագործել պիտակը.

Օրինակների հապավումներ

Հապավումները ձևավորված են մեծատառ տեքստով և թեթև կետավոր ներքևի եզրագծով: Նրանք նաև ունեն օգնության կուրսորը սավառնելու վրա, որպեսզի օգտվողներն ունենան լրացուցիչ ցուցում, որ ինչ-որ բան կցուցադրվի սավառնելիս:

HTML- ն ամենալավ բանն է կտրատած հացից հետո:

Հատկանիշ բառի հապավումը attr է :

<blockquote>Բլոկ մեջբերում ներառելու համար ցանկացած HTML- ի շուրջ փաթաթեք որպես մեջբերում: Ուղղակի չակերտների համար խորհուրդ ենք տալիս a <p>.

Ներառեք կամընտիր <small>տարր՝ ձեր աղբյուրը նշելու համար, և դուք կստանաք em գծիկ —դրա առաջ՝ ոճավորման նպատակով:

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թվերը կարող են առաջանալ: </p>
  <small> Հայտնի մեկը </small>
</blockquote>

Կանխադրված բլոկի մեջբերումները ձևավորվում են հետևյալ կերպ.

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

Ինչ-որ մեկը հայտնի Body of work- ում

Ձեր բլոկի մեջբերումը դեպի աջ տեղափոխելու համար ավելացրեք class="pull-right".

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

Ինչ-որ մեկը հայտնի Body of work- ում

Չպատվիրված

<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 class="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.

Inline

Փաթեթավորեք կոդի ներդիր հատվածները <code>.

Օրինակ , <code> բաժինը </ code > պետք է փաթաթված լինի որպես ներդիր :  

Հիմնական բլոկ

Օգտագործեք <pre>կոդի բազմաթիվ տողերի համար: Համոզվեք, որ ցանկացած կարեթը վերածեք իրենց յունիկոդի նիշերի՝ պատշաճ մատուցման համար:

<p>Տեքստի նմուշ այստեղ...</p>

<նախա>
  <p>Տեքստի նմուշ այստեղ...</p>
</pre>

Նշում. Համոզվեք, որ կոդը պահեք <pre>պիտակների մեջ որքան հնարավոր է մոտ ձախ; այն կարտացոլի բոլոր ներդիրները:

Google Prettify

Վերցրեք նույն <pre>տարրը և ավելացրեք երկու կամընտիր դասեր՝ ընդլայնված մատուցման համար:

<p> Տեքստի նմուշ այստեղ... </p>

<pre class = "գեղեցիկ 
     սպիտակեղեն» >
  <p>Տեքստի նմուշ այստեղ...</p>
</pre>

Ներբեռնեք google-code-prettify և դիտեք readme-ը, թե ինչպես օգտագործել:

<աղյուսակ>
  <գլուխ>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Աղյուսակները ինքնաբերաբար ձևավորվում են միայն մի քանի եզրագծերով՝ ապահովելու ընթերցանությունը և պահպանելու կառուցվածքը: 2.0- .tableով դասը պարտադիր է։

<table class = «աղյուսակ» > 
  …
</table>

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

Նշում. Sprited աղյուսակները օգտագործում են :nth-childCSS ընտրիչ և հասանելի չէ IE7-IE8-ում:

<table class = «սեղանի սեղան-գծավոր» > 
  …
</table>

Էսթետիկ նպատակներով ավելացրեք եզրագծեր ամբողջ սեղանի շուրջ և կլորացված անկյուններ:

<table class = "sable table-bordered" > 
  …
</table>

Դարձրեք ձեր աղյուսակները ավելի կոմպակտ՝ ավելացնելով .table-condensedդասակարգը՝ սեղանի բջիջների լցոնումը կիսով չափ կտրելու համար (8px-ից մինչև 4px):

<table class = "sable table-condensed" > 
  …
</table>

Ազատ զգալ միավորել սեղանի դասերից որևէ մեկը՝ տարբեր տեսք ստանալու համար՝ օգտագործելով առկա դասերից որևէ մեկը:

<table class = «սեղանի գծավոր սեղանի եզրագծով սեղան-խտացված» > 
  ...
</table>

Ճկուն HTML և CSS

Bootstrap-ի ձևերի լավագույն մասն այն է, որ ձեր բոլոր մուտքերն ու վերահսկիչները հիանալի տեսք ունեն, անկախ նրանից, թե ինչպես եք դրանք կառուցում ձեր նշագրման մեջ: Ոչ մի ավելորդ HTML չի պահանջվում, բայց մենք նախշերը տրամադրում ենք նրանց համար, ովքեր դա պահանջում են:

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

Ներառված է չորս դասավորություն

Bootstrap-ը աջակցում է չորս տեսակի ձևերի դասավորությանը.

• Ուղղահայաց (կանխադրված)
• Որոնում
• Inline
• Հորիզոնական

Ձևերի դասավորության տարբեր տեսակներ պահանջում են որոշակի փոփոխություններ նշելու համար, բայց վերահսկիչները մնում են և նույնն են պահում:

Վերահսկեք պետությունները և ավելին

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

Սխալը, նախազգուշացումը և հաջողությունը ներառված են ձևերի վերահսկման յուրաքանչյուր տեսակի համար: Ներառված են նաև հաշմանդամ կառավարիչների ոճեր:

v2.0-ով մենք ունենք ավելի թեթև և խելացի լռելյայն ձևերի ոճերի համար: Ոչ մի լրացուցիչ նշում, պարզապես ձևավորեք հսկիչները:

Արտացոլելով WebKit-ի լռելյայն ոճերը, պարզապես ավելացրեք .form-searchլրացուցիչ կլորացված որոնման դաշտերը:

Սկսելու համար մուտքերը բլոկի մակարդակ են: և .form-inline- .form-horizontalի համար մենք օգտագործում ենք inline-block:

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

Ձախ կողմում ցուցադրված են բոլոր լռելյայն ձևի վերահսկիչները, որոնք մենք աջակցում ենք: Ահա պարբերակներով ցուցակը.

• տեքստային մուտքագրումներ (տեքստ, գաղտնաբառ, էլ.փոստ և այլն)
• վանդակը
• ռադիո
• ընտրել
• բազմակի ընտրություն
• ֆայլի մուտքագրում
• textarea

Նոր լռելյայններ v2.0-ով

Մինչև v1.4, Bootstrap-ի լռելյայն ձևի ոճերը օգտագործում էին հորիզոնական դասավորությունը: Bootstrap 2-ի միջոցով մենք հանեցինք այդ սահմանափակումը՝ ցանկացած ձևի համար ավելի խելացի, ավելի լայնածավալ լռելյայններ ունենալու համար:

Վերանախագծված զննարկիչը նշում է

Bootstrap-ն առանձնացնում է բրաուզերի կողմից աջակցվող կենտրոնացված և disabledվիճակների ոճեր: Մենք հեռացնում ենք լռելյայն Webkit- outlineը box-shadowև դրա տեղում կիրառում ենք :focus.

Ձևի վավերացում

Այն նաև ներառում է սխալների, նախազգուշացումների և հաջողության վավերացման ոճեր: Օգտագործելու համար ավելացրեք սխալի դասը շրջակա միջավայրին .control-group:

<դաշտերի հավաքածու
  class = "control-group error" >
  …
</fieldset>

Կազմեք և կցեք մուտքերը

Ներածման խմբերը` կցված կամ նախապես ամրացված տեքստով, հեշտ միջոց են տրամադրում ձեր մուտքագրման համար ավելի շատ համատեքստ տալու համար: Հիանալի օրինակները ներառում են @ նշանը Twitter-ի օգտանունների համար կամ $ ֆինանսների համար:

Նշման տուփեր և ռադիոներ

Մինչև v1.4, Bootstrap-ը պահանջում էր լրացուցիչ նշագրում վանդակների և ռադիոկայանների շուրջ՝ դրանք կուտակելու համար: Հիմա պարզ խնդիր է կրկնել այն <label class="checkbox">, որը փաթաթում է <input type="checkbox">.

Ներկառուցված վանդակները և ռադիոները նույնպես ապահովված են: Պարզապես ավելացրեք .inlineորևէ մեկին .checkboxկամ .radio, և դուք պատրաստ եք:

Ներդիր ձևեր և կցեք/կցեք

Ներածված ձևով մուտքագրումներն օգտագործելու կամ ավելացնելու համար համոզվեք, որ տեղադրեք .add-onև input-ը նույն տողում, առանց բացատների:

Ձևի օգնության տեքստ

Ձեր ձևի մուտքագրման համար օգնության տեքստ ավելացնելու համար ներառեք ներդիր օգնության տեքստ <span class="help-inline">կամ օգնության տեքստի բլոկ <p class="help-block">՝ մուտքագրման տարրից հետո:

Գործողությունների կոճակներ

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

Խարիսխների և ձևերի համար

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

Նշում. Բոլոր կոճակները պետք է ներառեն .btnդասը: Կոճակների ոճերը պետք է կիրառվեն <button>և <a>տարրերը հետևողականության համար:

Բազմաթիվ չափսեր

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

Առաջնային գործողություն Գործողություն

Առաջնային գործողություն Գործողություն

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

Անջատված կոճակների .btn-disabledհամար օգտագործեք հղումների և տարրերի :disabledհամար :<button>

Առաջնային գործողություն Գործողություն

Առաջնային գործողություն Գործողություն

Խաչաձև բրաուզերի համատեղելիություն

IE9-ում մենք բոլոր կոճակների գրադիենտը գցում ենք՝ հօգուտ կլորացված անկյունների, քանի որ IE9-ը չի կտրում ֆոնային գրադիենտները դեպի անկյունները:

Նմանապես, IE9-ը ջնջում է հաշմանդամ buttonտարրերը՝ տեքստը մոխրագույն դարձնելով տհաճ տեքստի ստվերով. ցավոք, մենք չենք կարող դա շտկել:

Կառուցվել է որպես սփրայթ

Յուրաքանչյուր պատկերակ հավելյալ խնդրանք դարձնելու փոխարեն, մենք դրանք կազմեցինք sprite-ի մեջ՝ պատկերների մի փունջ մեկ ֆայլում, որն օգտագործում է CSS՝ պատկերները տեղադրելու համար background-position: Սա նույն մեթոդն է, որը մենք օգտագործում ենք Twitter.com-ում, և այն լավ է աշխատել մեզ մոտ:

Բոլոր սրբապատկերների դասերը նախածանցով են .icon-՝ համապատասխան անունների տարածության և շրջանակի համար, ինչպես մեր մյուս բաղադրիչները: Սա կօգնի խուսափել այլ գործիքների հետ կոնֆլիկտներից:

Glyphicons- ը մեզ թույլ է տվել օգտագործել Halflings-ի հավաքածուն մեր բաց կոդով գործիքակազմում այնքան ժամանակ, քանի դեռ մենք տրամադրում ենք հղում և վարկավորում այստեղ՝ փաստաթղթերում: Խնդրում եմ, մտածեք նույնն անել ձեր նախագծերում:

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

v2.0.0-ի միջոցով մենք ընտրել ենք <i>պիտակ մեր բոլոր պատկերակների համար, բայց դրանք չունեն մեծատառերի դաս՝ միայն ընդհանուր նախածանց: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում.

<i class = "icon-search" ></i> 

Կան նաև շրջված (սպիտակ) պատկերակների ոճեր, որոնք պատրաստված են մեկ լրացուցիչ դասի հետ.

<i class = "icon-search icon-white" ></i> 

Կան 120 դասեր, որոնցից կարող եք ընտրել ձեր պատկերակները: Պարզապես ավելացրեք համապատասխան <i>դասերի պիտակ, և դուք պատրաստ եք: Ամբողջական ցանկը կարող եք գտնել sprites.less-ում կամ հենց այստեղ՝ այս փաստաթղթում:

Օգտագործման դեպքեր

Սրբապատկերները հիանալի են, բայց որտեղ կարելի է օգտագործել դրանք: Ահա մի քանի գաղափարներ.

• Որպես տեսողական պատկերներ ձեր կողագոտու նավիգացիայի համար
• Զուտ պատկերակների վրա հիմնված նավիգացիայի համար
• Կոճակների համար, որոնք կօգնեն փոխանցել գործողության իմաստը
• Օգտագործողի նպատակակետի համատեքստը կիսելու հղումներով

Ըստ էության, ցանկացած վայրում, որտեղ դուք կարող եք տեղադրել <i>պիտակ, կարող եք տեղադրել պատկերակ:

Թարմացնել Ստուգում Ջնջել

Մեկնաբանություն Կարգավորումներ Լրացուցիչ տեղեկություններ