Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap ist ein Toolkit von Twitter, das entwickelt wurde, um die Entwicklung von Webapps und Websites anzukurbeln.
Es enthält Basis-CSS und HTML für Typografie, Formulare, Schaltflächen, Tabellen, Raster, Navigation und mehr.
Nerd-Alarm: Bootstrap wurde mit Less erstellt und wurde entwickelt, um mit modernen Browsern von Anfang an zu funktionieren.
Für den schnellsten und einfachsten Start kopieren Sie einfach dieses Snippet in Ihre Webseite.
Ein Fan von Less? Kein Problem, klonen Sie einfach das Repo und fügen Sie diese Zeilen hinzu:
Herunterladen, Forken, Pullen, Dateiprobleme und mehr mit dem offiziellen Bootstrap-Repo auf Github.
Derzeit v1.3.0
Ingenieure bei Twitter haben in der Vergangenheit fast jede Bibliothek verwendet, mit der sie vertraut waren, um Front-End-Anforderungen zu erfüllen. Bootstrap begann als Antwort auf die Herausforderungen, die sich stellten. Mit der Hilfe vieler großartiger Leute ist Bootstrap erheblich gewachsen.
Lesen Sie mehr auf dev.twitter.com ›
Bootstrap wurde in den wichtigsten modernen Browsern wie Chrome, Safari, Internet Explorer und Firefox getestet und unterstützt.
Bootstrap wird komplett mit kompiliertem CSS, unkompiliertem und Beispielvorlagen geliefert.
Das standardmäßige Rastersystem, das als Teil von Bootstrap bereitgestellt wird, ist ein 940 Pixel breites 16-Spalten-Raster. Es ist eine Variante des beliebten 960-Gittersystems, aber ohne den zusätzlichen Rand/Padding auf der linken und rechten Seite.
Wie hier gezeigt, kann ein Grundlayout mit zwei "Säulen" erstellt werden, die jeweils eine Anzahl der 16 Grundsäulen überspannen, die wir als Teil unseres Rastersystems definiert haben. Weitere Variationen finden Sie in den Beispielen unten.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Verschachteln Sie Ihre Inhalte, wenn Sie müssen, indem Sie eine .row
innerhalb einer vorhandenen Spalte erstellen.
- <div class = "row" >
- <div class = "span12" >
- Ebene 1 der Spalte
- <div class = "row" >
- <div class = "span6" >
- Level 2
- </div>
- <div class = "span6" >
- Level 2
- </div>
- </div>
- </div>
- </div>
In Bootstrap sind eine Handvoll Variablen zum Anpassen des standardmäßigen 940-Pixel-Rastersystems integriert. Mit ein wenig Anpassung können Sie die Größe der Spalten, ihrer Dachrinnen und des Containers, in dem sie sich befinden, ändern.
Die Variablen, die benötigt werden, um das Grid-System zu modifizieren, befinden sich derzeit alle in variables.less
.
Variable | Standardwert | Beschreibung |
---|---|---|
@gridColumns |
16 | Die Anzahl der Spalten innerhalb des Rasters |
@gridColumnWidth |
40px | Die Breite jeder Spalte innerhalb des Rasters |
@gridGutterWidth |
20px | Das negative Leerzeichen zwischen jeder Spalte |
@siteWidth |
Berechnete Summe aller Spalten und Stege | Wir verwenden einige grundlegende Übereinstimmungen, um die Anzahl der Spalten und Bundstege zu zählen und die Breite des .fixed-container() Mixins festzulegen. |
Das Ändern des Rasters bedeutet, die drei @grid-*
Variablen zu ändern und die Less-Dateien neu zu kompilieren.
Bootstrap ist so ausgestattet, dass es ein Grid-System mit bis zu 24 Spalten handhaben kann; der Standardwert ist nur 16. So würden Ihre Rastervariablen aussehen, wenn sie an ein 24-Spalten-Raster angepasst würden.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Einmal neu kompiliert, sind Sie fertig!
Das standardmäßige und einfache 940 Pixel breite, zentrierte Layout für nahezu jede Website oder Seite, das von einer einzigen <div.container>
.
- <Körper>
- <div class = "container" >
- ...
- </div>
- </body>
Eine alternative, flexible, fließende Seitenstruktur mit Min- und Max-Breiten und einer linken Seitenleiste. Ideal für Apps und Dokumente.
- <Körper>
- <div class = "container-fluid" >
- <div class = "Seitenleiste" >
- ...
- </div>
- <div class = "inhalt" >
- ...
- </div>
- </div>
- </body>
Eine typografische Standardhierarchie zum Strukturieren Ihrer Webseiten.
Das gesamte typografische Raster basiert auf zwei Less-Variablen in unserer variables.less-Datei: @basefont
und @baseline
. Die erste ist die durchgehend verwendete Grundschriftgröße und die zweite die Grundzeilenhöhe.
Wir verwenden diese Variablen und etwas Mathematik, um die Ränder, Auffüllungen und Zeilenhöhen aller unserer Typen und mehr zu erstellen.
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.
Verwendung von Hervorhebungen, Adressen und Abkürzungen
<strong>
<em>
<address>
<abbr>
Hervorhebungs-Tags ( <strong>
und <em>
) sollten verwendet werden, um zusätzliche Wichtigkeit oder Betonung eines Wortes oder Satzes relativ zu seiner umgebenden Kopie anzuzeigen. Verwenden Sie es für <strong>
Wichtigkeit und Betonung .<em>
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, ein pharetra augue.
Hinweis: Es ist immer noch in Ordnung, Tags und in HTML5 zu verwenden, <b>
und <i>
sie müssen nicht fett bzw. kursiv formatiert werden (obwohl es ein semantischeres Element gibt, verwenden Sie es). <b>
ist dazu gedacht, Wörter oder Phrasen hervorzuheben, ohne zusätzliche Bedeutung zu vermitteln, während <i>
es hauptsächlich für Sprache, Fachbegriffe usw.
Das <address>
Element wird für Kontaktinformationen für seinen nächsten Vorfahren oder das gesamte Werk verwendet. Hier sind zwei Beispiele, wie es verwendet werden könnte:
Hinweis: Jede Zeile in einem <address>
muss mit einem Zeilenumbruch ( <br />
) enden oder in ein Tag auf Blockebene (z. B. <p>
) umbrochen werden, um den Inhalt richtig zu strukturieren.
Verwenden Sie für Abkürzungen und Akronyme das <abbr>
Tag ( ist in HTML5<acronym>
veraltet ). Fügen Sie die Kurzform in das Tag ein und legen Sie einen Titel für den vollständigen Namen fest.
<blockquote>
<p>
<small>
Um ein Blockzitat einzufügen, wickeln Sie es <blockquote>
um <p>
und markieren Sie es <small>
. Verwenden Sie das <small>
Element, um Ihre Quelle zu zitieren, und Sie erhalten einen Em-Bindestrich —
davor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
- <Blockzitat>
- <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>
Pimpen Sie Ihren Code stilvoll mit zwei einfachen Tags. Für noch mehr Großartigkeit durch Javascript, legen Sie die Code Prettify-Bibliothek von Google ab und schon sind Sie fertig.
Code, Blöcke oder nur Snippets inline können mit Stil angezeigt werden, indem einfach das richtige Tag eingefügt wird. Verwenden Sie für Codeblöcke, die sich über mehrere Zeilen erstrecken, das <pre>
Element. Verwenden Sie für Inline-Code das <code>
Element.
Element | Ergebnis |
---|---|
<code> |
In einer Textzeile wie dieser sieht Ihr umschlossener Code wie dieses <html> Element aus. |
<pre> |
<div> <h1>Überschrift</h1> <p>Irgendetwas hier...</p> </div> Hinweis: Achten Sie darauf, den Code innerhalb |
<pre class="prettyprint"> |
Mit der google-code-prettify-Bibliothek erhalten Ihre Codeblöcke einen etwas anderen visuellen Stil und eine automatische Syntaxhervorhebung. <div> <h1> Überschrift </h1> <p> Etwas genau hier... </p> </div> Laden Sie google-code-prettify herunter und sehen Sie sich die Readme-Datei für die Verwendung an. |
<span class="label">
Machen Sie auf jeden Satz in Ihrem Fließtext aufmerksam oder markieren Sie ihn.
Brauchten Sie jemals einen dieser schicken Neuen! oder Wichtige Flags beim Schreiben von Code? Nun, jetzt hast du sie. Folgendes ist standardmäßig enthalten:
Etikett | Ergebnis |
---|---|
<span class="label">Default</span> |
Standard |
<span class="label success">New</span> |
Neu |
<span class="label warning">Warning</span> |
Warnung |
<span class="label important">Important</span> |
Wichtig |
<span class="label notice">Notice</span> |
Notiz |
Zeigen Sie Miniaturansichten unterschiedlicher Größe auf Seiten mit geringem HTML-Fußabdruck und minimalen Stilen an.
Miniaturansichten im .media-grid
können jede beliebige Größe haben, aber sie funktionieren am besten, wenn sie direkt dem integrierten Bootstrap-Rastersystem zugeordnet werden. Bildbreiten wie 90, 210 und 330 kombiniert mit ein paar Pixeln Abstand, um den Spaltengrößen .span2
, .span4
, und zu entsprechen..span6
Medienraster sind einfach zu verwenden und auf der Markup-Seite ziemlich einfach. Ihre Abmessungen basieren ausschließlich auf der Größe der enthaltenen Bilder.
- <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>
Tabellen sind großartig – für viele Dinge. Großartige Tabellen benötigen jedoch ein wenig Markup-Liebe, um nützlich, skalierbar und lesbar (auf Codeebene) zu sein. Hier sind ein paar hilfreiche Tipps.
Umschließen Sie Ihre Spaltenüberschriften immer <thead>
so, dass die Hierarchie <thead>
> <tr>
> ist <th>
.
Ähnlich wie bei den Spaltenüberschriften sollte der gesamte Inhalt Ihrer Tabelle in ein eingeschlossen werden <tbody>
, sodass Ihre Hierarchie <tbody>
> <tr>
> ist <td>
.
Alle Tabellen werden automatisch nur mit den wesentlichen Rändern formatiert, um die Lesbarkeit zu gewährleisten und die Struktur zu erhalten. Es müssen keine zusätzlichen Klassen oder Attribute hinzugefügt werden.
# | Vorname | Nachname | Sprache |
---|---|---|---|
1 | Etwas | Einer | Englisch |
2 | Jo | Sixpack | Englisch |
3 | Stu | Delle | Code |
- <Tabelle>
- ...
- </table>
Verwenden Sie für Tabellen, die mehr Daten auf engstem Raum erfordern, die komprimierte Variante, die die Polsterung halbiert. Es kann auch in Verbindung mit Umrandungen und Zebrastreifen verwendet werden, genau wie die Standard-Tabellenstile.
# | Vorname | Nachname | Sprache |
---|---|---|---|
1 | Etwas | Einer | Englisch |
2 | Jo | Sixpack | Englisch |
3 | Stu | Delle | Code |
Lassen Sie Ihre Tische ein wenig eleganter aussehen, indem Sie ihre Ecken abrunden und Ränder an allen Seiten hinzufügen.
# | Vorname | Nachname | Sprache |
---|---|---|---|
1 | Etwas | Einer | Englisch |
2 | Jo | Sixpack | Englisch |
3 | Stu | Delle | Code |
- <table class = "bordered-table" >
- ...
- </table>
Gestalten Sie Ihre Tische etwas schicker, indem Sie Zebrastreifen hinzufügen – fügen Sie einfach die .zebra-striped
Klasse hinzu.
# | Vorname | Nachname | Sprache |
---|---|---|---|
1 | Etwas | Einer | Englisch |
2 | Jo | Sixpack | Englisch |
3 | Stu | Delle | Code |
4 Spalten umfassen | |||
über 2 Spalten erstrecken | über 2 Spalten erstrecken |
Hinweis: Zebra-Striping ist eine progressive Verbesserung, die für ältere Browser wie IE8 und darunter nicht verfügbar ist.
- <table class = "zebragestreift" >
- ...
- </table>
Anhand des vorherigen Beispiels verbessern wir die Nützlichkeit unserer Tabellen, indem wir Sortierfunktionen über jQuery und das Tablesorter- Plugin bereitstellen. Klicken Sie auf die Überschrift einer beliebigen Spalte, um die Sortierung zu ändern.
# | Vorname | Nachname | Sprache |
---|---|---|---|
2 | Jo | Sixpack | Englisch |
3 | Stu | Delle | Code |
1 | Dein | Einer | Englisch |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <Skript >
- $ ( Funktion () {
- $ ( "table#sortTableExample" ). Tabellensortierer ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebragestreift" >
- ...
- </table>
Alle Formulare erhalten Standardstile, um sie lesbar und skalierbar darzustellen. Stile werden für Texteingaben, Auswahllisten, Textbereiche, Optionsfelder und Kontrollkästchen sowie Schaltflächen bereitgestellt.
Fügen .form-stacked
Sie dem HTML Ihres Formulars hinzu, und Sie haben Beschriftungen über ihren Feldern statt links. Dies funktioniert hervorragend, wenn Ihre Formulare kurz sind oder Sie zwei Spalten mit Eingaben für schwerere Formulare haben.
Passen Sie jedes Formular input
, select
oder jede textarea
Breite an, indem Sie Ihrem Markup nur wenige Klassen hinzufügen.
Ab v1.3.0 haben wir die rasterbasierten Größenklassen für Formularelemente hinzugefügt. Bitte verwenden Sie diese über den vorhandenen Klassen .mini
, .small
, etc.
Als Konvention werden Schaltflächen für Aktionen verwendet, während Links für Objekte verwendet werden. Beispielsweise könnte „Herunterladen“ eine Schaltfläche und „Letzte Aktivität“ ein Link sein.
Alle Schaltflächen haben standardmäßig einen hellgrauen Stil, aber eine Reihe von Funktionsklassen können für unterschiedliche Farbstile angewendet werden. Diese Klassen umfassen eine blaue .primary
Klasse, eine hellblaue .info
Klasse, eine grüne .success
Klasse und eine rote .danger
Klasse.
Schaltflächenstile können mit .btn
angewendet werden. Normalerweise möchten Sie diese nur <a>
auf , <button>
und select <input>
-Elemente anwenden. So sieht es aus:
Lust auf größere oder kleinere Buttons? Haben Sie es!
Verwenden Sie für Schaltflächen, die nicht aktiv sind oder aus dem einen oder anderen Grund von der App deaktiviert wurden, den deaktivierten Status. Das gilt .disabled
für Links und :disabled
für <button>
Elemente.
.alert-message
One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.
- <div class="alert-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
- </div>
.alert-message.block-message
For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.
- <div class="alert-message block-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. 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="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.
One fine body…
Twipsies are super useful for aiding a confused user and pointing them in the right direction.
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 nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Use popovers to provide subtextual information to a page without affecting layout.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!
Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.
File | Description |
---|---|
bootstrap-modal.js | Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter. |
bootstrap-alerts.js | The alert plugin is a super tiny class for adding close functionality to alerts. |
bootstrap-dropdown.js | This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. |
bootstrap-scrollspy.js | The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. |
bootstrap-buttons.js | The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. |
bootstrap-tabs.js | This plugin adds quick, dynamic tab and pill functionality for cycling through local content. |
bootstrap-twipsy.js | Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage! |
bootstrap-popover.js | The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project! |
Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.
However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.
For more information and to see some live demos, please refer to our plugin documentation page.
Bootstrap was built from Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.
Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.
Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
- <script src="js/less-1.1.3.min.js"></script>
Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.
Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.
Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.
- // Links
- @linkColor: #8b59c2;
- @linkColorHover: darken(@linkColor, 10);
- // Grays
- @black: #000;
- @grayDark: lighten(@black, 25%);
- @gray: lighten(@black, 50%);
- @grayLight: lighten(@black, 70%);
- @grayLighter: lighten(@black, 90%);
- @white: #fff;
- // Accent Colors
- @blue: #08b5fb;
- @green: #46a546;
- @red: #9d261d;
- @yellow: #ffc40d;
- @orange: #f89406;
- @pink: #c3325f;
- @purple: #7a43b6;
- // Baseline grid
- @basefont: 13px;
- @baseline: 18px;
Less also provides another style of commenting in addition to CSS’s normal /* ... */
syntax.
- // This is a comment
- /* This is also a comment */
Mixins sind im Grunde genommen Includes oder Partials für CSS, mit denen Sie einen Codeblock zu einem kombinieren können. Sie eignen sich hervorragend für Eigenschaften mit Präfixen von Anbietern wie box-shadow
, browserübergreifende Farbverläufe, Schriftstapel und mehr. Nachfolgend finden Sie ein Beispiel der Mixins, die in Bootstrap enthalten sind.
- #Schriftart {
- . Kurzschrift ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- Schriftgröße : @size ; _ _
- Schriftart - Gewicht : @Gewicht ;
- Zeilenhöhe : @lineHeight ; _ _
- }
- . serifenlos ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _ _
- Schriftfamilie : " Helvetica Neue " , Helvetica , Arial , serifenlos ; _
- Schriftgröße : @size ; _ _
- Schriftart - Gewicht : @Gewicht ;
- Zeilenhöhe : @lineHeight ; _ _
- }
- ...
- }
- #gradient {
- ...
- . vertikal ( @startColor : #555, @endColor: #333) {
- Hintergrundfarbe : @endColor ; _ _
- Hintergrund - wiederholen : wiederholen - x ;
- background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Eroberer
- Hintergrund - Bild : - moz - linear - Farbverlauf ( @startColor , @endColor ); // FF3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- Hintergrund - Bild : - Webkit - linear - Farbverlauf ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Oper 11.10
- background - image : linear - gradient ( @startColor , @endColor ); // Der Standard
- }
- ...
- }
Werden Sie fantasievoll und führen Sie etwas Mathematik durch, um flexible und leistungsstarke Mixins wie das untenstehende zu erstellen.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Erstellen Sie einige Spalten
- . Spalten ( @columnSpan : 1 ) {
- Breite : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Nachdem Sie die .less
Dateien in /lib/ geändert haben, müssen Sie sie neu kompilieren, um die bootstrap-*.*.*.css- und bootstrap-*.*.*.min.css-Dateien neu zu generieren. Wenn Sie eine Pull-Anforderung an GitHub senden, müssen Sie immer neu kompilieren.
Methode | Schritte |
---|---|
Knoten mit Makefile | Installieren Sie den Less-Befehlszeilen-Compiler mit npm, indem Sie den folgenden Befehl ausführen: $ npm installiert lessc Nach der Installation führen Sie es einfach Wenn Sie watchr installiert haben, können Sie außerdem ausführen |
Javascript | Laden Sie die neueste Less.js herunter und fügen Sie den Pfad dazu (und Bootstrap) in die
Um die .less-Dateien neu zu kompilieren, speichern Sie sie einfach und laden Sie Ihre Seite neu. Less.js kompiliert sie und speichert sie im lokalen Speicher. |
Befehlszeile | Wenn Sie das Less-Befehlszeilentool bereits installiert haben, führen Sie einfach den folgenden Befehl aus: $ lessc ./lib/bootstrap.less > bootstrap.css Fügen |
Weniger Mac-App | Die inoffizielle Mac-App überwacht Verzeichnisse mit .less-Dateien und kompiliert den Code nach jedem Speichern einer überwachten .less-Datei in lokale Dateien. Wenn Sie möchten, können Sie in der App die Einstellungen für das automatische Minifizieren und das Verzeichnis, in dem die kompilierten Dateien landen, umschalten. |