Be pastolių, pagrindiniai HTML elementai yra stilizuoti ir patobulinti išplečiamomis klasėmis, kad būtų suteikta nauja, nuosekli išvaizda ir pojūtis.
Visas tipografinis tinklelis yra pagrįstas dviem Less kintamaisiais mūsų kintamieji.less faile: @baseFontSizeir @baseLineHeight. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis.
Naudojame tuos kintamuosius ir šiek tiek matematikos, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau.
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.
Išryškinkite pastraipą pridėdami .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Elementas | Naudojimas | Neprivaloma |
|---|---|---|
<strong> |
Už teksto fragmento pabrėžimą su svarbiu | Nė vienas |
<em> |
Už teksto fragmento pabrėžimą su kirčiavimu | Nė vienas |
<abbr> |
Apvynioja santrumpas ir akronimus, kad būtų rodoma išplėstinė versija užvedus pelės žymeklį | Įtraukite pasirenkamą .initialismklasę didžiųjų raidžių santrumpos. |
<address> |
Dėl artimiausio protėvio kontaktinės informacijos arba viso darbo | Išsaugokite formatavimą užbaigdami visas eilutes<br> |
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.
Pastaba: nedvejodami naudokite <b>ir <i>HTML5, tačiau jų naudojimas šiek tiek pasikeitė. <b>skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>dažniausiai skirtas balsui, techniniams terminams ir pan.
Pateikiame du pavyzdžius, kaip <address>galima naudoti žymą:
Santrumpos su titleatributu turi šviesiai punktyruotą apatinę kraštinę ir pagalbos žymeklį užvedus pelės žymeklį. Tai suteikia naudotojams papildomos informacijos, kad kažkas bus rodoma užvedus pelės žymeklį.
Pridėkite initialismklasę prie santrumpos, kad padidintumėte tipografijos harmoniją, suteikdami jai šiek tiek mažesnį teksto dydį.
HTML yra geriausias dalykas nuo pjaustytos duonos.
Žodžio atributas santrumpa yra attr .
| Elementas | Naudojimas | Neprivaloma |
|---|---|---|
<blockquote> |
Bloko lygio elementas, skirtas turiniui cituoti iš kito šaltinio | Pridėkite .pull-leftir .pull-rightklasės plaukiojančioms parinktims |
<small> |
Pasirenkamas elementas, skirtas pridėti naudotojui skirtą citatą, paprastai autorių su kūrinio pavadinimu | Padėkite <cite>aplink pavadinimą arba šaltinio pavadinimą |
Norėdami įtraukti blokinę citatą, apvyniokite <blockquote>bet kurį HTML kaip citatą. Tiesioms citatoms rekomenduojame <p>.
Įtraukite pasirenkamą <small>elementą, kad nurodytumėte šaltinį, ir prieš jį gausite brūkšnelį —stiliaus tikslais.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante venenatis. </p>
- <small> Kažkas žinomas </small>
- </blockquote>
Numatytosios blokinės kabutės formuojamos taip:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante venenatis.
Kažkas, žinomas „ Darbo kūne“.
Norėdami perkelti savo bloko citatą į dešinę, pridėkite class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante venenatis.
Kažkas, žinomas „ Darbo kūne“.
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Galvas aukštyn! Horizontaliuose aprašų sąrašuose bus sutrumpinti terminai, kurie yra per ilgi, kad tilptų kairiajame stulpelyje text-overflow. Siauresnėse peržiūros srityse jie pasikeis į numatytąjį sudėtinį išdėstymą.
Įterptuosius kodo fragmentus apvyniokite <code>.
- Pavyzdžiui , <code> sekcija < / code > turėtų būti įterpta į eilutę .
Naudokite <pre>kelioms kodo eilutėms. Kad būtų galima tinkamai atvaizduoti, kode būtinai pašalinkite kampinius skliaustus.
<p>Teksto pavyzdys čia...</p>
- <prieš>
- <p>Teksto pavyzdys čia...</p>
- </pre>
Pastaba: kodą būtinai palikite <pre>žymose kuo arčiau kairės; jis parodys visus skirtukus.
Pasirinktinai galite pridėti .pre-scrollableklasę, kuri nustatys maksimalų 350 pikselių aukštį ir pateiks y ašies slinkties juostą.
Paimkite tą patį <pre>elementą ir pridėkite dvi pasirenkamas klases, kad pagerintumėte atvaizdavimą.
- <p> Teksto pavyzdys čia... </p>
- <pre class = "gražus atspaudas
- linenums" >
- <p>Teksto pavyzdys čia...</p>
- </pre>
Atsisiųskite „google-code-prettify“ ir peržiūrėkite „readme“, kaip naudoti.
| Žyma | apibūdinimas |
|---|---|
<table> |
Apvyniojimo elementas duomenims rodyti lentelės formatu |
<thead> |
Sudėtinio rodinio elementas lentelės antraštės eilutėms ( <tr>), skirtas lentelės stulpeliams pažymėti |
<tbody> |
Sudėtinio rodinio elementas lentelės eilutėms ( <tr>) lentelės turinyje |
<tr> |
Sudėtinio rodinio elementas lentelės langelių rinkiniui ( <td>arba <th>), kuris rodomas vienoje eilutėje |
<td> |
Numatytasis lentelės langelis |
<th> |
Specialus lentelės langelis stulpelio (arba eilutės, atsižvelgiant į taikymo sritį ir vietą) etiketėms Turi būti naudojamas a <thead> |
<caption> |
Lentelėje esančios informacijos aprašymas arba santrauka, ypač naudinga ekrano skaitytuvams |
- <lentelė>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| vardas | Klasė | apibūdinimas |
|---|---|---|
| Numatytas | Nė vienas | Jokių stilių, tik stulpeliai ir eilutės |
| Pagrindinis | .table |
Tik horizontalios linijos tarp eilučių |
| Apribota | .table-bordered |
Suapvalina kampus ir prideda išorinį kraštą |
| Zebra-juosta | .table-striped |
Prideda šviesiai pilką fono spalvą į nelygines eilutes (1, 3, 5 ir tt) |
| Sutirštintas | .table-condensed |
Vertikalus užpildas perpjaunamas per pusę, nuo 8 iki 4 pikselių, visuose tdir thelementuose |
Lentelės automatiškai formuojamos tik keliomis kraštinėmis, kad būtų užtikrintas skaitomumas ir išlaikyta struktūra. Naudojant 2.0, .tableklasė yra būtina.
- <lentelės klasė = "lentelė" >
- …
- </table>
| # | Pirmas vardas | Pavardė | Vartotojo vardas |
|---|---|---|---|
| 1 | ženklas | Otto | @mdo |
| 2 | Jokūbas | Torntonas | @riebus |
| 3 | Laris | paukštis |
Pamėginkite savo stalus pridėję zebrų juosteles – tiesiog pridėkite .table-stripedklasę.
Pastaba: dryžuotose lentelėse naudojamas :nth-childCSS parinkiklis ir jis nepasiekiamas IE7-IE8.
- <table class = "stalo lentelė dryžuota" >
- …
- </table>
| # | Pirmas vardas | Pavardė | Vartotojo vardas |
|---|---|---|---|
| 1 | ženklas | Otto | @mdo |
| 2 | Jokūbas | Torntonas | @riebus |
| 3 | Laris | paukštis |
Estetiniais tikslais pridėkite rėmelius aplink visą stalą ir užapvalintus kampus.
- <table class = "lentelė su lentelės kraštais" >
- …
- </table>
| # | Pirmas vardas | Pavardė | Vartotojo vardas |
|---|---|---|---|
| 1 | ženklas | Otto | @mdo |
| ženklas | Otto | @getbootstrap | |
| 2 | Jokūbas | Torntonas | @riebus |
| 3 | Laris Paukštis | ||
Padarykite savo lenteles kompaktiškesnes pridėdami .table-condensedklasę, kad lentelės langelių užpildymas būtų sumažintas per pusę (nuo 8 iki 4 pikselių).
- <table class = "sutraukta lentelė" >
- …
- </table>
| # | Pirmas vardas | Pavardė | Vartotojo vardas |
|---|---|---|---|
| 1 | ženklas | Otto | @mdo |
| 2 | Jokūbas | Torntonas | @riebus |
| 3 | Laris Paukštis | ||
Nesivaržykite derinti bet kurią iš lentelės klasių, kad gautumėte skirtingą išvaizdą, naudodami bet kurią iš galimų klasių.
- <table class = "stalo lentelės juostelėmis lentelės su apvadu lentelės sutrumpintas" >
- ...
- </table>
| Pilnas vardas | |||
|---|---|---|---|
| # | Pirmas vardas | Pavardė | Vartotojo vardas |
| 1 | ženklas | Otto | @mdo |
| 2 | Jokūbas | Torntonas | @riebus |
| 3 | Laris Paukštis | ||
Geriausia „Bootstrap“ formų dalis yra ta, kad visi jūsų įvesties elementai ir valdikliai atrodo puikiai, nesvarbu, kaip juos kuriate savo žymėjime. Perteklinio HTML nereikia, tačiau pateikiame šablonus tiems, kuriems jo reikia.
Sudėtingesni maketai pateikiami su glaustomis ir keičiamo mastelio klasėmis, kad būtų lengva formuoti ir susieti įvykius, todėl esate aprėpti kiekviename žingsnyje.
„Bootstrap“ palaiko keturių tipų formų išdėstymus:
Įvairių tipų formų išdėstymams reikia šiek tiek pakeisti žymėjimą, tačiau patys valdikliai išlieka ir veikia taip pat.
„Bootstrap“ formose yra visų pagrindinių formų valdiklių, pvz., įvesties, tekstinės srities ir pasirinkimo, kurių tikitės, stiliai. Tačiau jame taip pat yra keletas pasirinktinių komponentų, pvz., pridėtų ir pridėtų įvesčių bei žymimųjų laukelių sąrašų palaikymas.
Tokios būsenos kaip klaida, įspėjimas ir sėkmė yra įtrauktos į kiekvieną formos valdymo tipą. Taip pat yra neįgaliesiems skirtų valdiklių stiliai.
„Bootstrap“ suteikia paprastą žymėjimą ir stilius keturiems įprastų žiniatinklio formų stiliams.
| vardas | Klasė | apibūdinimas |
|---|---|---|
| Vertikalus (numatytasis) | .form-vertical (nebūtina) |
Sukrautos, kairėje sulygiuotos etiketės virš valdiklių |
| Inline | .form-inline |
Kairėje sulygiuotos etiketės ir eilutinio bloko valdikliai kompaktiškam stiliui |
| Paieška | .form-search |
Ypatingai suapvalinta teksto įvestis, užtikrinanti tipišką paieškos estetiką |
| Horizontalus | .form-horizontal |
Paslinkite į kairę, dešinėje sulygiuotas etiketes toje pačioje eilutėje kaip ir valdikliai |
Išmanūs ir lengvi numatytieji nustatymai be papildomo žymėjimo.
- <form class = "gerai" >
- <label> Etiketės pavadinimas </label>
- <input type = "text" class = "span3" placeholder = "Įveskite ką nors..." >
- <span class = "help-block" > Čia yra bloko lygio pagalbos teksto pavyzdys. </span>
- <label class = "žymės langelis" >
- <input type = "checkbox" > Patikrinkite mane
- </label>
- <button type = "submit" class = "btn" > Pateikti </button>
- </form>
Pridėti .form-searchprie formos ir .search-queryprie input.
- <form class = "šulinės formos paieška" >
- <input type = "text" class = "įvesties terpės paieškos užklausa" >
- <button type = "submit" class = "btn" > Ieškoti </button>
- </form>
Pridėkite .form-inlinevertikalų formų valdiklių lygiavimą ir tarpus, kad būtų patobulintas.
- <form class = "gerai forma-inline" >
- <input type = "text" class = "input-small" placeholder = "El. paštas" >
- <input type = "slaptažodis" class = "input-small" placeholder = "Slaptažodis" >
- <label class = "žymės langelis" >
- <input type = "checkbox" > Prisiminti mane
- </label>
- <button type = "submit" class = "btn" > Prisijungti </button>
- </form>
Dešinėje rodomi visi numatytieji formų valdikliai, kuriuos palaikome. Štai sąrašas su ženkleliais:
Atsižvelgiant į aukščiau pateiktą formos išdėstymo pavyzdį, čia yra žymėjimas, susietas su pirmąja įvesties ir valdymo grupe. , .control-group, .control-labelir .controlsklasės yra būtinos kuriant stilių.
- <form class = "horizontali forma" >
- <laukų rinkinys>
- <legend> Legendos tekstas </legend>
- <div class = "kontrolinė grupė" >
- <label class = "control-label" for = "input01" > Teksto įvestis </label>
- <div class = "valdikliai" >
- <įvesties tipas = "tekstas" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Pagalbinis pagalbos tekstas </p>
- </div>
- </div>
- </fieldset>
- </form>
„Bootstrap“ turi naršyklės palaikomų fokusavimo ir disabledbūsenų stilius. Pašaliname numatytąjį žiniatinklio rinkinį outlineir box-shadowvietoj jo pritaikome :focus.
Tai taip pat apima klaidų, įspėjimų ir sėkmės patvirtinimo stilius. Norėdami naudoti, pridėkite klaidos klasę prie aplinkinių .control-group.
- <laukų rinkinys
- class = "kontrolės grupės klaida" >
- …
- </fieldset>
Įvesties grupės su pridėtu arba pridėtu tekstu yra paprastas būdas suteikti daugiau konteksto įvestims. Puikūs pavyzdžiai yra @ ženklas, skirtas Twitter naudotojų vardams arba $ finansams.
Iki 1.4 versijos „Bootstrap“ reikėjo papildomai pažymėti žymimuosius laukelius ir radijo imtuvus, kad juos būtų galima sudėti. Dabar belieka pakartoti tai <label class="checkbox">, kas apvynioja <input type="checkbox">.
Taip pat palaikomi žymimieji langeliai ir radijo imtuvai. Tiesiog pridėkite .inlineprie bet kurio .checkboxarba .radioir viskas.
Norėdami naudoti įvesties priedą arba pridėti įvestį įterptoje formoje, būtinai įdėkite .add-onir inputtoje pačioje eilutėje be tarpų.
Norėdami pridėti pagalbos tekstą savo formos įvestims, įtraukite įterptinį pagalbos tekstą su įvesties elementu <span class="help-inline">arba pagalbos teksto bloką su po jo.<p class="help-block">
Užuot padarę kiekvieną piktogramą kaip papildomą užklausą, sudarėme jas į sprite – vaizdų krūvą viename faile, kuriame vaizdams nustatyti naudojamas CSS background-position. Tai yra tas pats metodas, kurį naudojame Twitter.com ir jis mums puikiai pasiteisino.
Visose piktogramų klasėse yra priešdėlis, .icon-skirtas tinkamam vardų tarpui ir taikymo sričiai, panašiai kaip ir kiti mūsų komponentai. Tai padės išvengti konfliktų su kitomis priemonėmis.
„ Glyphicons “ suteikė mums galimybę naudotis „Halflings“ rinkiniu mūsų atvirojo kodo įrankių rinkinyje, jei dokumentuose pateikiame nuorodą ir kreditą. Apsvarstykite galimybę tai padaryti savo projektuose.
„Bootstrap“ naudoja <i>žymą visoms piktogramoms, tačiau jos neturi raidžių klasės – tik bendrinamas priešdėlis. Norėdami naudoti, įdėkite šį kodą beveik bet kur:
- <i class = "piktogramų paieška" ></i>
Taip pat yra apverstų (baltų) piktogramų stilių, paruoštų naudojant vieną papildomą klasę:
- <i class = "piktograma-paieškos piktograma-balta" ></i>
Galite pasirinkti iš 140 piktogramų klasių. Tiesiog pridėkite <i>žymą su tinkamomis klasėmis ir viskas. Visą sąrašą galite rasti sprites.less arba čia pat šiame dokumente.
Galvas aukštyn! Kai naudojate šalia teksto eilučių, pvz., mygtukų ar naršymo nuorodų, po <i>žymos palikite tarpą, kad būtų tinkami tarpai.
Piktogramos yra puikios, bet kur jas panaudoti? Štai keletas idėjų:
Iš esmės visur, kur galite įdėti <i>žymą, galite įdėti piktogramą.
Naudokite juos mygtukuose, mygtukų grupėse įrankių juostai, naršymui arba pridėtoms formoms.