Tipografiki masştab

Tiphli tipografiki gözenek, üýtgeýänlerimiz.less faýlyndaky iki sany az üýtgeýjä esaslanýar: @baseFontSizewe @baseLineHeight. Birinjisi, şriftiň ululygynda ulanylýar, ikinjisi esasy çyzyk beýikligi.

Şol üýtgeýjileri we käbir matematikany, ähli görnüşlerimiziň çäklerini, paddinglerini we çyzyk beýikliklerini döretmek üçin ulanýarys.

Mysal üçin beden teksti

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auktor. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Üns bermek

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

Bellik:<b> HTML5- de ulanmaga arkaýyn <i>boluň, ýöne ulanylyşy birneme üýtgedi. esasan ses, tehniki adalgalar we ş.m. üçin <b>goşmaça ähmiýet bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir .<i>

Mysal salgylary

<address>Belligiň ulanylyşynyň iki mysaly :

Mysal gysgaltmalary

Gysgaltmalar baş harp bilen we aşaky nokat bilen açyk nokat bilen ýazylýar. Mundan başga-da, ulanyjylaryň aýlawda bir zadyň görkeziljekdigini görkezýän goşmaça görkezijileri bar.

Dilimlenen çörekden bäri HTML iň gowy zat.

Sypat sözüniň gysgaldylyşy attr .

Blokkot goşmak üçin , sitata hökmünde <blockquote>islendik HTML -i gurşap alyň. Göni sitatalar üçin a <p>.

<small>Çeşmäňizi görkezmek üçin goşmaça elementi goşuň we —stilleşdirmek maksady bilen öňünden çyzgy alarsyňyz.

<blockquote>
  <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Integer posuere ante venenatis-i ýok edýär. </p>
  <small> Meşhur biri </small>
</blockquote>

Bellenen bloknotlar şeýle görnüşde düzülendir:

“Lorem ipsum dolor” oturýar. Integer posuere ante venenatis-i ýok edýär.

Iş bedeninde meşhur biri

Blokotyňyzy sag tarapda ýüzmek üçin goşuň class="pull-right":

“Lorem ipsum dolor” oturýar. Integer posuere ante venenatis-i ýok edýär.

Iş bedeninde meşhur biri

Tertibi

<ul>

• Lorem ipsum dolor amet otur
• Consectetur adipiscing elit
• Massa-da bitewi molestie lorem
• Pretium nisl aliketinde ýeňilleşdirme
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat
• Faucibus porta lacus fringilla vel
• Ene oturylyşygy
• Porttitor loremini alyň

Düzedilmedik

<ul class="unstyled">

• Lorem ipsum dolor amet otur
• Consectetur adipiscing elit
• Massa-da bitewi molestie lorem
• Pretium nisl aliketinde ýeňilleşdirme
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat
• Faucibus porta lacus fringilla vel
• Ene oturylyşygy
• Porttitor loremini alyň

Sargyt edildi

<ol>

1. Lorem ipsum dolor amet otur
2. Consectetur adipiscing elit
3. Massa-da bitewi molestie lorem
4. Pretium nisl aliketinde ýeňilleşdirme
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Ene oturylyşygy
8. Porttitor loremini alyň

Düşündiriş

<dl>

Düşündiriş sanawlary

Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.

Euismod

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

Donec id elit metus-da mi porta gravida.

Malesuada porta

Etiam porta sem maleuada magna mollis euismod.

Inline

Koduň içerki böleklerini örtüň <code>.

Mysal üçin , <code> bölümi </ code > setir görnüşinde örtülmelidir .  

Esasy blok

<pre>Birnäçe setir kod üçin ulanyň . Dogry görkezilmegi üçin islendik kartetleri ýeke kodly nyşanlara öwüriň.

<p> Bu ýerde nusga nusgasy ... </p>

<pre>
  & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
</pre>

Bellik:<pre> Kodlary bellikleriň içinde mümkin boldugyça çepe ýakyn saklaň ; ähli bellikleri görkezer.

Google Prettify

Şol bir <pre>elementi alyň we güýçlendirilen görkeziş üçin iki sany goşmaça sapak goşuň.

<p> Bu ýerde nusga nusgasy ... </p>

<pre class = "prettyprint 
     ýorgan-düşek " >
  & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
</pre>

Google-code-prettify-i göçürip alyň we nädip ulanmalydygyny okaň.

<tablisa>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Tablisa okalmagyny üpjün etmek we gurluşy saklamak üçin awtomatiki usulda diňe birnäçe serhet bilen düzülýär. 2.0 bilen .tablesynp talap edilýär.

<table class = "table" > 
  …
</table>

Zebra zolaklaryny goşup, stollaryňyz bilen azajyk gyzyklanyň - .table-stripedsynpy goşuň.

Bellik: Çyzylan tablisalar :nth-childCSS saýlaýjysyny ulanýar we IE7-IE8-de ýok.

<table class = "table table-zolakly" > 
  …
</table>

Estetiki maksatlar üçin tutuş stoluň we tegelek burçlaryň araçäklerini goşuň.

<table class = "stol tablisasy bilen araçäk" > 
  …
</table>

.table-condensedStol öýjükleriniň örtügini ýarym (8px-den 4px-e çenli) kesmek üçin synp goşup, stollaryňyzy has ykjam ediň .

<table class = "stol stoly kondensirlenen" > 
  …
</table>

Bar bolan sapaklaryň islendik birini ulanyp, dürli görnüşlere ýetmek üçin stol synplarynyň islendigini birleşdirip bilersiňiz.

<table class = "stol stoly zolakly stol bilen araçäk stol " 
  ...
</table>

Çeýe HTML we CSS

“Bootstrap” -daky formalaryň iň gowy tarapy, bellikleriňizde nädip gursaňyzam, ähli girişleriňiz we dolandyryşlaryňyz ajaýyp görünýär. Artykmaç HTML talap edilmeýär, ýöne muny talap edýänler üçin nusgalary hödürleýäris.

Has çylşyrymly düzülişler aňsat düzmek we hadysany baglanyşdyrmak üçin anyk we ulaldylan sapaklar bilen gelýär, şonuň üçin her ädimde özüňizi gurşap alýarsyňyz.

Dört tertip düzüldi

“Bootstrap” forma görnüşleriniň dört görnüşini goldaýar:

• Dik (asyl)
• Gözlemek
• Inline
• Gorizontal

Dürli görnüş düzülişleri bellemek üçin käbir üýtgeşmeleri talap edýär, ýöne dolandyryşlaryň özi saklanýar we şol bir hereket edýär.

Dolandyryş ýagdaýlary we ş.m.

“Bootstrap” görnüşleri, giriş, tekstariýa we esasy garaşýan görnüşiňiz ýaly esasy forma dolandyryşlary üçin stilleri öz içine alýar. Alsoöne goşmaça we öňünden taýýarlanan girişler we bellik gutularynyň sanawlaryny goldamak ýaly birnäçe aýratyn komponentler bilen bilelikde gelýär.

Erroralňyşlyk, duýduryş we üstünlik ýaly döwletler forma gözegçiliginiň her görnüşi üçin girizilýär. Maýyp dolandyryşlar üçin stiller hem bar.

V2.0 bilen, forma stilleri üçin has ýeňil we has akylly defoltlarymyz bar. Goşmaça bellik ýok, diňe dolandyryş dolandyryşlaryny düzüň.

Adaty WebKit stillerini görkezmek, .form-searchgoşmaça tegelek gözleg meýdanlary üçin goşuň.

Girişler başlamak üçin blok derejesidir. Munuň üçin .form-inlinebolsa .form-horizontal, inline-blok ulanýarys.

Näme girýär

Çep tarapda görkezilýär, biziň goldaýan deslapky görnüş dolandyryşlarymyz. Ine, oklaryň sanawy:

• tekst girişleri (tekst, parol, e-poçta we ş.m.)
• bellik gutusy
• radio
• saýlaň
• köp saýlaň
• faýl giriş
• tekst

V2.0 bilen täze defoltlar

V1.4-e çenli, “Bootstrap” -yň deslapky görnüş görnüşleri keseligine ýerleşýärdi. “Bootstrap 2” bilen, islendik görnüş üçin has akylly, has ulaldylan defolt bolmagy üçin bu çäklendirmäni aýyrdyk.

Täze döredilen brauzer

“Bootstrap” brauzer tarapyndan goldanýan we disabledştatlar üçin stilleri görkezýär. Adaty Webkit-i aýyrýarys outlinewe box-shadowýerine ýerleşdirýäris :focus.

Forma tassyklamasy

Şeýle hem ýalňyşlyklar, duýduryşlar we üstünlik üçin tassyklama stillerini öz içine alýar. Ulanmak üçin daş-töweregiňize säwlik synpyny goşuň .control-group.

<meýdan meýdançasy
  class = "dolandyryş-topar ýalňyşlygy" >
  …
</fieldset>

Girişleri goşuň we goşuň

Giriş toparlary, goşulan ýa-da öňünden ýazylan tekst bilen, girişleriňiz üçin has köp mazmun bermegiň aňsat usulyny üpjün edýär. Ajaýyp mysallara Twitter ulanyjy atlary üçin @ belgisi ýa-da maliýe üçin $ girýär.

Bellikler we radiolar

V1.4-e çenli “Bootstrap” bellik gutularynyň we radiolaryň töwereginde goşmaça bellik talap edýär. <label class="checkbox">Indi, örtülen zady gaýtalamak ýönekeý bir mesele <input type="checkbox">.

Içerki bellikler we radiolar hem goldanýar. Diňe .inlinehaýsydyr birine goşuň .checkboxýa-da .radiogutardyňyz.

Formalary düzüň we goşuň / goşuň

Giriş görnüşlerini öňünden taýýarlamak ýa-da goşmak üçin , boş ýerleri goýman .add-on, inputşol bir setirde goýuň.

Kömek teksti

Forma girişleriňiz üçin kömek tekstini goşmak üçin giriş elementinden soň <span class="help-inline">kömek tekstini ýa-da kömek tekst blokyny goşuň.<p class="help-block">

Hereketler üçin düwmeler

Duşuşyk hökmünde düwmeler diňe hereketler üçin ulanylmaly, giperlinkler bolsa obýektler üçin ulanylmaly. Mysal üçin, "Downloadüklemek" düwmesi bolmaly, "soňky işjeňlik" baglanyşyk bolmaly.

Lagerler we formalar üçin

Düwmeleriň görnüşleri ulanylýan islendik zada .btnulanylyp bilner. <a>Şeýle-de bolsa, adatça bulary diňe we <button>elementlere ulanmak islärsiňiz .

Bellik: düwmeleriň hemmesi .btnsynpy öz içine almalydyr. <button>Düwmeleriň stilleri we <a>yzygiderlilik üçin elementler ulanylmaly .

Birnäçe ululyk

Uly ýa-da kiçi düwmeler barmy? Bol!

Esasy hereket Hereket

Esasy hereket Hereket

Maýyp ýagdaý

Öçürilen düwmeler .btn-disabledüçin baglanyşyklar we elementler :disabledüçin ulanyň.<button>

Esasy hereket Hereket

Esasy hereket Hereket

Brauzeriň gabat gelmegi

IE9-da, gradienti ähli düwmelere tegelek burçlaryň peýdasyna goýýarys, sebäbi IE9 fon gradiýentlerini burçlara kesmeýär.

Baglanyşyk bilen, IE9 ýapyk buttontekst kölegesi bilen çal reňkli teksti maýyp elementlere degişýär, gynansakda muny düzedip bilmeris.

Sprite hökmünde gurlupdyr

Her nyşany goşmaça haýyş etmegiň ýerine, olary sprite - şekilleri ýerleşdirmek üçin CSS ulanýan bir faýlda bir topar şekil düzdük background-position. Bu, Twitter.com-da ulanýan usulymyz we bu biziň üçin gowy işledi.

Ichli nyşanlaryň synplary, .icon-beýleki komponentlerimiz ýaly, dogry at goýmak we gözlemek üçin prefiks edilýär. Bu beýleki gurallar bilen gapma-garşylyklaryň öňüni almaga kömek eder.

Glifikonlar , bu ýerde resminamalarda baglanyşyk we karz berýänçäk, açyk çeşmeli gurallar toplumymyzda goýlan “Halflings” -i ulanmaga rugsat berdi. Taslamalaryňyzda hem şeýle etmegi göz öňünde tutmagyňyzy haýyş edýäris.

Nähili ulanmak

<i>V2.0.0 bilen, ähli nyşanlarymyz üçin bellik ulanmagy makul bildik , ýöne olaryň hiç hili synpy ýok - diňe umumy prefiks. Ulanmak üçin aşakdaky kody islendik ýere ýerleşdiriň:

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

Bir goşmaça synp bilen taýýarlanan ters (ak) nyşanlaryň görnüşleri hem bar:

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

Nyşanlaryňyz üçin saýlamak üçin 120 synp bar. Diňe <i>dogry synplar bilen bellik goşuň we düzüldiňiz. Doly sanawy sprites.less ýa-da şu resminamada tapyp bilersiňiz.

Kazyýetleri ulanyň

Nyşanlar ajaýyp, ýöne olary nirede ulanar? Ine birnäçe pikir:

• Gapdal nawigasiýa üçin wizual hökmünde
• Diňe nyşan bilen dolandyrylýan nawigasiýa üçin
• Hereketiň manysyny bermek üçin düwmeler üçin
• Ulanyjynyň barjak ýerinde kontekst paýlaşmak üçin baglanyşyklar bilen

Aslynda, <i>bellik goýup boljak islendik ýerde nyşan goýup bilersiňiz.

Täzele Çykyş Öçür

Düşündiriş Sazlamalar Has giňişleýin maglumat