Bootstrap

Tellingud

Bootstrap on üles ehitatud tundlikule 12-veerulisele ruudustikule. Oleme lisanud ka sellel süsteemil põhinevad fikseeritud ja vedela laiusega paigutused.

Globaalsed stiilid CSS-i lähtestamiseks, tüpograafiaks ja linkimiseks

Nõuab HTML5 doctype'i

Bootstrap kasutab HTML-i elemente ja CSS-i atribuute, mis nõuavad HTML5 doctype'i kasutamist. Lisage see kindlasti oma projekti iga Bootstrapped lehe algusesse.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tüpograafia ja lingid

Failis scaffolding.less määrame põhilised globaalsed kuvamis-, tüpograafia- ja linkistiilid. Täpsemalt, me:

  • Eemaldage keha ääres
  • Seadke background-color: white;pealebody
  • Kasutage meie tüpograafilise alusena atribuute @baseFontFamily, @baseFontSizeja@baseLineHeight
  • Määrake globaalse lingi värv läbi @linkColorja rakendage ainult lingi allakriipsutusi:hover

Lähtestage Normaliseerimise kaudu

Alates versioonist Bootstrap 2 on traditsiooniline CSS-i lähtestamine arenenud nii, et see kasutab Nicolas Gallagheri projekti Normalize.css elemente, mis toidab ka HTML5 Boilerplate'i .

Uue lähtestamise leiate endiselt failist reset.less , kuid paljud elemendid on lühiduse ja täpsuse huvides eemaldatud.

Vaikimisi ruudustikusüsteem 12 tundliku keerdusega veergu

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Bootstrapis pakutav vaikevõrgusüsteem kasutab 12 veergu , mis renderdatakse laiusega 724 pikslit, 940 pikslit (vaikimisi ilma reageeriva CSS-ita) ja 1170 pikslit. 767 piksli vaateavade all muutuvad veerud sujuvaks ja kuhjuvad vertikaalselt.

  1. <div class = "rida" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Nagu siin näidatud, saab põhipaigutuse luua kahe "veeruga", millest igaüks hõlmab mitut 12 põhiveeru, mille me määratlesime oma ruudustikusüsteemi osana.


Veergude tasaarvestamine

4
4 nihe 4
3 nihe 3
3 nihe 3
8 nihe 4 
  1. <div class = "rida" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Pesastusveerud

Bootstrapi staatilise (mittevedeliku) võrgusüsteemiga on pesastamine lihtne. Sisu pesastamiseks lisage lihtsalt olemasolevasse veergu uus veergude .rowkomplekt ..span*.span*

Näide

Pesastatud read peaksid sisaldama veergude komplekti, mis annavad kokku selle ülemveergude arvu. Näiteks kaks pesastatud .span3veergu tuleks paigutada veergu .span6.

Veeru 1. tase
2. tase
2. tase 
  1. <div class = "rida" > 
  2.   <div class = "span6" > 
  3.     1. taseme veerg
  4.     <div class = "rida" > 
  5.       <div class = "span3" > 2. tase </div> 
  6.       <div class = "span3" > 2. tase </div> 
  7.     </div>
  8.   </div>
  9. </div>

Vedeliku ruudustiku süsteem 12 reageerivat protsendipõhist veergu

Vedelikukolonnid

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Protsendid, mitte pikslid

Vedeliku ruudustiku süsteem kasutab veergude laiuste jaoks protsente fikseeritud pikslite asemel. Sellel on ka samad reageerivad variatsioonid kui meie fikseeritud ruudustikusüsteemil, tagades peamiste ekraanieraldusvõimete ja seadmete õiged proportsioonid.

Vedeliku read

Muutke mis tahes rida vedelaks, muutes lihtsalt .rowväärtuseks .row-fluid. Veerud jäävad täpselt samaks, mistõttu on fikseeritud ja sujuva paigutuse vahel vahetamine ülimalt lihtne.

Märgistus

  1. <div class = "reavedelik" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Vedeliku pesitsemine

Sujuva ruudustikuga pesastamine on veidi erinev: pesastatud veergude arv ei pea vastama vanemale. Selle asemel lähtestatakse teie veerud igal tasemel, kuna iga rida võtab enda alla 100% emaveerust.

Vedelik 12
Vedelik 6
Vedelik 6 
  1. <div class = "reavedelik" > 
  2.   <div class = "span12" > 
  3.     Veeru 1. tase
  4.     <div class = "reavedelik" > 
  5.       <div class = "span6" > 2. tase </div> 
  6.       <div class = "span6" > 2. tase </div> 
  7.     </div>
  8.   </div>
  9. </div>

Võrgu kohandamine

Muutuv Vaikeväärtus Kirjeldus
@gridColumns 12 Veergude arv
@gridColumnWidth 60 pikslit Iga veeru laius
@gridGutterWidth 20 pikslit Negatiivne ruum veergude vahel

Muutujad VÄHEM

Bootstrapi on sisse ehitatud käputäis muutujaid 940 piksli vaikevõrgusüsteemi kohandamiseks, mis on dokumenteeritud ülal. Kõik ruudustiku muutujad salvestatakse muutujatesse.vähem.

Kuidas kohandada

Ruudustiku muutmine tähendab kolme @grid*muutuja muutmist ja Bootstrapi uuesti kompileerimist. Muutke ruudustiku muutujaid failis variables.less ja kasutage ümberkompileerimiseks ühte neljast dokumenteeritud viisist . Kui lisate rohkem veerge, lisage kindlasti grid.less veergude CSS.

Vastuvõtlikuks jäämine

Ruudustiku kohandamine töötab ainult vaiketasemel, 940 piksli ruudustikul. Bootstrapi tundlike aspektide säilitamiseks peate kohandama ka responsive.less võrgustikke.

Layouts Põhimallid veebilehtede loomiseks

Fikseeritud paigutus

Vaikimisi lihtne ja lihtne 940 piksli laiune tsentreeritud paigutus peaaegu iga veebisaidi või lehe jaoks, mille pakub üks <div class="container">.

  1. <keha>
  2.   <div class = "konteiner" > 
  3.     ...
  4.   </div>
  5. </body>

Vedeliku paigutus

<div class="container-fluid">annab paindliku lehe struktuuri, minimaalse ja maksimaalse laiuse ning vasakpoolse külgriba. See on suurepärane rakenduste ja dokumentide jaoks.

  1. <div class = "container-fluid" > 
  2.   <div class = "reavedelik" > 
  3.     <div class = "span2" > 
  4.       <!--Külgriba sisu-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Keha sisu-->
  8.     </div>
  9.   </div>
  10. </div>

Tundlik disain Meediumipäringud erinevate seadmete ja eraldusvõimete kohta

Reageerivad seadmed

Mida nad teevad

Meediumipäringud võimaldavad kohandatud CSS-i, mis põhineb mitmel tingimusel (suhted, laiused, kuvamise tüüp jne), kuid tavaliselt keskenduvad min-widthja ümber max-width.

  • Muutke meie ruudustiku veeru laiust
  • Virna elemendid hõljumise asemel kõikjal, kus vaja
  • Muutke pealkirjade ja teksti suurust, et need oleksid seadmetele sobivamad

Kasutage meediapäringuid vastutustundlikult ja ainult oma mobiilsete vaatajaskondade jaoks. Suuremate projektide puhul kaaluge spetsiaalseid koodibaase, mitte meediumipäringute kihte.

Toetatud seadmed

Bootstrap toetab käputäis meediumipäringuid ühes failis, et muuta teie projektid erinevatele seadmetele ja ekraani eraldusvõimetele sobivamaks. Sisaldab järgmist:

Silt Paigutuse laius Veeru laius Renni laius
Nutitelefonid 480 pikslit ja alla selle Vedelkolonnid, fikseeritud laiused puuduvad
Nutitelefonidest tahvelarvutitesse 767 pikslit ja alla selle Vedelkolonnid, fikseeritud laiused puuduvad
Portree tahvelarvutid 768 pikslit ja rohkem 42 pikslit 20 pikslit
Vaikimisi 980 pikslit ja rohkem 60 pikslit 20 pikslit
Suur ekraan 1200 pikslit ja rohkem 70 pikslit 30 pikslit

Nõuab metasilti

Tagamaks, et seadmed kuvavad automaatselt reageerivaid lehti õigesti, lisage vaateava metasilt.

  1. <meta name = "vaateava" content = "width = seadme laius, esialgne skaala = 1,0" >

Meediapäringute kasutamine

Bootstrap ei kaasa neid meediumipäringuid automaatselt, kuid nende mõistmine ja lisamine on väga lihtne ja nõuab minimaalset seadistamist. Teil on Bootstrapi tundlike funktsioonide kaasamiseks mõned võimalused.

  1. Kasutage kompileeritud reageerivat versiooni bootstrap-responsive.css
  2. Lisage @import "responsive.less" ja kompileerige Bootstrap uuesti
  3. Muutke ja kompileerige responsive.less uuesti eraldi failina

Miks mitte seda lihtsalt lisada? Tõtt-öelda ei pea kõik reageerima. Selle asemel, et julgustada arendajaid seda funktsiooni eemaldama, arvame, et parim on see lubada.

  1.   /* Rõhtpaigutustelefonid ja alla */
  2.   @media ( maksimaalne laius : 480 pikslit ) { ... }     
  3.  
  4.   /* Telefoni horisontaalpaigutusega portree-tahvelarvutisse */
  5.   @media ( maksimaalne laius : 767px ) { ... } _     
  6.  
  7.   /* Portree tahvelarvuti horisontaalpaigutusse ja töölauale */
  8.   @media ( min - laius : 768 pikslit ) ja ( max - laius : 979 pikslit ) { ... }        
  9.  
  10.   /* Suur töölaud */
  11.   @media ( min - laius : 1200 pikslit ) { ... }

Vastuvõtlikud kommunaalklassid

Mis need on

Kiiremaks mobiilisõbralikuks arendamiseks kasutage neid põhilisi utiliidiklasse sisu kuvamiseks ja peitmiseks seadme kaupa.

Millal kasutada

Kasutage piiratud arvul ja vältige samast saidist täiesti erinevate versioonide loomist. Selle asemel kasutage neid iga seadme esitluse täiendamiseks.

Näiteks võite <select>navigeerimise elementi kuvada mobiilipaigutustes, kuid mitte tahvel- või lauaarvutites.

Tugiklassid

Siin on tabel meie toetatavatest klassidest ja nende mõjust antud meediumipäringu paigutusele (märgistatud seadme järgi). Neid võib leida responsive.less.

Klass Telefonid480 pikslit ja alla selle Tabletid767 pikslit ja alla selle Lauaarvutid768 pikslit ja rohkem
.visible-phone Nähtav
.visible-tablet Nähtav
.visible-desktop Nähtav
.hidden-phone Nähtav Nähtav
.hidden-tablet Nähtav Nähtav
.hidden-desktop Nähtav Nähtav

Testjuhtum

Ülaltoodud klasside testimiseks muutke brauseri suurust või laadige see erinevatesse seadmetesse.

Nähtav aadressil...

Rohelised linnukesed näitavad, et klass on teie praeguses vaateaknas nähtav.

  • Telefon✔ Telefon
  • Tahvelarvuti✔ Tahvelarvuti
  • Töölaud✔ Töölaud

Peidetud...

Siin näitavad rohelised linnukesed, et klass on teie praeguses vaateaknas peidetud.

  • Telefon✔ Telefon
  • Tahvelarvuti✔ Tahvelarvuti
  • Töölaud✔ Töölaud