Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum bij eros.
Bootstrap is een toolkit van Twitter die is ontworpen om de ontwikkeling van webapps en sites een kickstart te geven.
Het bevat basis-CSS en HTML voor typografie, formulieren, knoppen, tabellen, rasters, navigatie en meer.
Nerd-waarschuwing: Bootstrap is gebouwd met Less en is ontworpen om out-of-the-gate te werken met moderne browsers in gedachten.
Kopieer dit fragment naar uw webpagina voor de snelste en gemakkelijkste start.
Een fan van het gebruik van Less? Geen probleem, kloon gewoon de repo en voeg deze regels toe:
Download, fork, pull, bestandsproblemen en meer met de officiële Bootstrap-repo op Github.
Momenteel v1.3.0
Ingenieurs bij Twitter hebben in het verleden bijna elke bibliotheek gebruikt die ze kenden om aan de front-endvereisten te voldoen. Bootstrap begon als een antwoord op de uitdagingen die zich voordeden. Met de hulp van veel geweldige mensen is Bootstrap aanzienlijk gegroeid.
Lees meer op dev.twitter.com ›
Bootstrap is getest en ondersteund in de belangrijkste moderne browsers zoals Chrome, Safari, Internet Explorer en Firefox.
Bootstrap wordt compleet geleverd met gecompileerde CSS, niet-gecompileerde en voorbeeldsjablonen.
Het standaardrastersysteem dat wordt geleverd als onderdeel van Bootstrap is een 940px breed raster met 16 kolommen. Het is een smaak van het populaire 960-rastersysteem, maar zonder de extra marge/opvulling aan de linker- en rechterkant.
Zoals hier wordt getoond, kan een basislay-out worden gemaakt met twee "kolommen", die elk een aantal van de 16 fundamentele kolommen beslaan die we hebben gedefinieerd als onderdeel van ons rastersysteem. Zie de voorbeelden hieronder voor meer variaties.
- <div class = "rij" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Nest uw inhoud indien nodig door een .row
in een bestaande kolom te maken.
- <div class = "rij" >
- <div class = "span12" >
- Niveau 1 van kolom
- <div class = "rij" >
- <div class = "span6" >
- Level 2
- </div>
- <div class = "span6" >
- Level 2
- </div>
- </div>
- </div>
- </div>
In Bootstrap zijn een handvol variabelen ingebouwd voor het aanpassen van het standaard 940px-rastersysteem. Met een beetje maatwerk kunt u de grootte van kolommen, hun dakgoten en de container waarin ze zich bevinden, wijzigen.
De variabelen die nodig zijn om het rastersysteem te wijzigen, bevinden zich momenteel allemaal in variables.less
.
Variabele | Standaardwaarde | Beschrijving |
---|---|---|
@gridColumns |
16 | Het aantal kolommen in het raster |
@gridColumnWidth |
40px | De breedte van elke kolom in het raster |
@gridGutterWidth |
20px | De negatieve ruimte tussen elke kolom |
@siteWidth |
Berekende som van alle kolommen en goten | We gebruiken een basisovereenkomst om het aantal kolommen en goten te tellen en de breedte van de .fixed-container() mixin in te stellen. |
Het wijzigen van het raster betekent het wijzigen van de drie @grid-*
variabelen en het opnieuw compileren van de Less-bestanden.
Bootstrap is uitgerust om een rastersysteem met maximaal 24 kolommen aan te kunnen; de standaard is slechts 16. Hier ziet u hoe uw rastervariabelen eruit zouden zien als ze zijn aangepast aan een raster met 24 kolommen.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Eenmaal opnieuw gecompileerd, bent u klaar!
De standaard en eenvoudige 940px-brede, gecentreerde lay-out voor zowat elke website of pagina die door een enkele <div.container>
.
- <lichaam>
- <div class = "container" >
- ...
- </div>
- </body>
Een alternatieve, flexibele, vloeiende paginastructuur met min- en max-breedten en een linkerzijbalk. Geweldig voor apps en documenten.
- <lichaam>
- <div class = "containervloeistof" >
- <div class = "zijbalk" >
- ...
- </div>
- <div class = "inhoud" >
- ...
- </div>
- </div>
- </body>
Een standaard typografische hiërarchie voor het structureren van uw webpagina's.
Het hele typografische raster is gebaseerd op twee Less-variabelen in ons bestand variables.less: @basefont
en @baseline
. De eerste is de basislettergrootte die overal wordt gebruikt en de tweede is de basisregelhoogte.
We gebruiken die variabelen, en wat wiskunde, om de marges, opvullingen en regelhoogtes van al ons type en meer te maken.
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.
Nadruk, adressen en afkortingen gebruiken
<strong>
<em>
<address>
<abbr>
Nadruktags ( <strong>
en <em>
) moeten worden gebruikt om het extra belang of de nadruk van een woord of zinsdeel ten opzichte van de omringende kopie aan te geven. Gebruik <strong>
voor belangrijkheid en <em>
voor nadruk op 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, een pharetra augue.
Opmerking: het is nog steeds goed om <b>
en <i>
tags in HTML5 te gebruiken en ze hoeven niet respectievelijk vet en cursief te zijn (hoewel als er een meer semantisch element is, gebruik het dan). <b>
is bedoeld om woorden of zinsdelen te markeren zonder extra belang over te brengen, terwijl <i>
het meestal is voor stem, technische termen, enz.
Het <address>
element wordt gebruikt voor contactgegevens voor de naaste voorouder of het hele oeuvre. Hier zijn twee voorbeelden van hoe het kan worden gebruikt:
Opmerking: elke regel in een <address>
moet eindigen met een regeleinde ( <br />
) of worden ingepakt in een tag op blokniveau (bijv. <p>
) om de inhoud goed te structureren.
Gebruik voor afkortingen en acroniemen de <abbr>
tag ( <acronym>
is verouderd in HTML5 ). Plaats het stenoformulier in de tag en stel een titel in voor de volledige naam.
<blockquote>
<p>
<small>
Om een blockquote op te nemen, wrap <blockquote>
around <p>
en <small>
tags. Gebruik het <small>
element om je bron te citeren en je krijgt er een em-streepje —
voor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
- <blokquote>
- <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 je code in stijl met twee simpele tags. Voor nog meer awesomeness door middel van javascript, drop in Google's code mooier bibliotheek en je bent klaar.
Code, blokken of alleen fragmenten inline, kunnen met stijl worden weergegeven door de juiste tag in te pakken. <pre>
Gebruik het element voor codeblokken die meerdere regels overspannen . Gebruik voor inline code het <code>
element.
Element | Resultaat |
---|---|
<code> |
In een tekstregel als deze ziet uw ingepakte code eruit als dit <html> element. |
<pre> |
<div> <h1>Kop</h1> <p>Iets hier...</p> </div> Opmerking: zorg ervoor dat u de code binnen |
<pre class="prettyprint"> |
Met behulp van de google-code-prettify-bibliotheek krijgen uw codeblokken een iets andere visuele stijl en automatische syntaxisaccentuering. <div> <h1> Kop </h1> <p> Iets hier... </p> </div> Download google-code-prettify en bekijk de readme voor gebruik. |
<span class="label">
Vestig de aandacht op of markeer een zin in uw hoofdtekst.
Ooit een van die fancy New nodig gehad! of Belangrijke vlaggen bij het schrijven van code? Nou, nu heb je ze. Dit is wat er standaard is inbegrepen:
Label | Resultaat |
---|---|
<span class="label">Default</span> |
Standaard |
<span class="label success">New</span> |
Nieuw |
<span class="label warning">Warning</span> |
Waarschuwing |
<span class="label important">Important</span> |
Belangrijk |
<span class="label notice">Notice</span> |
Merk op |
Geef miniaturen van verschillende formaten weer op pagina's met een lage HTML-voetafdruk en minimale stijlen.
Miniaturen in de .media-grid
kunnen elke grootte hebben, maar ze werken het beste wanneer ze rechtstreeks worden toegewezen aan het ingebouwde Bootstrap-rastersysteem. Afbeeldingsbreedten zoals 90, 210 en 330 worden gecombineerd met een paar pixels opvulling om de kolomgrootten .span2
, .span4
, en te evenaren..span6
Mediarasters zijn gemakkelijk te gebruiken en vrij eenvoudig aan de kant van de opmaak. Hun afmetingen zijn puur gebaseerd op de grootte van de opgenomen afbeeldingen.
- <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>
Tafels zijn geweldig - voor veel dingen. Geweldige tabellen hebben echter een beetje opmaakliefde nodig om nuttig, schaalbaar en leesbaar te zijn (op codeniveau). Hier zijn een paar tips om te helpen.
Wikkel uw kolomkoppen altijd <thead>
zo in dat de hiërarchie <thead>
> <tr>
> is <th>
.
Net als bij de kolomkoppen, moet alle hoofdtekst van uw tabel in een a worden verpakt, <tbody>
zodat uw hiërarchie <tbody>
> <tr>
> is <td>
.
Alle tabellen worden automatisch opgemaakt met alleen de essentiële randen om de leesbaarheid te garanderen en de structuur te behouden. Het is niet nodig om extra klassen of attributen toe te voegen.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
- <tafel>
- ...
- </table>
Voor tabellen waarvoor meer gegevens in krappere ruimtes nodig zijn, gebruikt u de gecondenseerde smaak die de opvulling in tweeën snijdt. Het kan ook worden gebruikt in combinatie met randen en zebrastrepen, net als de standaard tabelstijlen.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
Laat je tafels er net iets strakker uitzien door de hoeken af te ronden en aan alle kanten randen toe te voegen.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
- <table class = "bordered-table" >
- ...
- </table>
Geef je tafels een beetje luxe door zebrastrepen toe te voegen - voeg gewoon de .zebra-striped
klasse toe.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
overspannen 4 kolommen | |||
overspannen 2 kolommen | overspannen 2 kolommen |
Opmerking: Zebra-striping is een progressieve verbetering die niet beschikbaar is voor oudere browsers zoals IE8 en lager.
- <table class = "zebra-gestreept" >
- ...
- </table>
Door het vorige voorbeeld te nemen, verbeteren we de bruikbaarheid van onze tabellen door sorteerfunctionaliteit te bieden via jQuery en de Tablesorter- plug-in. Klik op de kop van een kolom om de sortering te wijzigen.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
1 | Uw | Een | Engels |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( functie () {
- $ ( "tabel#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-gestreept" >
- ...
- </table>
Alle formulieren krijgen standaardstijlen om ze op een leesbare en schaalbare manier te presenteren. Er zijn stijlen beschikbaar voor tekstinvoer, selectielijsten, tekstgebieden, keuzerondjes en selectievakjes en knoppen.
Voeg toe .form-stacked
aan de HTML van je formulier en je hebt labels bovenaan hun velden in plaats van links. Dit werkt prima als je formulieren kort zijn of als je twee kolommen met invoer hebt voor zwaardere formulieren.
Pas elke vorm input
, select
, of textarea
breedte aan door slechts een paar klassen aan uw opmaak toe te voegen.
Vanaf v1.3.0 hebben we de op rasters gebaseerde grootteklassen voor formulierelementen toegevoegd. Gebruik deze over de bestaande .mini
, .small
, etc klassen.
Als conventie worden knoppen gebruikt voor acties, terwijl links worden gebruikt voor objecten. 'Download' kan bijvoorbeeld een knop zijn en 'recente activiteit' kan een link zijn.
Alle knoppen hebben standaard een lichtgrijze stijl, maar er kunnen een aantal functionele klassen worden toegepast voor verschillende kleurstijlen. Deze klassen omvatten een blauwe .primary
klasse, een lichtblauwe .info
klasse, een groene .success
klasse en een rode .danger
klasse.
Knopstijlen kunnen worden toegepast op alles met de .btn
toegepaste. Meestal wilt u deze alleen toepassen op <a>
, <button>
, en geselecteerde <input>
elementen. Hier is hoe het eruit ziet:
Zin in grotere of kleinere knopen? Probeer maar!
Gebruik de uitgeschakelde status voor knoppen die niet actief zijn of om de een of andere reden door de app zijn uitgeschakeld. Dat is .disabled
voor links en :disabled
voor <button>
elementen.
.alert-message
Berichten in één regel om de mislukking, mogelijke mislukking of het succes van een actie te markeren. Vooral handig voor formulieren.
- <div class = "alert-bericht waarschuwing" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Heilige guacamole! </strong> Kijk zelf maar, je ziet er niet al te best uit. </p>
- </div>
.alert-message.block-message
Voor berichten die een beetje uitleg nodig hebben, hebben we waarschuwingen voor alineastijlen. Deze zijn perfect voor het opborrelen van langere foutmeldingen, het waarschuwen van een gebruiker voor een lopende actie of het presenteren van informatie om meer nadruk op de pagina te leggen.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Heilige guacamole! Dit is een waarschuwing! </strong> Kijk zelf maar, je ziet er niet al te best uit. Nulla vitae elit libero, een pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Onderneem deze actie </a> <a class = "btn small" href = "#" > Of doe dit </a>
- </div>
- </div>
Modals - dialoogvensters of lightboxes - zijn geweldig voor contextuele acties in situaties waarin het belangrijk is dat de achtergrondcontext behouden blijft.
Een fijn lichaam…
Twipsies zijn super handig om een verwarde gebruiker te helpen en in de goede richting te wijzen.
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 voluptatum 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 dicta quae quae cumsantium fugit nemo voluptas .
Gebruik popovers om subtekstuele informatie aan een pagina te geven zonder de lay-out te beïnvloeden.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum bij eros.
Het integreren van javascript met de Bootstrap-bibliotheek is supereenvoudig. Hieronder bespreken we de basisprincipes en bieden we u een aantal geweldige plug-ins om u op weg te helpen!
Breng enkele van de primaire componenten van Bootstrap tot leven met nieuwe aangepaste plug-ins die werken met jQuery en Ender . We moedigen u aan om ze uit te breiden en aan te passen aan uw specifieke ontwikkelingsbehoeften.
Bestand | Beschrijving |
---|---|
bootstrap-modal.js | Onze Modal-plug-in is een superslanke versie van de traditionele modale js-plug-in! We hebben er speciaal op gelet om alleen de kale functionaliteit op te nemen die we op twitter nodig hebben. |
bootstrap-alerts.js | De waarschuwingsplug-in is een superkleine klasse voor het toevoegen van close-functionaliteit aan waarschuwingen. |
bootstrap-dropdown.js | Deze plug-in is voor het toevoegen van dropdown-interactie aan de bootstrap-bovenbalk of navigatie met tabbladen. |
bootstrap-scrollspy.js | De ScrollSpy-plug-in is voor het toevoegen van een automatisch bijgewerkte navigatie op basis van de schuifpositie aan de bootstrap-topbalk. |
bootstrap-buttons.js | De ScrollSpy-plug-in is voor het toevoegen van een automatisch bijgewerkte navigatie op basis van de schuifpositie aan de bootstrap-topbalk. |
bootstrap-tabs.js | Deze plug-in voegt snelle, dynamische tab- en pilfunctionaliteit toe om door lokale inhoud te bladeren. |
bootstrap-twipsy.js | Gebaseerd op de uitstekende jQuery.tipsy-plug-in geschreven door Jason Frame; twipsy is een bijgewerkte versie, die niet afhankelijk is van afbeeldingen, css3 gebruikt voor animaties en data-attributen voor lokale titelopslag! |
bootstrap-popover.js | De popover-plug-in biedt een eenvoudige interface voor het toevoegen van popovers aan uw toepassing. Het breidt de boostrap-twipsy.js- plug-in uit, dus zorg ervoor dat u dat bestand ook pakt wanneer u popovers in uw project opneemt! |
Nee! Bootstrap is in de eerste plaats ontworpen als een CSS-bibliotheek. Dit javascript biedt een interactieve basislaag bovenop de meegeleverde stijlen.
Voor degenen die javascript wel nodig hebben, hebben we de bovenstaande plug-ins geleverd om u te helpen begrijpen hoe u Bootstrap met javascript kunt integreren en om u meteen een snelle, lichtgewicht optie voor de basisfunctionaliteit te geven.
Raadpleeg voor meer informatie en om enkele live demo's te zien onze pagina met plug-insdocumentatie .
Bootstrap is gebouwd op basis van Preboot , een open-sourcepakket met mixins en variabelen om te gebruiken in combinatie met Less , een CSS-preprocessor voor snellere en eenvoudigere webontwikkeling.
Bekijk hoe we Preboot in Bootstrap hebben gebruikt en hoe u er gebruik van kunt maken als u ervoor kiest om Less op uw volgende project uit te voeren.
Gebruik deze optie om volledig gebruik te maken van Bootstrap's Less-variabelen, mixins en nesting in CSS via javascript in uw browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Voel je de .js-oplossing niet? Probeer de Less Mac-app of gebruik Node.js om te compileren wanneer u uw code implementeert.
Hier zijn enkele van de hoogtepunten van wat is opgenomen in Twitter Bootstrap als onderdeel van Bootstrap. Ga naar de Bootstrap-website of Github-projectpagina om te downloaden en meer te leren.
Variabelen in Less zijn perfect om uw CSS hoofdpijnvrij te onderhouden en bij te werken. Als u een kleurwaarde of een veelgebruikte waarde wilt wijzigen, werkt u deze op één plek bij en bent u klaar.
- // Links
- @linkColor : #8b59c2;
- @linkColorHover : donkerder maken ( @linkColor , 10 );
- // Grijzen
- @zwart : #000;
- @grayDark : lichter maken ( @black , 25 %);
- @grijs : lichter maken ( @zwart , 50 %);
- @grayLight : lichter maken ( @black , 70 %);
- @grayLighter : lichter maken ( @black , 90 %);
- @wit : #fff;
- // Accentkleuren
- @blauw : #08b5fb;
- @groen : #46a546;
- @rood : #9d261d;
- @geel : #ffc40d;
- @oranje : #f89406;
- @roze : #c3325f;
- @paars : #7a43b6;
- // Basislijnraster
- @basefont : 13px ;
- @basislijn : 18px ;
Less biedt naast de normale /* ... */
syntaxis van CSS ook een andere stijl van commentaar.
- // Dit is een reactie
- /* Dit is ook een opmerking */
Mixins zijn in feite inclusief of gedeeltelijke onderdelen voor CSS, waardoor je een codeblok tot één blok kunt combineren. Ze zijn geweldig voor vooraf ingestelde eigenschappen van leveranciers, zoals box-shadow
, cross-browser verlopen, font-stacks en meer. Hieronder vindt u een voorbeeld van de mixins die bij Bootstrap worden geleverd.
- #lettertype {
- . steno ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- lettergrootte : @grootte ; _ _
- lettertype - gewicht : @weight ;
- regelhoogte : @lineHeight ; _ _
- }
- . schreefloos ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _ _
- font - familie : " Helvetica Neue " , Helvetica , Arial , schreefloos ;
- lettergrootte : @grootte ; _ _
- lettertype - gewicht : @weight ;
- regelhoogte : @lineHeight ; _ _
- }
- ...
- }
- #gradiënt {
- ...
- . verticaal ( @startColor : #555, @endColor: #333) {
- achtergrondkleur : @endColor ; _ _
- achtergrond - herhalen : herhalen - x ;
- background - image : - khtml - verloop ( lineair , links boven , links onder , van ( @startColor ), naar ( @endColor )); // Konqueror
- achtergrond - afbeelding : - moz - lineair - verloop ( @startColor , @endColor ); // FF 3.6+
- achtergrond - afbeelding : - ms - lineair - verloop ( @startColor , @endColor ); // IE10
- achtergrond - afbeelding : - webkit - verloop ( lineair , links boven , links onder , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- achtergrond - afbeelding : - webkit - lineair - verloop ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- achtergrond - afbeelding : - o - lineair - verloop ( @startColor , @endColor ); // Opera 11.10
- achtergrond - afbeelding : lineair - verloop ( @startColor , @endColor ); // De standaard
- }
- ...
- }
Word fantasie en voer wat wiskunde uit om flexibele en krachtige mixins te genereren zoals die hieronder.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Maak enkele kolommen
- . kolommen ( @columnSpan : 1 ) {
- breedte : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Nadat u de .less
bestanden in /lib/ hebt gewijzigd, moet u ze opnieuw compileren om de bestanden bootstrap-*.*.*.css en bootstrap-*.*.*.min.css opnieuw te genereren. Als u een pull-verzoek indient bij GitHub, moet u altijd opnieuw compileren.
Methode | Stappen |
---|---|
Knooppunt met makefile | Installeer de less command line compiler met npm door de volgende opdracht uit te voeren: $ npm installatie minder Eenmaal geïnstalleerd, ren je gewoon Bovendien, als je watchr hebt geïnstalleerd, kun je ervoor |
Javascript | Download de nieuwste Less.js en voeg het pad ernaar toe (en Bootstrap) in het
Om de .less-bestanden opnieuw te compileren, hoeft u ze alleen maar op te slaan en uw pagina opnieuw te laden. Less.js compileert ze en slaat ze op in lokale opslag. |
Opdrachtregel | Als u de minder opdrachtregeltool al hebt geïnstalleerd, voert u eenvoudig de volgende opdracht uit: $ lessc ./lib/bootstrap.less > bootstrap.css Zorg ervoor dat u |
Minder Mac-app | De onofficiële Mac-app bekijkt mappen met .less-bestanden en compileert de code naar lokale bestanden na elke opslag van een bekeken .less-bestand. Als je wilt, kun je in de app de voorkeuren omschakelen voor automatische verkleining en in welke map de gecompileerde bestanden terechtkomen. |