Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ved eros.
Bootstrap er et verktøysett fra Twitter designet for å kickstarte utviklingen av webapper og nettsteder.
Den inkluderer grunnleggende CSS og HTML for typografi, skjemaer, knapper, tabeller, rutenett, navigasjon og mer.
Nerd-varsel: Bootstrap er bygget med Less og ble designet for å fungere utenfor porten med kun moderne nettlesere i tankene.
For den raskeste og enkleste starten, bare kopier denne kodebiten inn på nettsiden din.
En fan av å bruke mindre? Ikke noe problem, bare klon repoen og legg til disse linjene:
Last ned, gaffel, trekk, filproblemer og mer med den offisielle Bootstrap-repoen på Github.
Standard rutenettsystem som leveres som en del av Bootstrap er et 940px bredt rutenett med 16 kolonner. Det er en smak av det populære 960-rutesystemet, men uten ekstra margin/polstring på venstre og høyre side.
Som vist her, kan et grunnleggende oppsett lages med to "kolonner", som hver spenner over et antall av de 16 grunnleggende kolonnene vi definerte som en del av rutenettsystemet vårt. Se eksemplene nedenfor for flere varianter.
- <div class="row"> klasse = "rad" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
En grunnleggende 940px bred, sentrert beholderlayout for omtrent alle nettsteder eller sider.
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
En fleksibel flytende eller flytende sidestruktur med min- og maks-bredder og en venstre sidelinje. Flott for apper.
- <body>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "innhold" >
- ...
- </div>
- </div>
- </body>
Et standard typografisk hierarki for å strukturere nettsidene dine.
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.
Du kan også legge til underoverskrifter med <strong>
og<em>
Bruke vekt, adresser og forkortelser
<strong>
<em>
<address>
<abbr>
Uthevingsetiketter ( <strong>
og <em>
) bør brukes for å legge til et visuelt skille mellom et ord eller en frase og den omgivende kopien. Bruk <strong>
for ren gammel oppmerksomhet og <em>
for glatte oppmerksomhet og titler.
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, en pharetra augue.
address
Elementet brukes til – du gjettet det! – adresser . Slik ser det ut:
Merk: Hver linje i en address
må slutte med et linjeskift ( <br />
) for å strukturere innholdet riktig slik det leses i det virkelige liv uten at noen stiler er brukt.
For forkortelser og akronymer, bruk abbr
taggen ( acronym
er utdatert i HTML5 ). Sett stenografiskjemaet i taggen og angi en tittel for hele navnet.
<blockquote>
<p>
<cite>
Sørg for å pakke blockquote
rundt paragraph
og cite
tagger. Når du siterer en kilde, bruk cite
elementet. CSS vil automatisk innlede et navn med en em-strek (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Dr. Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Bord er flotte – til mange ting. Flotte tabeller trenger imidlertid litt oppmerkingskjærlighet for å være nyttige, skalerbare og lesbare (på kodenivå). Her er noen tips for å hjelpe.
Pakk alltid kolonneoverskriftene inn thead
slik at hierarkiet er thead
> tr
> th
.
I likhet med kolonneoverskriftene, bør alt innholdet i tabellen din pakkes inn i en tbody
slik at hierarkiet ditt er tbody
> tr
> td
.
Alle tabeller vil automatisk styles med bare de essensielle kantene for å sikre lesbarhet og opprettholde struktur. Du trenger ikke å legge til ekstra klasser eller attributter.
# | Fornavn | Etternavn | Språk |
---|---|---|---|
1 | Noen | En | Engelsk |
2 | Joe | Sixpack | Engelsk |
3 | Stu | Bulk | Kode |
- < tabellklasse = "fellestabell" >
- ...
- </table>
Bli litt fancy med bordene dine ved å legge til sebrastriper – bare legg til .zebra-striped
klassen.
# | Fornavn | Etternavn | Språk |
---|---|---|---|
1 | Noen | En | Engelsk |
2 | Joe | Sixpack | Engelsk |
3 | Stu | Bulk | Kode |
- <table class = "vanlig-bord sebra-stripet" >
- ...
- </table>
Med det forrige eksemplet forbedrer vi nytten av tabellene våre ved å tilby sorteringsfunksjonalitet via jQuery og Tablesorter- plugin. Klikk på en hvilken som helst kolonneoverskrift for å endre sorteringen.
# | Fornavn | Etternavn | Språk |
---|---|---|---|
1 | Din | En | Engelsk |
2 | Joe | Sixpack | Engelsk |
3 | Stu | Bulk | Kode |
- <script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skripttype = " tekst/javascript" >
- $ ( dokument ). klar ( funksjon () {
- $ ( "tabell#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "vanlig-bord sebra-stripet" >
- ...
- </table>
Alle skjemaer får standardstiler for å presentere dem på en lesbar og skalerbar måte. Stiler er gitt for tekstinndata, utvalgslister, tekstområder, alternativknapper og avmerkingsbokser og knapper.
Legg .form-stacked
til i skjemaets HTML, og du vil ha etiketter på toppen av feltene deres i stedet for til venstre. Dette fungerer bra hvis skjemaene dine er korte eller du har to kolonner med inndata for tyngre skjemaer.
Som en konvensjon brukes knapper for handlinger mens lenker brukes til objekter. For eksempel kan "Last ned" være en knapp og "nylig aktivitet" kan være en lenke.
Alle knapper har som standard en lysegrå stil, men en blå .primary
klasse er tilgjengelig. Dessuten er det lett å rulle dine egne stiler.
Knappestiler kan brukes på hva som helst med den .btn
påførte. Vanligvis vil du bare bruke disse på a
, button
, og utvalgte input
elementer. Slik ser det ut:
Lyst på større eller mindre knapper? Ha på det!
For knapper som ikke er aktive eller er deaktivert av appen av en eller annen grunn, bruk deaktivert tilstand. Det er .disabled
for lenker og :disabled
for button
elementer.
Meldinger på én linje for å fremheve feilen, mulig fiasko eller suksess for en handling. Spesielt nyttig for skjemaer.
For meldinger som krever litt forklaring, har vi avsnittsstilvarsler. Disse er perfekte for å boble opp lengre feilmeldinger, advare en bruker om en ventende handling, eller bare presentere informasjon for mer vekt på siden.
Modaler – dialogbokser eller lysbokser – er flotte for kontekstuelle handlinger i situasjoner der det er viktig at bakgrunnskonteksten opprettholdes.
En fin kropp...
Twipsies er veldig nyttige for å hjelpe en forvirret bruker og peke dem i riktig retning.
Lorem ipsum dolar sit amet illo feil ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas quae
Bruk popovers for å gi undertekstinformasjon til en side uten å påvirke layout.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ved eros.
Bootstrap ble bygget med Preboot , en åpen kildekodepakke med blandinger og variabler som skal brukes sammen med Less , en CSS-forprosessor for raskere og enklere webutvikling.
Sjekk ut hvordan vi brukte Preboot i Bootstrap og hvordan du kan bruke det hvis du velger å kjøre Less på ditt neste prosjekt.
Bruk dette alternativet for å gjøre full bruk av Bootstraps Less-variabler, mixins og nesting i CSS via javascript i nettleseren din.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "alle" />
- <script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
Føler du ikke .js-løsningen? Prøv Less Mac-appen eller bruk Node.js til å kompilere når du distribuerer koden din.
Her er noen av høydepunktene av det som er inkludert i Twitter Bootstrap som en del av Bootstrap. Gå over til Bootstrap-nettstedet eller Github-prosjektsiden for å laste ned og lære mer.
Variables in Less er perfekte for å vedlikeholde og oppdatere din CSS-hodepinefri. Når du vil endre en fargeverdi eller en ofte brukt verdi, oppdaterer du den på ett sted, og du er klar.
- // Lenker
- @linkColor : #8b59c2;
- @linkColorHover : mørkere ( @linkColor , 10 );
- // Grå
- @svart : #000;
- @grayDark : lysere ( @black , 25 %);
- @grå : lysere ( @svart , 50 %);
- @grayLight : lysere ( @black , 70 %);
- @grayLighter : lysere ( @black , 90 %);
- @hvit : #fff;
- // Aksentfarger
- @blå : #08b5fb ;
- @grønn : #46a546 ;
- @rød : #9d261d ;
- @gul : #ffc40d;
- @oransje : #f89406;
- @rosa : #c3325f;
- @lilla : #7a43b6;
- // Grunnlinje
- @grunnlinje : 20px ;
Less gir også en annen stil for kommentering i tillegg til CSSs normale /* ... */
syntaks.
- // Dette er en kommentar
- /* Dette er også en kommentar */
Mixins er i utgangspunktet inkluderer eller deler for CSS, slik at du kan kombinere en kodeblokk til en. De er flotte for egenskaper med leverandørprefiks som box-shadow
, gradienter på tvers av nettlesere, skriftstabler og mer. Nedenfor er et eksempel på mixinene som er inkludert i Bootstrap.
- #font {
- . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- skriftstørrelse : @ størrelse ; _
- font - weight : @weight ;
- line - høyde : @lineHeight ;
- }
- . sans - serif ( @vekt : normal , @størrelse : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- skriftstørrelse : @ størrelse ; _
- font - weight : @weight ;
- line - høyde : @lineHeight ;
- }
- . serif ( @vekt : normal , @størrelse : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- skriftstørrelse : @ størrelse ; _
- font - weight : @weight ;
- line - høyde : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- skriftstørrelse : @ størrelse ; _
- font - weight : @weight ;
- line - høyde : @lineHeight ;
- }
- }
- #gradient {
- . horisontal ( @startColor : #555, @endColor: #333) {
- bakgrunnsfarge : @endColor ; _ _
- bakgrunn - gjenta : gjenta - x ;
- bakgrunn - bilde : - khtml - gradient ( lineær , venstre topp , høyre topp , fra ( @startColor ), til ( @endColor )); // Konqueror
- bakgrunn - bilde : - moz - lineær - gradient ( venstre , @startColor , @endColor ); // FF 3.6+
- bakgrunn - bilde : - ms - lineær - gradient ( venstre , @startColor , @endColor ); // IE10
- bakgrunn - bilde : - webkit - gradient ( lineær , venstre topp , høyre topp , farge - stopp ( 0 %, @startColor ), farge - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- bakgrunn - bilde : - webkit - lineær - gradient ( venstre , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- bakgrunn - bilde : - o - lineær - gradient ( venstre , @startColor , @endColor ); // Opera 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 og IE7
- bakgrunn - bilde : lineær - gradient ( venstre , @startColor , @endColor ); // Le standard
- }
- . vertikal ( @startColor : #555, @endColor: #333) {
- bakgrunnsfarge : @endColor ; _ _
- bakgrunn - gjenta : gjenta - x ;
- bakgrunn - bilde : - khtml - gradient ( lineær , venstre topp , venstre bunn , fra ( @startColor ), til ( @endColor )); // Konqueror
- bakgrunn - bilde : - moz - lineær - gradient ( @startColor , @endColor ); // FF 3.6+
- bakgrunn - bilde : - ms - lineær - gradient ( @startColor , @endColor ); // IE10
- bakgrunn - bilde : - webkit - gradient ( lineær , venstre topp , venstre bunn , farge - stopp ( 0 %, @startColor ), farge - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- bakgrunn - bilde : - webkit - lineær - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- bakgrunn - bilde : - o - lineær - gradient ( @startColor , @endColor ); // Opera 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 og IE7
- bakgrunn - bilde : lineær - gradient ( @startColor , @endColor ); // Standarden
- }
- . retningsbestemt ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikal - tre - farger ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Bli fancy og utfør litt matematikk for å generere fleksible og kraftige mixins som den nedenfor.
- // Grititude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Grid System
- . container {
- width : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . kolonner ( @columnSpan : 1 ) {
- display : inline ;
- flyte : venstre ;
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- margin - venstre : @gridGutterWidth ;
- &: første - barn {
- marg - venstre : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- margin - venstre : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! viktig ;
- }