Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum vid eros.
Bootstrap är en verktygslåda från Twitter utformad för att kickstarta utvecklingen av webbappar och sajter.
Den innehåller bas-CSS och HTML för typografi, formulär, knappar, tabeller, rutnät, navigering och mer.
Nerdvarning: Bootstrap är byggd med Less och designades för att fungera utanför porten med moderna webbläsare i åtanke.
För den snabbaste och enklaste starten, kopiera bara detta utdrag till din webbsida.
Ett fan av att använda mindre? Inga problem, klona bara repet och lägg till dessa rader:
Ladda ner, gaffel, dra, filproblem och mer med den officiella Bootstrap-repo på Github.
För närvarande v1.3.0
Ingenjörer på Twitter har historiskt sett använt nästan alla bibliotek de varit bekanta med för att uppfylla frontend-kraven. Bootstrap började som ett svar på de utmaningar som bjöds på. Med hjälp av många fantastiska människor har Bootstrap växt avsevärt.
Läs mer på dev.twitter.com ›
Bootstrap är testat och stöds i stora moderna webbläsare som Chrome, Safari, Internet Explorer och Firefox.
Bootstrap levereras komplett med kompilerad CSS, okompilerade mallar och exempelmallar.
Standardrutnätssystemet som tillhandahålls som en del av Bootstrap är ett 940px brett rutnät med 16 kolumner. Det är en smak av det populära 960 rutsystemet, men utan extra marginal/stoppning på vänster och höger sida.
Som visas här kan en grundläggande layout skapas med två "kolumner", som var och en spänner över ett antal av de 16 grundkolumner som vi definierade som en del av vårt rutsystem. Se exemplen nedan för fler varianter.
- <div class = "rad" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Kapsla ditt innehåll om du måste genom att skapa en .row
i en befintlig kolumn.
- <div class = "rad" >
- <div class = "span12" >
- Nivå 1 i kolumn
- <div class = "rad" >
- <div class = "span6" >
- Nivå 2
- </div>
- <div class = "span6" >
- Nivå 2
- </div>
- </div>
- </div>
- </div>
Inbyggda i Bootstrap är en handfull variabler för att anpassa standard 940px-rutnätssystemet. Med lite anpassning kan du ändra storleken på kolumner, deras rännor och behållaren de finns i.
Variablerna som behövs för att modifiera rutnätssystemet finns för närvarande alla i preboot.less
.
Variabel | Standardvärde | Beskrivning |
---|---|---|
@gridColumns |
16 | Antalet kolumner i rutnätet |
@gridColumnWidth |
40px | Bredden på varje kolumn i rutnätet |
@gridGutterWidth |
20px | Det negativa utrymmet mellan varje kolumn |
@siteWidth |
Beräknad summa av alla kolumner och rännor | Vi använder lite grundläggande matchning för att räkna antalet kolumner och rännor och ställa in bredden på .fixed-container() mixin. |
Att ändra rutnätet innebär att ändra de tre @grid-*
variablerna och kompilera om Less-filerna.
Bootstrap är utrustad för att hantera ett rutsystem med upp till 24 kolumner; standarden är bara 16. Så här skulle dina rutnätsvariabler se ut anpassade till ett rutnät med 24 kolumner.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
När du har kompilerat om är du klar!
Standard och enkla 940px bred, centrerad layout för nästan vilken webbplats eller sida som helst som tillhandahålls av en enda <div.container>
.
- <kropp>
- <div class = "container" >
- ...
- </div>
- </body>
En alternativ, flexibel flytande sidstruktur med min- och maxbredder och en vänstra sidofält. Perfekt för appar och dokument.
- <kropp>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
En standardtypografisk hierarki för att strukturera dina webbsidor.
Hela det typografiska rutnätet är baserat på två Less-variabler i vår preboot.less-fil: @basefont
och @baseline
. Den första är grundteckensnittsstorleken som används genomgående och den andra är baslinjens höjd.
Vi använder dessa variabler, och lite matematik, för att skapa marginaler, stoppningar och linjehöjder av alla våra typer och mer.
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.
Använda betoning, adresser och förkortningar
<strong>
<em>
<address>
<abbr>
Betoningstaggar ( <strong>
och <em>
) bör användas för att indikera ytterligare betydelse eller betoning av ett ord eller en fras i förhållande till dess omgivande kopia. Använd <strong>
för betydelse och <em>
för betoning av stress .
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.
Obs: Det är fortfarande okej att använda <b>
och <i>
taggar i HTML5 och de behöver inte vara fetstilade respektive kursiverade (även om det finns ett mer semantiskt element, använd det). <b>
är avsedd att markera ord eller fraser utan att förmedla ytterligare betydelse, medan <i>
är mest för röst, tekniska termer, etc.
Elementet <address>
används för kontaktinformation för sin närmaste förfader, eller hela arbetet. Här är två exempel på hur det kan användas:
Obs! Varje rad i en <address>
måste sluta med en radbrytning ( <br />
) eller vara inslagen i en tagg på blocknivå (t.ex. <p>
) för att strukturera innehållet korrekt.
För förkortningar och akronymer, använd <abbr>
taggen ( <acronym>
är utfasad i HTML5 ). Placera förkortningsformuläret i taggen och ange en titel för hela namnet.
<blockquote>
<p>
<small>
För att inkludera ett blockcitat, linda <blockquote>
runt <p>
och <small>
taggar. Använd <small>
elementet för att citera din källa så får du ett em-streck —
före det.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimpa din kod med stil med två enkla taggar. För ännu mer häftigt genom JavaScript, släpp in Googles kodpretify-bibliotek och du är klar.
Kod, block av eller bara utdrag inline, kan visas med stil bara genom att slå in rätt tagg. För kodblock som spänner över flera rader, använd <pre>
elementet. För inline-kod, använd <code>
elementet.
Element | Resultat |
---|---|
<code> |
I en textrad som denna kommer din inslagna kod att se ut som det här >html< elementet. |
<pre> |
<div> <h1>Rubrik</h1> <p>Något här...</p> </div> Obs: Se till att hålla koden i |
<pre class="prettyprint"> |
Genom att använda google-code-prettify-biblioteket får dina kodblock en något annorlunda visuell stil och automatisk syntaxmarkering. <div> <h1> Rubrik </h1> <p> Något här... </p> </div> Ladda ner google-code-prettify och se readme för hur du använder. |
<span class="label">
Uppmärksamma eller flagga någon fras i din brödtext.
Någonsin behövt en av dessa snygga nya! eller Viktiga flaggor när du skriver kod? Nåväl, nu har du dem. Här är vad som ingår som standard:
Märka | Resultat |
---|---|
<span class="label">Default</span> |
Standard |
<span class="label success">New</span> |
Ny |
<span class="label warning">Warning</span> |
Varning |
<span class="label important">Important</span> |
Viktig |
<span class="label notice">Notice</span> |
Lägga märke till |
Visa miniatyrer i olika storlekar på sidor med lågt HTML-fotavtryck och minimala stilar.
Miniatyrbilder i .media-grid
kan ha vilken storlek som helst, men de fungerar bäst när de mappas direkt till det inbyggda Bootstrap-rutnätssystemet. Bildbredder som 90, 210 och 330 kombineras med några pixlar med utfyllnad för att vara lika med .span2
, .span4
, och .span6
kolumnstorlekarna.
Mediarutnät är lätta att använda och ganska enkla på uppmärkningssidan. Deras dimensioner är enbart baserade på storleken på bilderna som ingår.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Bord är bra - för många saker. Bra tabeller kräver dock lite uppmärkningskärlek för att vara användbara, skalbara och läsbara (på kodnivå). Här är några tips som kan hjälpa dig.
Slå alltid in dina kolumnrubriker <thead>
så att hierarkin är <thead>
> <tr>
> <th>
.
På samma sätt som kolumnrubrikerna bör allt innehåll i din tabell vara inlindat i en <tbody>
så att din hierarki är <tbody>
> <tr>
> <td>
.
Alla tabeller kommer automatiskt att formateras med endast de väsentliga ramarna för att säkerställa läsbarhet och upprätthålla struktur. Inget behov av att lägga till extra klasser eller attribut.
# | Förnamn | Efternamn | Språk |
---|---|---|---|
1 | Några | Ett | engelsk |
2 | Joe | Sexpack | engelsk |
3 | Stu | Buckla | Koda |
- <tabell>
- ...
- </table>
Bli lite tjusig med dina bord genom att lägga till zebrastränder – lägg bara till .zebra-striped
klassen.
# | Förnamn | Efternamn | Språk |
---|---|---|---|
1 | Några | Ett | engelsk |
2 | Joe | Sexpack | engelsk |
3 | Stu | Buckla | Koda |
Obs: Zebra-striping är en progressiv förbättring som inte är tillgänglig för äldre webbläsare som IE8 och lägre.
- <tabellklass = " zebrarandig" >
- ...
- </table>
Med det föregående exemplet förbättrar vi användbarheten av våra tabeller genom att tillhandahålla sorteringsfunktioner via jQuery och plugin-programmet Tablesorter . Klicka på valfri kolumnrubrik för att ändra sorteringen.
# | Förnamn | Efternamn | Språk |
---|---|---|---|
2 | Joe | Sexpack | engelsk |
3 | Stu | Buckla | Koda |
1 | Din | Ett | engelsk |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( function () {
- $ ( "tabell#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <tabellklass = " zebrarandig" >
- ...
- </table>
Alla formulär får standardstilar för att presentera dem på ett läsbart och skalbart sätt. Stilar tillhandahålls för textinmatning, urvalslistor, textområden, alternativknappar och kryssrutor samt knappar.
Lägg .form-stacked
till i ditt formulärs HTML så kommer du att ha etiketter ovanpå deras fält istället för till vänster. Detta fungerar utmärkt om dina formulär är korta eller om du har två kolumner med indata för tyngre formulär.
Anpassa valfri form input
, select
, eller textarea
bredd genom att lägga till några få klasser i din uppmärkning.
Från och med v1.3.0 har vi lagt till de rutnätsbaserade storleksklasserna för formulärelement. Använd dessa över befintliga .mini
, .small
, etc klasser.
Som en konvention används knappar för åtgärder medan länkar används för objekt. Till exempel kan "Ladda ner" vara en knapp och "senaste aktiviteten" kan vara en länk.
Alla knappar har som standard en ljusgrå stil, men ett antal funktionsklasser kan användas för olika färgstilar. Dessa klasser inkluderar en blå .primary
klass, en ljusblå .info
klass, en grön .success
klass och en röd .danger
klass.
Knappstilar kan appliceras på vad som helst med den .btn
applicerade. Vanligtvis vill du tillämpa dessa på endast <a>
, <button>
, och markerade <input>
element. Så här ser det ut:
Vill du ha större eller mindre knappar? Ha på det!
För knappar som inte är aktiva eller inaktiverade av appen av en eller annan anledning, använd avaktiverat tillstånd. Det är .disabled
för länkar och :disabled
för <button>
element.
.alert-message
Meddelanden på en rad för att markera ett misslyckande, eventuellt misslyckande eller framgång för en åtgärd. Särskilt användbart för formulär.
- <div class = "alert-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Heliga guacamole! </strong> Bäst kolla dig själv, du ser inte för bra ut. </p>
- </div>
.alert-message.block-message
För meddelanden som kräver lite förklaring har vi styckestilsvarningar. Dessa är perfekta för att bubbla upp längre felmeddelanden, varna en användare om en väntande åtgärd eller bara presentera information för att betona sidan.
- <div class = "varning-meddelande block-meddelande varning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Heliga guacamole! Detta är en varning! </strong> Bäst kolla dig själv, du ser inte för bra ut. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Gör den här åtgärden </a> <a class = "btn small" href = "#" > Eller gör så här </a>
- </div>
- </div>
Modaler – dialoger eller ljusboxar – är utmärkta för kontextuella åtgärder i situationer där det är viktigt att bakgrundskontexten bibehålls.
En fin kropp...
Twipsies är super användbara för att hjälpa en förvirrad användare och peka dem i rätt riktning.
Lorem ipsum dolar sit amet illo fel 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 sitta quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit volupta quae quae eaquet quate quate quate .
Använd popovers för att tillhandahålla subtextuell information till en sida utan att påverka layouten.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum vid eros.
Att integrera javascript med Bootstrap-biblioteket är superenkelt. Nedan går vi igenom grunderna och ger dig några fantastiska plugins för att komma igång!
Väck några av Bootstraps primära komponenter till liv med nya anpassade plugins som fungerar med jQuery och Ender . Vi uppmuntrar dig att utöka och modifiera dem för att passa dina specifika utvecklingsbehov.
Fil | Beskrivning |
---|---|
bootstrap-modal.js | Vår Modal-plugin är en supertunn version av den traditionella modal js-plugin! Vi var särskilt noga med att bara inkludera den nakna funktionalitet som vi behöver på twitter. |
bootstrap-alerts.js | Alert-pluginet är en superliten klass för att lägga till nära funktionalitet till varningar. |
bootstrap-dropdown.js | Denna plugin är till för att lägga till dropdown-interaktion till bootstraps toppfält eller navigering med flikar. |
bootstrap-scrollspy.js | ScrollSpy-pluginet är till för att lägga till en nav för automatisk uppdatering baserat på rullningsposition till bootstraps övre fält. |
bootstrap-tabs.js | Denna plugin lägger till snabb, dynamisk flik och pillerfunktion för att cykla genom lokalt innehåll. |
bootstrap-twipsy.js | Baserat på det utmärkta plugin-programmet jQuery.tipsy skrivet av Jason Frame; twipsy är en uppdaterad version, som inte förlitar sig på bilder, använder css3 för animationer och dataattribut för lokal titellagring! |
bootstrap-popover.js | Popover-pluginet ger ett enkelt gränssnitt för att lägga till popovers till din applikation. Det utökar plugin-programmet boostrap-twipsy.js , så se till att ta tag i den filen också när du inkluderar popovers i ditt projekt! |
Nej! Bootstrap är designat först och främst för att vara ett CSS-bibliotek. Detta javascript tillhandahåller ett grundläggande interaktivt lager ovanpå de inkluderade stilarna.
Men för dem som behöver javascript har vi tillhandahållit plugin-programmen ovan för att hjälpa dig förstå hur du integrerar Bootstrap med javascript och för att ge dig ett snabbt, lättviktigt alternativ för den grundläggande funktionaliteten direkt.
För mer information och för att se några livedemos, vänligen se vår plugin-dokumentationssida .
Bootstrap byggdes med Preboot , ett paket med öppen källkod med mixins och variabler som ska användas tillsammans med Less , en CSS-förprocessor för snabbare och enklare webbutveckling.
Kolla in hur vi använde Preboot i Bootstrap och hur du kan använda det om du väljer att köra Less på ditt nästa projekt.
Använd det här alternativet för att fullt ut använda Bootstraps Less-variabler, mixins och kapsling i CSS via javascript i din webbläsare.
- <länk rel = "stylesheet/less" href = "less/bootstrap.less" media = "alla" />
- <script src = "js/less-1.1.3.min.js" ></script>
Känner du inte .js-lösningen? Prova Less Mac-appen eller använd Node.js för att kompilera när du distribuerar din kod.
Här är några av höjdpunkterna i vad som ingår i Twitter Bootstrap som en del av Bootstrap. Gå över till Bootstrap-webbplatsen eller Github-projektsidan för att ladda ner och lära dig mer.
Variables in Less är perfekta för att underhålla och uppdatera din CSS utan huvudvärk. När du vill ändra ett färgvärde eller ett ofta använt värde, uppdatera det på ett ställe och du är klar.
- // Länkar
- @linkColor : #8b59c2;
- @linkColorHover : mörkare ( @linkColor , 10 );
- // Gråa
- @svart : #000;
- @grayDark : ljusare ( @black , 25 %);
- @grå : ljusare ( @svart , 50 %);
- @grayLight : ljusare ( @black , 70 %);
- @grayLighter : ljusare ( @black , 90 %);
- @vit : #fff;
- // Accentfärger
- @blå : #08b5fb;
- @grön : #46a546;
- @röd : #9d261d;
- @gul : #ffc40d;
- @orange : #f89406;
- @rosa : #c3325f;
- @lila : #7a43b6;
- // Baslinjerutnät
- @basefont : 13px ;
- @baslinje : 18px ;
Mindre ger också en annan typ av kommentarer utöver CSS:s normala /* ... */
syntax.
- // Detta är en kommentar
- /* Detta är också en kommentar */
Mixins är i grunden inkluderade eller partier för CSS, vilket gör att du kan kombinera ett kodblock till ett. De är perfekta för egenskaper med leverantörsprefix som box-shadow
, övertoningar över webbläsare, teckensnittsstaplar och mer. Nedan är ett exempel på mixinerna som ingår i Bootstrap.
- #font {
- . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- teckensnittsstorlek : @storlek ; _ _
- teckensnitt - vikt : @vikt ;
- line - höjd : @ lineHeight ;
- }
- . sans - serif ( @vikt : normal , @storlek : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- teckensnittsstorlek : @storlek ; _ _
- teckensnitt - vikt : @vikt ;
- line - höjd : @ lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . vertikal ( @startColor : #555, @endColor: #333) {
- bakgrundsfärg : @endColor ; _ _
- bakgrund - upprepa : upprepa - x ;
- bakgrund - bild : - khtml - gradient ( linjär , vänster upptill , vänster nere , från ( @startColor ), till ( @endColor )); // Konqueror
- bakgrund - bild : - moz - linjär - gradient ( @startColor , @endColor ); // FF 3.6+
- bakgrund - bild : - ms - linjär - gradient ( @startColor , @endColor ); // IE10
- bakgrund - bild : - webkit - gradient ( linjär , vänster topp , vänster nere , färg - stopp ( 0 %, @startColor ), färg - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- bakgrund - bild : - webkit - linjär - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- bakgrund - bild : - o - linjär - gradient ( @startColor , @endColor ); // Opera 11.10
- bakgrund - bild : linjär - gradient ( @startColor , @endColor ); // Standarden
- }
- ...
- }
Bli fancy och utför lite matematik för att generera flexibla och kraftfulla mixins som den nedan.
- // Grititude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Gör några kolumner
- . kolumner ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Efter att ha modifierat .less
filerna i /lib/, måste du kompilera om dem för att återskapa filerna bootstrap-*.*.*.css och bootstrap-*.*.*.min.css. Om du skickar en pull-begäran till GitHub måste du alltid kompilera om.
Metod | Steg |
---|---|
Nod med makefile | Installera mindre kommandoradskompilator med npm genom att köra följande kommando: $ npm installera lessc När det är installerat, kör bara Dessutom, om du har watchr installerat, kan du köra |
Javascript | Ladda ner den senaste Less.js och inkludera sökvägen till den (och Bootstrap) i
För att kompilera om .less-filerna, spara bara dem och ladda om din sida. Less.js kompilerar dem och lagrar dem i lokal lagring. |
Kommandorad | Om du redan har det mindre kommandoradsverktyget installerat, kör bara följande kommando: $ lessc ./lib/bootstrap.less > bootstrap.css Se till att inkludera |
Mindre Mac-app | Den inofficiella Mac-appen tittar på kataloger med .less-filer och kompilerar koden till lokala filer efter varje lagring av en bevakad .less-fil. Om du vill kan du växla inställningar i appen för automatisk minifiering och i vilken katalog de kompilerade filerna hamnar. |