Bruke Bootstrap 3 med Sass
Bootstrap leveres med Responsive Grids, og noen få vanlige webkomponenter som vi kan plukke opp for å bygge opp en responsiv nettside raskt . Hvis du har sett våre tidligere innlegg på Bootstrap, vet du sikkert at Bootstrap-stilene er sammensatt med LESS.
Mens LESS har blitt kraftigere med nye funksjoner introdusert i versjon 1.5, kan noen av dere være mer kjent med Sass / SCSS. Det kan også være noen funksjoner i Sass at du ikke kan leve uten, men de er ikke til stede i mindre (enda). Hvis du vil jobbe på Boostrap og med Sass, takket være Thomas McDonald, kan du fordi Bootstrap har blitt portet til Sass / SCSS .
Installasjon
Det er noen måter å begynne å bruke Bootstrap + Sass . For det første, siden den har blitt inkludert som en Ruby perle, kan du installere den gjennom Terminal med følgende kommandolinje:
gem install bootstrap-sass
Du kan også bruke den sammen med Kompass med denne kommandoen nedenfor. Det er på samme måte som hvordan vi installerer Zurb Foundation. Men vær oppmerksom på at denne måten bare vil inneholde _variables.less som inneholder Bootstrap-variabler, og styles.less der du setter dine egne stilregler .
kompass lage my-new-project -r bootstrap-sass - å bruke bootstrap
Alternativt kan du enkelt laste den ned fra Github repo.
Hva er nytt i Bootstrap 3
Her er noen nye funksjoner som finnes i Bootstrap 3.
Flat Design
Endringen som du umiddelbart kan se fra den nye versjonen, Bootstrap 3, er at den nå omfatter flat design. Gradienter, og skygger som vi fant i tidligere versjonskomponenter, er nå borte.
Rutenett i Bootstrap 3
Bootstrap introduserer også et sett med nye klasser og nye gridkonstruksjoner. I versjon 3 er det store, mellomstore, små og ekstra små grids for å imøtekomme forskjellige visningsstørrelser. La oss se følgende HTML-eksempel:
Venstre kolonne
Midtkolonne
Høyre kolonne
Vi har tre kolonner. Hver kolonne har en like bredde når den vises i en stor visningspoststørrelse (på en skjerm eller på landskapsretningen på nettbrettet). Størrelsen påføres med col-md-4
klasse.
Når skjermstørrelsen blir mindre, blir kolonnebreddeavsnittet justert med col-sm-*
klassen, slik at kolonnebredden kan forbli i riktig proporsjon, i stedet for bare å bli stablet, som i den forrige versjonen av Bootstrap.
Nye komponenter
Det er også noen nye komponenter lagt til i versjon 3. Dette inkluderer Pager (brukes til å bygge neste og forrige navigasjonstype), listegruppe, paneler og sideoverskrift .
Utnytte Sass Funksjoner
Teknisk sett kan vi bare legge til Bootstrap-klasser til HTML-elementene for å lage nettstedet, som vi gjorde i eksemplet ovenfor. Men når vi bruker CSS Pre-prosessorer, som Sass, kan vi bruke noen av funksjonene til å oppnå en renere og mer semantisk HTML-struktur enn å være fylt med meningsløse klassenavn.
Gitt det forrige eksempelet kan vi endre strukturen så vel som klassenavn til noe slikt:
Dette er innholdet.
Dette er sidefeltet.
Dette er navigasjonen.
Innenfor stilarket kan vi bruke Sass @extend
direktivet for å lage oppsettet. Ved å bruke @extend
, grupperes selektorer som deler de samme @extend
.
.main-område {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; }
Alternativt kan du også bruke Sass @include
som vil kopiere og inkludere stilregler fra mixins til våre klassevalgere.
.main-område {@include make-row; } .content {@include make-xs-column (6); @include make-sm-kolonne (6); } .sidebar {@include make-xs-column (4); @include make-sm-kolonne (4); } .side-nav {@ include make-xs-column (2); @include make-sm-kolonne (2); } .column {@include make-md-column (4); }
Nå, se den på nettleseren, og du vil få ditt responsive layout.
Konklusjon
Bootstrap og Sass gjør definitivt en flott kombinasjon. Med Bootstrap kan du bygge et fungerende, responsivt nettsted på bare noen få timer . Og funksjoner i Sass som @extend
og @include
kan hjelpe oss med å skrive slankere, programmerbare og vedlikeholdsfrie CSS . For mer om Sass, kan du se denne artikkelen: Komme i gang Med Sass: Installasjon og Grunnleggende.
Så har du prøvd Bootstrap + Sass?
![35 ganger ærlighet ikke lagret dagen [pics]](http://hideout-lastation.com/img/tech-design-tips/817/35-times-honesty-didn-t-save-day.jpeg)
35 ganger ærlighet ikke lagret dagen [pics]
Ærlighet er den beste politikken, vi blir fortalt gang på gang når vi var barn, av de samme voksne som bløffer på kort, forteller hvite løgner, bøyer sannheten, overdriver med størrelser, sprer misforståelser, myter, sladder og forfalskninger. Så nå som jeg er en voksen (noe), overfører jeg ideen til neste generasjon at noen ganger, barn, ærlighet kanskje ikke er den beste politikken for å vedta.Det er noe kj
![Slik aktiverer du bakgrunnsstørrelse i Internet Explorer [Quicktip]](http://hideout-lastation.com/img/tech-design-tips/819/how-enable-background-size-internet-explorer.jpg)
Slik aktiverer du bakgrunnsstørrelse i Internet Explorer [Quicktip]
De nye funksjonene som følger med CSS3, gjelder ikke i Internet Explorer 8-6, og likevel kan vi ignorere denne ulempen da effekten vil degradere pent. For eksempel kan nettlesere uten støtte for CSS3 Box Shadow ikke se skyggen, men dette er greit så lenge innholdet forblir lesbart .En av de få tingene du ikke kan overse, er imidlertid når du bruker CSS3 Bakgrunnsstørrelse . Vi k