Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ved eros.
Bootstrap er et værktøjssæt fra Twitter designet til at kickstarte udvikling af webapps og websteder.
Det inkluderer basis CSS og HTML til typografi, formularer, knapper, tabeller, gitter, navigation og mere.
Nørd-advarsel: Bootstrap er bygget med Less og blev designet til at arbejde ud af porten med moderne browsere i tankerne.
For den hurtigste og nemmeste start skal du bare kopiere dette uddrag til din webside.
Er du fan af at bruge mindre? Intet problem, bare klon repoen og tilføje disse linjer:
Download, gaffel, træk, filproblemer og mere med den officielle Bootstrap-repo på Github.
I de tidligere dage af Twitter brugte ingeniører næsten ethvert bibliotek, de var bekendt med, for at opfylde frontend-kravene. Bootstrap begyndte som et svar på de udfordringer, der præsenterede sig, og udviklingen accelererede hurtigt under Twitters første Hackweek.
Med hjælp og feedback fra mange ingeniører hos Twitter er Bootstrap vokset betydeligt til at omfatte ikke kun grundlæggende stilarter, men mere elegante og holdbare frontend-designmønstre.
Læs mere på dev.twitter.com ›
Bootstrap er testet og understøttet i store moderne browsere som Chrome, Safari, Internet Explorer og Firefox.
Bootstrap leveres komplet med kompileret CSS, ukompileret og eksempelskabeloner.
Standardgittersystemet, der leveres som en del af Bootstrap, er et 940px bredt gitter med 16 kolonner. Det er en smag af det populære 960-gittersystem, men uden den ekstra margin/polstring på venstre og højre side.
Som vist her, kan der oprettes et grundlæggende layout med to "kolonner", der hver spænder over et antal af de 16 grundlæggende kolonner, vi definerede som en del af vores gittersystem. Se eksemplerne nedenfor for flere variationer.
- <div klasse = "række" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
Standardlayoutet og det enkle 940px-brede, centrerede layout til stort set alle websteder eller sider leveret af en enkelt <div.container>
.
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
En alternativ, fleksibel flydende sidestruktur med min- og max-bredder og en venstre sidebjælke. Fantastisk til apps og dokumenter.
- <body>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "indhold" >
- ...
- </div>
- </div>
- </body>
Et standard typografisk hierarki til strukturering af dine websider.
Hele det typografiske gitter er baseret på to Less-variabler i vores preboot.less-fil: @basefont
og @baseline
. Den første er basisskriftstørrelsen, der bruges hele vejen igennem, og den anden er basislinjehøjden.
Vi bruger disse variable og noget matematik til at skabe marginer, fyldninger og linjehøjder af alle vores typer og mere.
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.
Brug af eftertryk, adresser og forkortelser
<strong>
<em>
<address>
<abbr>
Fremhævningsmærker ( <strong>
og <em>
) skal bruges til at angive yderligere vigtighed eller betoning af et ord eller en sætning i forhold til dets omgivende kopi. Brug <strong>
for vigtighed og <em>
til betoning af stress .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ud fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, en pharetra augue.
Bemærk: Det er stadig i orden at bruge <b>
og <i>
tags i HTML5, og de behøver ikke at være stilet henholdsvis fed og kursiv (selvom hvis der er et mere semantisk element, så brug det). <b>
er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>
det mest er til stemme, tekniske termer osv.
Elementet <address>
bruges til kontaktoplysninger for sin nærmeste forfader eller hele arbejdet. Sådan ser det ud:
Bemærk: Hver linje i en <address>
skal slutte med et linjeskift ( <br />
) eller pakkes ind i et tag på blokniveau (f.eks. <p>
) for at strukturere indholdet korrekt.
For forkortelser og akronymer skal du bruge <abbr>
tagget ( <acronym>
er forældet i HTML5 ). Indsæt stenografiformularen i tagget og indstil en titel for det fulde navn.
<blockquote>
<p>
<small>
For at inkludere et blokcitat skal du omslutte <blockquote>
og <p>
tagge <small>
. Brug <small>
elementet til at citere din kilde, og du får en em-bindestreg —
før den.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Borde er gode - til mange ting. Store tabeller har dog brug for en smule markup-kærlighed for at være nyttige, skalerbare og læsbare (på kodeniveau). Her er et par tips til at hjælpe.
Indpak altid dine kolonneoverskrifter på en <thead>
sådan måde, at hierarkiet er <thead>
> <tr>
> <th>
.
I lighed med kolonneoverskrifterne skal hele din tabels kropsindhold pakkes ind i en <tbody>
, så dit hierarki er <tbody>
> <tr>
> <td>
.
Alle tabeller bliver automatisk stylet med kun de væsentlige rammer for at sikre læsbarhed og opretholde struktur. Ingen grund til at tilføje ekstra klasser eller attributter.
# | Fornavn | Efternavn | Sprog |
---|---|---|---|
1 | Nogle | En | engelsk |
2 | Joe | Vaskebræt | engelsk |
3 | Stu | Bule | Kode |
- <tabel>
- ...
- </table>
Bliv lidt fancy med dine borde ved at tilføje zebrastriber – bare tilføj .zebra-striped
klassen.
# | Fornavn | Efternavn | Sprog |
---|---|---|---|
1 | Nogle | En | engelsk |
2 | Joe | Vaskebræt | engelsk |
3 | Stu | Bule | Kode |
Bemærk: Zebra-striping er en progressiv forbedring, der ikke er tilgængelig for ældre browsere som IE8 og derunder.
- <table class = "zebra-stribet" >
- ...
- </table>
Tager vi det foregående eksempel, forbedrer vi anvendeligheden af vores tabeller ved at levere sorteringsfunktionalitet via jQuery og Tablesorter plugin. Klik på en hvilken som helst kolonneoverskrift for at ændre sorteringen.
# | Fornavn | Efternavn | Sprog |
---|---|---|---|
1 | Din | En | engelsk |
2 | Joe | Vaskebræt | engelsk |
3 | Stu | Bule | Kode |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funktion () {
- $ ( "tabel#sortTabeleksempel" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-stribet" >
- ...
- </table>
Alle formularer får standardstile for at præsentere dem på en læsbar og skalerbar måde. Stilarter leveres til tekstinput, udvalgte lister, tekstområder, alternativknapper og afkrydsningsfelter og knapper.
Tilføj .form-stacked
til din formulars HTML, og du vil have etiketter oven på deres felter i stedet for til venstre for dem. Dette fungerer godt, hvis dine formularer er korte, eller du har to kolonner med input til tungere formularer.
Som en konvention bruges knapper til handlinger, mens links bruges til objekter. For eksempel kunne "Download" være en knap, og "seneste aktivitet" kunne være et link.
Alle knapper har som standard en lysegrå stil, men en række funktionelle klasser kan anvendes til forskellige farvestile. Disse klasser omfatter en blå .primary
klasse, en lyseblå .info
klasse, en grøn .success
klasse og en rød .danger
klasse. Derudover er det nemt at rulle dine egne styles.
Knapstile kan anvendes på alt med det .btn
anvendte. Typisk vil du kun anvende disse på <a>
, <button>
, og udvalgte <input>
elementer. Sådan ser det ud:
Kunne du tænke dig større eller mindre knapper? Hav på det!
For knapper, der ikke er aktive eller er deaktiveret af appen af en eller anden grund, skal du bruge den deaktiverede tilstand. Det er .disabled
for links og :disabled
for <button>
elementer.
div.alert-message
Beskeder på én linje til at fremhæve en handlings fiasko, mulige fiasko eller succes. Særligt nyttigt til formularer.
div.alert-message.block-message
For beskeder, der kræver lidt forklaring, har vi advarsler om afsnitsstil. Disse er perfekte til at boble længere fejlmeddelelser op, advare en bruger om en afventende handling eller blot præsentere information for at få mere vægt på siden.
Modaler – dialogbokse eller lysbokse – er gode til kontekstuelle handlinger i situationer, hvor det er vigtigt, at baggrundskonteksten bevares.
En fin krop...
Twipsies er super nyttige til at hjælpe en forvirret bruger og pege dem i den rigtige retning.
Lorem ipsum dolar sit amet illo fejl 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 quae accusantium fugit volupta quae quate quae
Brug popovers til at give subtekstuelle oplysninger til en side uden at påvirke layoutet.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ved eros.
Bootstrap blev bygget med Preboot , en open source-pakke af mixins og variabler, der skal bruges sammen med Less , en CSS-forprocessor til hurtigere og nemmere webudvikling.
Se, hvordan vi brugte Preboot i Bootstrap, og hvordan du kan gøre brug af det, hvis du vælger at køre Less på dit næste projekt.
Brug denne mulighed til at gøre fuld brug af Bootstraps Less-variabler, mixins og nesting i CSS via javascript i din browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "alle" />
- <script src = "js/less-1.1.3.min.js" ></script>
Føler du ikke .js-løsningen? Prøv Less Mac-appen, eller brug Node.js til at kompilere, når du implementerer din kode.
Her er nogle af højdepunkterne i, hvad der er inkluderet i Twitter Bootstrap som en del af Bootstrap. Gå over til Bootstrap-webstedet eller Github-projektsiden for at downloade og lære mere.
Variables in Less er perfekte til at vedligeholde og opdatere din CSS-hovedpinefri. Når du vil ændre en farveværdi eller en ofte brugt værdi, skal du opdatere den på ét sted, og du er klar.
- // Links
- @linkColor : #8b59c2;
- @linkColorHover : mørkere ( @linkColor , 10 );
- // Grå
- @sort : #000;
- @grayDark : lysere ( @sort , 25 %);
- @grå : lysere ( @sort , 50 %);
- @grayLight : lysere ( @sort , 70 %);
- @grayLighter : lysere ( @sort , 90 %);
- @hvid : #fff;
- // Accentfarver
- @blå : #08b5fb ;
- @grøn : #46a546 ;
- @rød : #9d261d ;
- @gul : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @lilla : #7a43b6;
- // Basislinjegitter
- @basefont : 13px ;
- @baseline : 18px ;
Mindre giver også en anden måde at kommentere på ud over CSS's normale /* ... */
syntaks.
- // Dette er en kommentar
- /* Dette er også en kommentar */
Mixins er dybest set inkluderer eller delvise til CSS, så du kan kombinere en blok kode til en. De er gode til ejendomme med præfiks fra sælgerebox-shadow
, gradienter på tværs af browsere, skrifttyper og mere. Nedenfor er et eksempel på de mixins, der er inkluderet i Bootstrap.
- #font {
- . stenografi ( @vægt : normal , @størrelse : 14px , @lineHøjde : 20px ) {
- skrifttype - størrelse : @ størrelse ;
- font - vægt : @ vægt ;
- line - højde : @lineHøjde ;
- }
- . sans - serif ( @vægt : normal , @størrelse : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- skrifttype - størrelse : @ størrelse ;
- font - vægt : @ vægt ;
- line - højde : @lineHøjde ;
- }
- . serif ( @vægt : normal , @størrelse : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- skrifttype - størrelse : @ størrelse ;
- font - vægt : @ vægt ;
- line - højde : @lineHøjde ;
- }
- . monospace ( @vægt : normal , @ størrelse : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- skrifttype - størrelse : @ størrelse ;
- font - vægt : @ vægt ;
- line - højde : @lineHøjde ;
- }
- }
- #gradient {
- . vandret ( @startColor : #555, @endColor: #333) {
- baggrundsfarve : @endColor ; _ _
- baggrund - gentag : gentag - x ;
- baggrund - billede : - khtml - gradient ( lineær , venstre top , højre top , fra ( @startColor ), til ( @endColor )); // Konqueror
- baggrund - billede : - moz - lineær - gradient ( venstre , @startColor , @endColor ); // FF 3.6+
- baggrund - billede : - ms - lineær - gradient ( venstre , @startColor , @endColor ); // IE10
- baggrund - billede : - webkit - gradient ( lineær , venstre top , højre top , farve - stop ( 0 %, @startColor ), farve - stop ( 100 %, @ endColor )); // Safari 4+, Chrome 2+
- baggrund - billede : - webkit - lineær - gradient ( venstre , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- baggrund - billede : - o - lineær - gradient ( venstre , @ startColor , @ endColor ); // Opera 11.10
- baggrund - billede : lineær - gradient ( venstre , @startfarve , @ endColor ); // Le standard
- }
- . vertikal ( @startColor : #555, @endColor: #333) {
- baggrundsfarve : @endColor ; _ _
- baggrund - gentag : gentag - x ;
- baggrund - billede : - khtml - gradient ( lineær , venstre top , venstre bund , fra ( @startColor ), til ( @endColor )); // Konqueror
- baggrund - billede : - moz - lineær - gradient ( @startColor , @endColor ); // FF 3.6+
- baggrund - billede : - ms - lineær - gradient ( @startColor , @endColor ); // IE10
- baggrund - billede : - webkit - gradient ( lineær , venstre top , venstre bund , farve - stop ( 0 %, @startColor ), farve - stop ( 100 %, @ endColor )); // Safari 4+, Chrome 2+
- baggrund - billede : - webkit - lineær - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- baggrund - billede : lineær - gradient ( @startColor , @endColor ); // Standarden
- }
- . retningsbestemt ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . lodret - tre - farver ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Bliv fancy og udfør noget matematik for at generere fleksible og kraftfulde mixins som det nedenfor.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Grid System
- . container {
- width : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . kolonner ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- margin - venstre : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }