Tipogrāfiskais mērogs

Visa tipogrāfiskā režģa pamatā ir divi mainīgie mazāk mūsu failā mainīgie.less: @baseFontSizeun @baseLineHeight. Pirmais ir visā izmantotais pamata fonta lielums, bet otrais ir bāzes līnijas augstums.

Mēs izmantojam šos mainīgos lielumus un daļu matemātikas, lai izveidotu visu veidu piemales, polsterējumus un līniju augstumus un citus.

Pamatteksta piemērs

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.

Izmantojot uzsvaru

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.

Piezīme. Jūtieties brīvi izmantot <b>un <i>HTML5, taču to lietojums ir nedaudz mainījies. <b>ir paredzēts, lai izceltu vārdus vai frāzes, nepiešķirot papildu nozīmi, bet <i>galvenokārt balss, tehniskie termini utt.

Adrešu piemēri

Šeit ir divi piemēri, kā <address>var izmantot tagu.

Saīsinājumu piemēri

Saīsinājumi ir veidoti ar lielajiem burtiem un gaiši punktētu apakšējo apmali. Tiem ir arī palīdzības kursors, kas atrodas virs kursora, lai lietotājiem būtu papildu norāde, ka kaut kas tiks rādīts, virzot kursoru.

HTML ir labākā lieta kopš sagrieztas maizes.

Vārda atribūts saīsinājums ir attr .

Lai iekļautu citātu, aptiniet <blockquote>jebkuru HTML kā citātu. Tiešām pēdiņām mēs iesakām <p>.

Iekļaujiet neobligātu <small>elementu, lai norādītu savu avotu, un pirms tā tiks parādīta defise —stila nolūkos.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis. </p>
  <small> Kāds slavens </small>
</blockquote>

Noklusējuma pēdiņas tiek veidotas šādi:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis.

Kāds slavens darbā Body of work

Lai pārvietotu citātu pa labi, pievienojiet class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis.

Kāds slavens darbā Body of work

Nesakārtots

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem un massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat plkst
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Bez stila

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem un massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat plkst
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Pasūtīts

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem un massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Apraksts

<dl>

Aprakstu saraksti

Aprakstu saraksts ir lieliski piemērots terminu definēšanai.

Euismod

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

Donec id elit non mi porta gravida un eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Rindā

Aptiniet iekļautos koda fragmentus ar <code>.

Piemēram , sadaļai < code> sadaļa </ code > ir jāietver kā iekļauta .  

Pamata bloks

Izmantojiet <pre>vairākām koda rindām. Pareizai atveidošanai noteikti pārvērtiet visas carets to unikoda rakstzīmēs.

<p>Teksta paraugs šeit...</p>

<iepriekš>
  <p>Teksta paraugs šeit...</p>
</pre>

Piezīme. Noteikti glabājiet kodu <pre>tagos pēc iespējas tuvāk pa kreisi. tas atveidos visas cilnes.

Google Prettify

Paņemiet to pašu <pre>elementu un pievienojiet divas izvēles klases uzlabotai renderēšanai.

<p> Teksta paraugs šeit... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Teksta paraugs šeit...</p>
</pre>

Lejupielādējiet google-code-prettify un skatiet readme, lai uzzinātu, kā to izmantot.

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

Tabulas tiek automātiski veidotas tikai ar dažām apmalēm, lai nodrošinātu lasāmību un saglabātu struktūru. Ar 2.0 .tableklase ir nepieciešama.

<tabula klase = "tabula" > 
  …
</table>

Izbaudiet savus galdus, pievienojot zebras joslas — vienkārši pievienojiet .table-stripedklasi.

Piezīme. Sprited tabulās tiek izmantots :nth-childCSS atlasītājs, un tas nav pieejams IE7-IE8.

<table class = "tabula svītraina" > 
  …
</table>

Estētikas nolūkos pievienojiet apmales ap visu galdu un noapaļotus stūrus.

<table class = "tabula ar tabulas robežām" > 
  …
</table>

Padariet tabulas kompaktākas, pievienojot .table-condensedklasi, lai tabulas šūnu polsterējumu samazinātu uz pusēm (no 8 pikseļiem līdz 4 pikseļiem).

<table class = "tabula saīsināta tabula" > 
  …
</table>

Jūtieties brīvi apvienot jebkuru no tabulas klasēm, lai iegūtu atšķirīgu izskatu, izmantojot jebkuru no pieejamajām klasēm.

<table class = "tabula-svītrota tabula-bordered table-condensed" > 
  ...
</table>

Elastīgs HTML un CSS

Labākā daļa no Bootstrap veidlapām ir tā, ka visas jūsu ievades un vadīklas izskatās lieliski neatkarīgi no tā, kā tās veidojat savā iezīmēšanā. Nav nepieciešams lieks HTML, taču mēs nodrošinām modeļus tiem, kam tas nepieciešams.

Sarežģītākos izkārtojumos ir iekļautas kodolīgas un mērogojamas klases, kas nodrošina vieglu stilu un notikumu iesiešanu, lai jūs būtu nodrošināts ik uz soļa.

Iekļauti četri izkārtojumi

Bootstrap nodrošina četru veidu veidlapu izkārtojumu atbalstu:

• Vertikāls (noklusējums)
• Meklēt
• Rindā
• Horizontāli

Dažādu veidu veidlapu izkārtojumiem ir nepieciešamas dažas izmaiņas iezīmēšanā, taču pašas vadīklas paliek un darbojas tāpat.

Kontroles stāvokļi un vairāk

Bootstrap veidlapas ietver stilus visām pamata veidlapu vadīklām, piemēram, ievadei, teksta apgabalam un atlasei. Bet tajā ir arī vairāki pielāgoti komponenti, piemēram, pievienotas un pievienotas ievades, kā arī izvēles rūtiņu sarakstu atbalsts.

Katram veidlapas vadīkla veidam ir iekļauti tādi stāvokļi kā kļūda, brīdinājums un panākumi. Iekļauti arī stili invalīdām vadīklām.

Izmantojot v2.0, mums ir vieglāki un viedāki veidlapu stilu noklusējuma iestatījumi. Bez papildu marķējuma, tikai veidlapas vadīklas.

Atspoguļojot noklusējuma WebKit stilus, vienkārši pievienojiet .form-search, lai meklēšanas lauki būtu īpaši noapaļoti.

Lai sāktu, ievades ir bloka līmenī. For .form-inlineun .form-horizontal, mēs izmantojam inline-block.

Kas ir iekļauts

Kreisajā pusē ir parādītas visas mūsu atbalstītās noklusējuma veidlapas vadīklas. Šeit ir saraksts ar aizzīmēm:

• teksta ievade (teksts, parole, e-pasts utt.)
• izvēles rūtiņa
• radio
• izvēlieties
• vairākas atlases
• faila ievade
• teksta apgabals

Jauni noklusējuma iestatījumi ar v2.0

Līdz pat v1.4 Bootstrap noklusējuma veidlapu stili izmantoja horizontālo izkārtojumu. Izmantojot Bootstrap 2, mēs noņēmām šo ierobežojumu, lai jebkurai veidlapai būtu viedāki, mērogojamāki noklusējuma iestatījumi.

Pārstrādāti pārlūkprogrammas stāvokļi

Bootstrap piedāvā stilus pārlūkprogrammas atbalstītajiem fokusētajiem un disabledstāvokļiem. Mēs noņemam noklusējuma tīmekļa komplektu outlineun lietojam box-shadowtā vietā :focus.

Veidlapas apstiprināšana

Tas ietver arī kļūdu, brīdinājumu un panākumu validācijas stilus. Lai izmantotu, pievienojiet kļūdas klasi apkārtējai .control-group.

<fieldset
  class = "kontrolgrupas kļūda" >
  …
</fieldset>

Pirms un pievienot ievades

Ievades grupas — ar pievienotu vai priekšā pievienotu tekstu — nodrošina vienkāršu veidu, kā ievadīt ievadei plašāku kontekstu. Lieliski piemēri ir @ zīme Twitter lietotājvārdiem vai $ finansēm.

Izvēles rūtiņas un radio

Līdz pat versijai 1.4, Bootstrap bija nepieciešams papildu marķējums ap izvēles rūtiņām un radio, lai tās sakārtotu. Tagad ir vienkārši atkārtot to <label class="checkbox">, kas ieskauj <input type="checkbox">.

Tiek atbalstītas arī iekļautās izvēles rūtiņas un radio. Vienkārši pievienojiet .inlinejebkuram .checkboxvai .radioun esat pabeidzis.

Iekļauts veidlapas un pievienot/priekšpievienot

Lai izmantotu ievades ievades vai pievienošanas ievadi iekļautā formā, noteikti ievietojiet .add-onun inputtajā pašā rindā, bez atstarpēm.

Veidlapas palīdzības teksts

Lai pievienotu palīdzības tekstu veidlapas ievadei, iekļaujiet iekļauto palīdzības tekstu ar ievades elementu <span class="help-inline">vai palīdzības teksta bloku ar to.<p class="help-block">

Pogas darbībām

Parasti pogas ir jāizmanto tikai darbībām, savukārt hipersaites ir jāizmanto objektiem. Piemēram, “Lejupielādēt” ir jābūt pogai, bet “nesenajai darbībai” jābūt saitei.

Enkuriem un formām

Pogu stilus var lietot jebko, izmantojot .btnlietoto. Tomēr parasti vēlaties tos lietot tikai <a>un <button>elementiem.

Piezīme. Visām pogām jāiekļauj .btnklase. Lai nodrošinātu konsekvenci , ir jāpiemēro pogu stili <button>un elementi.<a>

Vairāki izmēri

Vai vēlaties lielākas vai mazākas pogas? Izdari to!

Primārā darbība Darbība

Primārā darbība Darbība

Atspējots stāvoklis

Atspējotām pogām izmantojiet .btn-disabledsaitēm un :disabledelementiem <button>.

Primārā darbība Darbība

Primārā darbība Darbība

Saderība starp pārlūkprogrammām

Operētājsistēmā IE9 mēs nolaižam gradientu uz visām pogām par labu noapaļotiem stūriem, jo ​​IE9 neapgriež fona gradientus līdz stūriem.

Saistīts ar to, ka IE9 izjauc atspējotos buttonelementus, padarot tekstu pelēku ar nepatīkamu teksta ēnu — diemžēl mēs to nevaram novērst.

Būvēts kā spraits

Tā vietā, lai katru ikonu padarītu par papildu pieprasījumu, mēs esam tās apkopojuši spraitā — attēlu kopumā vienā failā, kas izmanto CSS, lai attēlus novietotu ar background-position. Šī ir tā pati metode, ko mēs izmantojam vietnē Twitter.com, un tā mums ir labi palīdzējusi.

Visām ikonu klasēm ir pievienots prefikss, .icon-lai nodrošinātu pareizu nosaukumu atstarpes un darbības jomu, līdzīgi kā citiem mūsu komponentiem. Tas palīdzēs izvairīties no konfliktiem ar citiem rīkiem.

Glyphicons ir atļāvis mums izmantot mūsu atvērtā koda rīkkopā esošo Halflings komplektu, ja vien mēs nodrošinām saiti un kredītu šeit, dokumentos. Lūdzu, apsveriet iespēju darīt to pašu savos projektos.

Kā izmantot

Izmantojot v2.0.0, mēs esam izvēlējušies izmantot <i>tagu visām mūsu ikonām, taču tām nav reģistra klases — tikai koplietots prefikss. Lai izmantotu, ievietojiet šo kodu gandrīz jebkurā vietā:

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

Ir pieejami arī stili apgrieztām (baltām) ikonām, kas sagatavotas ar vienu papildu klasi:

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

Ir pieejamas 120 klases, no kurām izvēlēties ikonas. Vienkārši pievienojiet <i>tagu ar pareizajām klasēm, un esat gatavs. Pilnu sarakstu varat atrast vietnē sprites.less vai šeit, šajā dokumentā.

Lietošanas gadījumi

Ikonas ir lieliskas, bet kur tās izmantot? Šeit ir dažas idejas:

• Kā vizuālie materiāli sānjoslas navigācijai
• Tīri uz ikonām balstītai navigācijai
• Pogām, kas palīdz nodot darbības nozīmi
• Ar saitēm, lai kopīgotu lietotāja galamērķa kontekstu

Būtībā visur, kur varat ievietot <i>atzīmi, varat ievietot ikonu.

atjaunot Izrakstīšanās Dzēst

komentēt Iestatījumi Vairāk informācijas