Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap ass e Toolkit vun Twitter entwéckelt fir d'Entwécklung vu Webapps a Site ze kickstart.
Et enthält Basis CSS an HTML fir Typographie, Formen, Knäppercher, Dëscher, Gitter, Navigatioun a méi.
Nerd Alarm: Bootstrap ass mat Manner gebaut a gouf entwéckelt fir aus dem Gate mat modernen Browser am Kapp ze schaffen.
Fir de schnellsten an einfachsten Start, kopéiert just dësen Ausschnëtt op Är Websäit.
E Fan vu manner ze benotzen? Kee Problem, klon just de Repo a füügt dës Zeilen derbäi:
Eroflueden, Gabel, Pull, Dateieprobleemer, a méi mam offiziellen Bootstrap Repo op Github.
Moment v1.3.0
Ingenieuren op Twitter hunn historesch bal all Bibliothéik benotzt, mat deenen se vertraut waren, fir Front-End Ufuerderunge z'erhalen. Bootstrap huet ugefaang als Äntwert op d'Erausfuerderungen déi virgestallt goufen. Mat der Hëllef vu ville genialen Leit ass Bootstrap wesentlech gewuess.
Liest méi op dev.twitter.com ›
Bootstrap gëtt getest an ënnerstëtzt a grousse modernen Browser wéi Chrome, Safari, Internet Explorer a Firefox.
Bootstrap kënnt komplett mat kompiléierten CSS, onkompiléierten a Beispill Templates.
De Standard Gittersystem, deen als Deel vum Bootstrap zur Verfügung gestallt gëtt, ass e 940px breet 16-Kolonn Gitter. Et ass e Goût vum populäre 960 Gittersystem, awer ouni zousätzlech Margin / Polsterung op der lénker a rietser Säit.
Wéi hei gewisen, kann e Basislayout erstallt ginn mat zwee "Säulen", déi all eng Zuel vun de 16 Fundamental Sailen iwwerspanen, déi mir als Deel vun eisem Gittersystem definéiert hunn. Kuckt d'Beispiller hei ënnen fir méi Variatiounen.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Nest Ären Inhalt wann Dir musst andeems Dir en .row
an enger existéierender Kolonn erstellt.
- <div class = "row" >
- <div class = "span12" >
- Niveau 1 vun der Kolonn
- <div class = "row" >
- <div class = "span6" >
- Niveau 2
- </div>
- <div class = "span6" >
- Niveau 2
- </div>
- </div>
- </div>
- </div>
Built a Bootstrap sinn eng Handvoll Variablen fir de Standard 940px Gittersystem ze personaliséieren. Mat e bësse Personnalisatioun kënnt Dir d'Gréisst vun de Sailen änneren, hir Rennen, an de Container an deem se wunnen.
D'Variabelen, déi néideg sinn fir de Gittersystem z'änneren, wunnen de Moment all an variables.less
.
Variabel | Default Wäert | Beschreiwung |
---|---|---|
@gridColumns |
16 | D'Zuel vun de Sailen am Gitter |
@gridColumnWidth |
40px | D'Breet vun all Kolonn am Gitter |
@gridGutterWidth |
20 px | Den negativen Raum tëscht all Kolonn |
@siteWidth |
Berechent Zomm vun alle Sailen a Rennen | Mir benotzen e puer grondleeënd Match fir d'Zuel vun de Sailen a Rennen ze zielen an d'Breet vum .fixed-container() Mixin ze setzen. |
D'Ännerung vum Gitter bedeit déi dräi @grid-*
Variabelen z'änneren an d'Minder Dateien nei ze kompiléieren.
Bootstrap kënnt equipéiert fir e Gittersystem mat bis zu 24 Sailen ze handhaben; den Default ass just 16. Hei ass wéi Är Gittervariablen ugepasst op e 24-Kolonne-Raster ausgesinn.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Eemol nei kompiléiert, sidd Dir agestallt!
De Standard an einfachen 940px-breet, zentréiert Layout fir bal all Websäit oder Säit vun enger eenzeger <div.container>
.
- <Kierper>
- <div class = "container" >
- ...
- </div>
- </body>
Eng alternativ, flexibel flësseg Säitstruktur mat min- a max-Breet an enger lénkser Sidebar. Super fir Apps an Dokumenter.
- <Kierper>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Eng Standard typographesch Hierarchie fir Är Websäiten ze strukturéieren.
De ganze typographesche Gitter baséiert op zwou Less Variablen an eiser Variables.less Datei: @basefont
an @baseline
. Déi éischt ass d'Basis Schrëftgréisst déi uechter benotzt gëtt an déi zweet ass d'Basislinn Héicht.
Mir benotzen dës Variabelen, an e puer Mathematik, fir d'Margen, Paddingen a Linnenhéichten vun all eisen Typen a méi ze kreéieren.
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.
Mat Schwéierpunkt, Adressen, & Ofkierzungen
<strong>
<em>
<address>
<abbr>
Schwéierpunkt Tags ( <strong>
an <em>
) solle benotzt ginn fir zousätzlech Wichtegkeet oder Schwéierpunkt vun engem Wuert oder Ausdrock relativ zu senger Ëmgéigend Kopie unzeginn. Benotzt <strong>
fir Wichtegkeet a <em>
fir Stress Akzenter.
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.
Bemierkung: Et ass nach ëmmer an der Rei ze benotzen <b>
an <i>
Tags an HTML5 a si mussen net fett respektiv kursiv styléiert ginn (och wann et e méi semantescht Element ass, benotzt et). <b>
ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen, wärend <i>
ass meeschtens fir Stëmm, technesch Begrëffer, etc.
D' <address>
Element gëtt fir Kontaktinformatioune fir säin nooste Vorfahren benotzt, oder de ganze Kierper vun der Aarbecht. Hei sinn zwee Beispiller vu wéi et benotzt ka ginn:
Bemierkung: All Zeil an engem <address>
muss mat engem Zeilbrek ( <br />
) ophalen oder an engem Block-Niveau Tag gewéckelt ginn (zB <p>
) fir den Inhalt richteg ze strukturéieren.
Fir Ofkierzungen an Akronyme benotzt den <abbr>
Tag ( <acronym>
ass an HTML5 ofgeschaaft ). Setzt de Shorthandform am Tag a set en Titel fir de kompletten Numm.
<blockquote>
<p>
<small>
Fir e Blockquote matzemaachen, wéckelen <blockquote>
an <p>
Tags <small>
. Benotzt d' <small>
Element fir Är Quell ze zitéieren an Dir kritt en Em Strich —
virun.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp Äre Code am Stil mat zwee einfachen Tags. Fir nach méi Awesomeness duerch Javascript, fällt de Google Code prettify Bibliothéik an Dir sidd ageriicht.
Code, Blocks vun oder just Snippets inline, kënne mat Stil ugewisen ginn andeems Dir de richtege Tag wéckelt. Fir Blocks vu Code déi méi Zeilen spanen, benotzt d' <pre>
Element. Fir Inline Code benotzt d' <code>
Element.
Element | Resultat |
---|---|
<code> |
An enger Zeil vun Text wéi dës wäert Äre gewéckelte Code wéi dëst <html> Element ausgesinn. |
<pre> |
<div> <h1>Rubrik</h1> <p>Eppes richteg hei...</p> </div> Notiz: Gitt sécher datt de Code bannent |
<pre class="prettyprint"> |
Mat der google-code-prettify Bibliothéik kréien Är Codeblocken e bëssen anere visuelle Stil an automatesch Syntax Highlight. <div> <h1> Iwwerschrëft </h1> <p> Eppes hei... </p> </div> Luet google-code-prettify erof a kuckt de Readme fir wéi Dir se benotzt. |
<span class="label">
Rufft Opmierksamkeet op oder markéiert all Ausdrock an Ärem Kierpertext.
Jeemools ee vun deenen ausgefalene Neie gebraucht! oder Wichteg Fändelen wann Dir Code schreift? Gutt, elo hutt Dir se. Hei ass wat als Standard abegraff ass:
Label | Resultat |
---|---|
<span class="label">Default</span> |
Default |
<span class="label success">New</span> |
Nei |
<span class="label warning">Warning</span> |
Warnung |
<span class="label important">Important</span> |
Wichteg |
<span class="label notice">Notice</span> |
Notiz |
Weist Miniaturbild vu verschiddene Gréissten op Säiten mat engem nidderegen HTML Foussofdrock a minimale Stiler.
Thumbnails an der .media-grid
kënnen all Gréisst sinn, awer si funktionnéieren am beschten wann se direkt op den agebaute Bootstrap Gittersystem kartéiert sinn. Bildbreeten wéi 90, 210 an 330 kombinéiere mat e puer Pixel Polsterung fir d' .span2
, .span4
, a Kolonngréissten ze gläichen .span6
.
Media Gitter sinn einfach ze benotzen an zimlech einfach op der Markup Säit. Hir Dimensiounen sinn reng baséiert op der Gréisst vun de Biller abegraff.
- <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>
Dëscher sinn super-fir vill Saachen. Grouss Dëscher brauchen awer e bësse Markup Léift fir nëtzlech, skalierbar a liesbar ze sinn (um Codeniveau). Hei sinn e puer Tipps fir ze hëllefen.
Wickelt ëmmer Är Kolonn Header an <thead>
esou datt d'Hierarchie <thead>
> <tr>
> ass <th>
.
Ähnlech wéi d'Kolonn Header, all Kierper Inhalt vun Ärem Dësch soll an engem gewéckelt ginn <tbody>
sou datt Är Hierarchie <tbody>
>> ass <tr>
.<td>
All Dëscher ginn automatesch mat nëmmen de wesentleche Grenzen stiléiert fir d'Liesbarkeet ze garantéieren an d'Struktur z'erhalen. Kee Grond fir extra Klassen oder Attributer ze addéieren.
# | Virnumm | Familljennumm | Sprooch |
---|---|---|---|
1 | E puer | Eent | Englesch |
2 | Joe | Sechs Pack | Englesch |
3 | Stu | Dent | Code |
- <tabell>
- ...
- </ Dësch>
Fir Dëscher déi méi Daten a méi enk Plazen erfuerderen, benotzt de kondenséierte Goût, deen d'Polsterung an d'Halschent schneit. Et kann och a Verbindung mat Grenzen an Zebrastreifen benotzt ginn, sou wéi d'Standard Dëschstiler.
# | Virnumm | Familljennumm | Sprooch |
---|---|---|---|
1 | E puer | Eent | Englesch |
2 | Joe | Sechs Pack | Englesch |
3 | Stu | Dent | Code |
Maacht Är Dëscher just e bësse méi slanker andeems se hir Ecker ronnen an Grenzen op all Säit bäisetzen.
# | Virnumm | Familljennumm | Sprooch |
---|---|---|---|
1 | E puer | Eent | Englesch |
2 | Joe | Sechs Pack | Englesch |
3 | Stu | Dent | Code |
- <table class = "bordered-table" >
- ...
- </ Dësch>
Gitt e bësse flott mat Ären Dëscher andeems Dir Zebrastreifen bäidréit - füügt just d' .zebra-striped
Klass dobäi.
# | Virnumm | Familljennumm | Sprooch |
---|---|---|---|
1 | E puer | Eent | Englesch |
2 | Joe | Sechs Pack | Englesch |
3 | Stu | Dent | Code |
span 4 Kolonnen | |||
span 2 Kolonnen | span 2 Kolonnen |
Notiz: Zebra-Sträifen ass eng progressiv Verbesserung net verfügbar fir eeler Browser wéi IE8 an drënner.
- <table class = "zebra gestreift" >
- ...
- </ Dësch>
Mir huelen dat viregt Beispill, mir verbesseren d'Nëtzlechkeet vun eisen Dëscher andeems Dir d'Sortéierungsfunktionalitéit iwwer jQuery an den Tablesorter Plugin ubitt. Klickt op all Kolonn Header fir d'Zort z'änneren.
# | Virnumm | Familljennumm | Sprooch |
---|---|---|---|
2 | Joe | Sechs Pack | Englesch |
3 | Stu | Dent | Code |
1 | Är | Eent | Englesch |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( Funktioun () {
- $ ( "Table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra gestreift" >
- ...
- </ Dësch>
All Forme kréien Standardstiler fir se op eng liesbar a skalierbar Manéier ze presentéieren. Stiler gi fir Textinputen zur Verfügung gestallt, wielt Lëschten, Textberäicher, Radioknäppercher a Checkboxen, a Knäppercher.
Füügt .form-stacked
den HTML vun Ärem Formulaire un an Dir hutt Etiketten uewen op hire Felder anstatt op der lénkser Säit. Dëst funktionnéiert super wann Är Forme kuerz sinn oder Dir hutt zwou Kolonnen vun Input fir méi schwéier Formen.
Passt all Form input
, select
, oder textarea
Breet un andeems Dir just e puer Klassen op Är Markup bäidréit.
Vun v1.3.0, hu mir d'Gitter-baséiert Gréisst Klassen fir Form Elementer dobäi. Benotzt w.e.g. dës iwwer déi bestehend .mini
, .small
, etc Klassen.
Als Konventioun gi Knäppercher fir Aktiounen benotzt, während Linke fir Objete benotzt ginn. Zum Beispill, "Download" kéint e Knäppchen sinn an "rezent Aktivitéit" kéint e Link sinn.
All Knäppercher Standard zu engem Liichtjoer gro Stil, mä eng Rei vun funktionell Klassen kann fir verschidde Faarf Stiler applizéiert ginn. Dës Klassen enthalen eng blo .primary
Klass, eng hellblo .info
Klass, eng gréng .success
Klass an eng rout .danger
Klass.
Knäppestiler kënnen op alles mat der .btn
ugewandter applizéiert ginn. Normalerweis wëllt Dir dës nëmmen op <a>
, <button>
, a wielt <input>
Elementer uwenden. Hei ass wéi et ausgesäit:
Loscht op méi grouss oder méi kleng Knäppercher? Maacht et!
Fir Knäppercher déi net aktiv sinn oder vun der App aus engem oder anere Grond behënnert sinn, benotzt den behënnerte Staat. Dat ass .disabled
fir Linken a :disabled
fir<button>
Elementer.
.alert-message
One-Line Messagen fir den Echec, méigleche Versoen oder Erfolleg vun enger Handlung ze markéieren. Besonnesch nëtzlech fir Formen.
- <div class = "Alert-Message Warnung" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Hellege Guacamole! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus. </p>
- </div>
.alert-message.block-message
Fir Messagen déi e bëssen Erklärung erfuerderen, hu mir Paragraphestil Alarmer. Dës si perfekt fir méi laang Fehlermeldungen ze sprëtzen, e Benotzer vun enger pendende Aktioun ze warnen, oder just Informatioun ze presentéieren fir méi Akzent op der Säit.
- <div class = "alarm-message block-message warnung" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Hellege Guacamole! Dëst ass eng Warnung! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alarm-actions" >
- <a class = "btn small" href = "#" > Maacht dës Aktioun </a> <a class = "btn small" href = "#" > Oder maacht dat </a>
- </div>
- </div>
Modale - Dialogen oder Lightboxen - si super fir kontextuell Handlungen a Situatiounen wou et wichteg ass datt den Hannergrondkontext erhale bleift.
Ee schéine Kierper ...
Twipsies si super nëtzlech fir engem duercherneen Benotzer ze hëllefen an se an déi richteg Richtung ze weisen.
Lorem ipsum dolar sit amet illo error 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
Benotzt Popovers fir subtextuell Informatioun op eng Säit ze liwweren ouni de Layout ze beaflossen.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
D'Integratioun vu Javascript mat der Bootstrap Bibliothéik ass super einfach. Hei drënner gi mir iwwer d'Basics a bidden Iech e puer fantastesch Plugins fir Iech unzefänken!
Bréngt e puer vun Bootstrap seng primär Komponenten zum Liewen mat neie personaliséierte Plugins déi mat jQuery an Ender funktionnéieren . Mir encouragéieren Iech se ze verlängeren an z'änneren fir Är spezifesch Entwécklungsbedierfnesser ze passen.
Fichier | Beschreiwung |
---|---|
bootstrap-modal.js | Eise Modal Plugin ass e super schlanken Take op den traditionelle Modal js Plugin! Mir hunn eis besonnesch opgepasst fir nëmmen déi blo Funktionalitéit ze enthalen déi mir op Twitter erfuerderen. |
bootstrap-alerts.js | Den Alarm Plugin ass eng super kleng Klass fir eng enk Funktionalitéit un Alarmer ze addéieren. |
bootstrap-dropdown.js | Dëse Plugin ass fir Dropdown Interaktioun op d'Bootstrap Topbar oder Tabbed Navigatioun ze addéieren. |
bootstrap-scrollspy.js | De ScrollSpy Plugin ass fir en Autoaktualiséierungsnav op Basis vun der Scrollpositioun op d'Bootstrap Topbar ze addéieren. |
bootstrap-buttons.js | De ScrollSpy Plugin ass fir en Autoaktualiséierungsnav op Basis vun der Scrollpositioun op d'Bootstrap Topbar ze addéieren. |
bootstrap-tabs.js | Dëse Plugin füügt séier, dynamesch Tab a Pille Funktionalitéit fir Vëlo duerch lokalen Inhalt. |
bootstrap-twipsy.js | Baséiert op der excellent jQuery.tipsy Plugin geschriwwen vum Jason Frame; twipsy ass eng aktualiséiert Versioun, déi net op Biller vertraut, css3 fir Animatiounen benotzt, an Datenattributer fir lokal Titellagerung! |
bootstrap-popover.js | De Popover Plugin bitt en einfachen Interface fir Popovers op Är Applikatioun ze addéieren. Et verlängert de boostrap-twipsy.js Plugin, also gitt sécher dës Datei och ze gräifen wann Dir Popovers an Ärem Projet enthält! |
Nee! Bootstrap ass als éischt entworf fir eng CSS Bibliothéik ze sinn. Dëst Javascript bitt eng Basis interaktiv Schicht uewen op déi abegraff Stiler.
Wéi och ëmmer, fir déi déi Javascript brauchen, hu mir d'Plugins hei uewen zur Verfügung gestallt fir Iech ze hëllefen ze verstoen wéi Dir Bootstrap mat Javascript integréiert an Iech eng séier, liicht Optioun fir d'Basisfunktionalitéit direkt ze ginn.
Fir méi Informatioun a fir e puer Live Demos ze gesinn, kuckt w.e.g. op eis Plugin Dokumentatioun Säit .
Bootstrap gouf aus Preboot gebaut , en Open-Source Pack vu Mixins a Variablen fir a Verbindung mat Less ze benotzen , e CSS Preprocessor fir méi séier a méi einfach Webentwécklung.
Kuckt wéi mir Preboot am Bootstrap benotzt hunn a wéi Dir et benotze kënnt wann Dir wielt manner op Ärem nächste Projet ze lafen.
Benotzt dës Optioun fir voll Notzung vu Bootstrap's Less Variablen, Mixins, an Nesting an CSS iwwer Javascript an Ärem Browser ze maachen.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Net Gefill der .js Léisung? Probéiert d'Manner Mac App oder benotzt Node.js fir ze kompiléieren wann Dir Äre Code ofsetzt.
Hei sinn e puer vun den Highlights vun deem wat am Twitter Bootstrap als Deel vu Bootstrap abegraff ass. Gitt op d'Bootstrap Websäit oder Github Projet Säit fir erofzelueden a méi ze léieren.
Variablen a manner si perfekt fir Är CSS Kappwéi gratis z'erhalen an ze aktualiséieren. Wann Dir e Faarfwäert oder e dacks benotzte Wäert wëllt änneren, aktualiséieren se op enger Plaz an Dir sidd agestallt.
- // Linken
- @linkColor : #8b59c2;
- @linkColorHover : däischter ( @linkColor , 10 );
- // Greis
- @schwaarz : #000;
- @grayDark : hellen ( @black , 25 %);
- @gray : hellen ( @black , 50 %);
- @grayLight : hellen ( @black , 70 %);
- @grayLighter : hellen ( @black , 90 %);
- @wäiss : #fff;
- // Akzent Faarwen
- @blo : #08b5fb;
- @gréng : #46a546;
- @rout : #9d261d;
- @giel : #ffc40d;
- @orange : #f89406;
- @rosa : #c3325f;
- @violett : #7a43b6;
- // Baseline Gitter
- @basefont : 13px ;
- @baseline : 18px ;
Manner bitt och en anere Stil vu Kommentaren zousätzlech zu der normaler /* ... */
Syntax vun CSS.
- // Dëst ass e Kommentar
- /* Dëst ass och e Kommentar */
Mixins si grondsätzlech abegraff oder Deeler fir CSS, wat Iech erlaabt e Block vu Code an een ze kombinéieren. Si si super fir Verkeefer Präfix Eegeschafte wéibox-shadow
, Cross-Browser Gradienten, Schrëftstack a méi. Drënner ass eng Probe vun de Mixins déi mat Bootstrap abegraff sinn.
- #font {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- Schrëftgréisst : @ Gréisst ; _
- Schrëft - Gewiicht : @gewiicht ;
- line - Héicht : @lineHeight ;
- }
- . sans - serif ( @gewiicht : normal , @ Gréisst : 14px , @lineHeight : 20 px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- Schrëftgréisst : @ Gréisst ; _
- Schrëft - Gewiicht : @gewiicht ;
- line - Héicht : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . vertikal ( @startColor : #555, @endColor: #333) {
- Hannergrond - Faarf : @endColor ;
- Hannergrond - widderhuelen : widderhuelen - x ;
- Hannergrond - Bild : - khtml - Gradient ( linear , lénks uewen , lénks ënnen , vun ( @startColor ), op ( @endColor )); // Konqueror
- Hannergrond - Bild : - moz - linear - Gradient ( @startColor , @endColor ); // FF 3.6+
- Hannergrond - Bild : - ms - linear - Gradient ( @startColor , @endColor ); // IE10
- Hannergrond - Bild : - webkit - Gradient ( linear , lénks uewen , lénks ënnen , Faarf - stoppen ( 0 %, @startColor ), Faarf - stoppen ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- Hannergrond - Bild : - webkit - linear - Gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- Hannergrond - Bild : -o - linear - Gradient ( @startColor , @endColor ) ; // Opera 11.10
- Hannergrond - Bild : linear - Gradient ( @startColor , @endColor ); // Norm
- }
- ...
- }
Maacht Iech flott a maacht e bësse Mathematik fir flexibel a mächteg Mixins ze generéieren wéi déi hei ënnen.
- // Gitter
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Maacht e puer Kolonnen
- . Kolonnen ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Nodeems Dir d' .less
Dateien an /lib/ geännert hutt, musst Dir se nei kompiléieren fir d'Bootstrap-*.*.*.css a Bootstrap-*.*.*.min.css Dateien ze regeneréieren. Wann Dir eng Pull-Ufro op GitHub ofgitt, musst Dir ëmmer nei kompiléieren.
Method | Schrëtt |
---|---|
Node mat Makefile | Installéiert de manner Kommandozeil Compiler mat npm andeems Dir de folgende Kommando ausféiert: $ npm installéieren lessc Eemol installéiert, lafen einfach Zousätzlech, wann Dir Watchr installéiert hutt, kënnt Dir lafen |
Javascript | Luet déi lescht Less.js erof an enthält de Wee dohinner (a Bootstrap) an der
Fir d'.less Dateien nei ze kompiléieren, späichert se einfach a lued Är Säit nei. Less.js kompiléiert se a späichert se an der lokaler Späichere. |
Kommando Linn | Wann Dir schonn de manner Kommandozeil Tool installéiert hutt, fuert einfach de folgende Kommando aus: $ lessc ./lib/bootstrap.less > bootstrap.css Gitt sécher datt Dir |
Manner Mac App | Déi inoffiziell Mac App kuckt Verzeechnes vun .less Dateien a kompiléiert de Code op lokal Dateien no all Späichere vun enger iwwerwaachter .less Datei. Wann Dir wëllt, kënnt Dir Virléiften an der App wiesselen fir automatesch Minifizéierung a wéi engem Verzeichnis déi kompiléiert Dateien ophalen. |