Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, przedsionek i eros.
Bootstrap to zestaw narzędzi od Twittera, który ma na celu rozpoczęcie tworzenia aplikacji i witryn internetowych.
Zawiera podstawowe CSS i HTML dla typografii, formularzy, przycisków, tabel, siatek, nawigacji i innych.
Uwaga dla nerdów : Bootstrap jest zbudowany z Less i został zaprojektowany z myślą o nowoczesnych przeglądarkach.
Aby jak najszybciej i najłatwiej rozpocząć, po prostu skopiuj ten fragment na swoją stronę internetową.
Jesteś fanem korzystania z Less? Nie ma problemu, po prostu sklonuj repozytorium i dodaj te linie:
Pobierz, rozwidlej, ściągnij, problemy z plikami i nie tylko dzięki oficjalnemu repozytorium Bootstrap na Github.
Obecnie v1.3.0
Inżynierowie z Twittera w przeszłości wykorzystywali prawie każdą bibliotekę, którą znali, aby spełnić wymagania front-endu. Bootstrap powstał jako odpowiedź na przedstawione wyzwania. Z pomocą wielu wspaniałych ludzi Bootstrap znacznie się rozrósł.
Czytaj więcej na dev.twitter.com ›
Bootstrap jest testowany i obsługiwany w głównych nowoczesnych przeglądarkach, takich jak Chrome, Safari, Internet Explorer i Firefox.
Bootstrap jest dostarczany w komplecie ze skompilowanymi szablonami CSS, nieskompilowanymi i przykładowymi szablonami.
Domyślny system siatki dostarczany w ramach Bootstrap to 16-kolumnowa siatka o szerokości 940 pikseli. Jest to posmak popularnego systemu siatki 960, ale bez dodatkowego marginesu/wyściółki po lewej i prawej stronie.
Jak pokazano tutaj, podstawowy układ można utworzyć za pomocą dwóch „kolumn”, z których każda obejmuje 16 podstawowych kolumn, które zdefiniowaliśmy jako część naszego systemu siatki. Zobacz przykłady poniżej, aby uzyskać więcej odmian.
- <div class = "wiersz" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Zagnieżdżaj zawartość, jeśli musisz, tworząc .row
w istniejącej kolumnie.
- <div class = "wiersz" >
- <div class = "span12" >
- Poziom 1 kolumny
- <div class = "wiersz" >
- <div class = "span6" >
- Poziom 2
- </div>
- <div class = "span6" >
- Poziom 2
- </div>
- </div>
- </div>
- </div>
W Bootstrap wbudowana jest garść zmiennych do dostosowywania domyślnego systemu siatki 940px. Przy odrobinie dostosowania możesz zmienić rozmiar kolumn, ich rynny i pojemnik, w którym się znajdują.
Wszystkie zmienne potrzebne do zmodyfikowania systemu siatki znajdują się obecnie w variables.less
.
Zmienny | Domyślna wartość | Opis |
---|---|---|
@gridColumns |
16 | Liczba kolumn w siatce |
@gridColumnWidth |
40px | Szerokość każdej kolumny w siatce |
@gridGutterWidth |
20px | Ujemna przestrzeń między każdą kolumną |
@siteWidth |
Obliczona suma wszystkich kolumn i rynien | Używamy podstawowego dopasowania, aby policzyć liczbę kolumn i rynien oraz ustawić szerokość .fixed-container() mixina. |
Modyfikowanie siatki oznacza zmianę trzech @grid-*
zmiennych i ponowną kompilację plików Less.
Bootstrap jest wyposażony do obsługi systemu siatkowego z maksymalnie 24 kolumnami; wartość domyślna to tylko 16. Oto, jak zmienne siatki wyglądałyby dostosowane do siatki 24-kolumnowej.
- @siatkaKolumny : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterSzerokość : 20px ;
Po ponownej kompilacji zostaniesz ustawiony!
Domyślny i prosty układ o szerokości 940 pikseli, wyśrodkowany dla niemal każdej witryny lub strony dostarczonej przez pojedynczą witrynę <div.container>
.
- <ciało>
- <div class = "kontener" >
- ...
- </div>
- </body>
Alternatywna, elastyczna struktura strony płynnej z minimalną i maksymalną szerokością oraz lewym paskiem bocznym. Świetne dla aplikacji i dokumentów.
- <ciało>
- <div class = "pojemnik-płyn" >
- <div class = "pasek boczny" >
- ...
- </div>
- <div class = "treść" >
- ...
- </div>
- </div>
- </body>
Standardowa hierarchia typograficzna do strukturyzowania stron internetowych.
Cała siatka typograficzna oparta jest na dwóch zmiennych Less w naszym pliku Variable.less: @basefont
i @baseline
. Pierwszy to podstawowy rozmiar czcionki używany w całym tekście, a drugi to podstawowa wysokość linii.
Używamy tych zmiennych i trochę matematyki do tworzenia marginesów, dopełnień i wysokości linii wszystkich naszych typów i nie tylko.
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.
Używanie wyróżnień, adresów i skrótów
<strong>
<em>
<address>
<abbr>
Znaczniki wyróżnienia ( <strong>
i <em>
) powinny być używane do wskazania dodatkowego znaczenia lub podkreślenia słowa lub frazy w stosunku do otaczającej go kopii. Używaj <strong>
dla ważności i nacisku <em>
na stres .
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, pharetra augue.
Uwaga: nadal można używać tagów <b>
i <i>
tagów w HTML5 i nie muszą one być odpowiednio pogrubione i pochylone (chociaż jeśli istnieje element bardziej semantyczny, użyj go). <b>
ma na celu podkreślenie słów lub fraz bez przekazywania dodatkowego znaczenia, podczas gdy <i>
dotyczy głównie głosu, terminów technicznych itp.
Element <address>
służy do informacji kontaktowych dla najbliższego przodka lub całej pracy. Oto dwa przykłady tego, jak można go użyć:
Uwaga: Każdy wiersz w a <address>
musi kończyć się podziałem wiersza ( <br />
) lub być owinięty znacznikiem blokowym (np. <p>
), aby prawidłowo ustrukturyzować treść.
W przypadku skrótów i akronimów użyj <abbr>
tagu ( <acronym>
jest przestarzały w HTML5 ). Umieść skrócony formularz w tagu i ustaw tytuł dla pełnego imienia i nazwiska.
<blockquote>
<p>
<small>
Aby dołączyć cytat blokowy, zawiń i <blockquote>
dodaj tagi. Użyj elementu, aby zacytować swoje źródło, a przed nim pojawi się myślnik .<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
dr Julius Hibbert
- <cytat blokowy>
- <p> Lorem ipsum dolor sit amet, konsektetur adipisująca elita. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Dostosuj swój kod w dobrym stylu za pomocą dwóch prostych tagów. Aby uzyskać jeszcze więcej niesamowitości dzięki javascript, wrzuć bibliotekę upiększania kodu Google i gotowe.
Kod, bloki lub tylko urywki można wyświetlać ze stylem, umieszczając je w odpowiednim tagu. W przypadku bloków kodu obejmujących wiele wierszy użyj <pre>
elementu. W przypadku kodu wbudowanego użyj <code>
elementu.
Element | Wynik |
---|---|
<code> |
W takim wierszu tekstu opakowany kod będzie wyglądał jak ten <html> element. |
<pre> |
<div> <h1>Nagłówek</h1> <p>Coś tutaj...</p> </div> Uwaga: pamiętaj, aby umieścić kod w |
<pre class="prettyprint"> |
Korzystając z biblioteki google-code-prettify, Twoje bloki kodu uzyskują nieco inny styl wizualny i automatyczne podświetlanie składni. <div> <h1> Nagłówek </h1> <p> Coś tutaj... </p> </div> Pobierz google-code-prettify i zobacz plik Readme, aby dowiedzieć się, jak używać. |
<span class="label">
Zwróć uwagę lub oflaguj dowolne wyrażenie w tekście głównym.
Kiedykolwiek potrzebowałeś jednego z tych fantazyjnych Nowość! lub Ważne flagi podczas pisania kodu? Cóż, teraz je masz. Oto, co jest zawarte domyślnie:
Etykieta | Wynik |
---|---|
<span class="label">Default</span> |
Domyślna |
<span class="label success">New</span> |
Nowy |
<span class="label warning">Warning</span> |
Ostrzeżenie |
<span class="label important">Important</span> |
Ważny |
<span class="label notice">Notice</span> |
Zauważyć |
Wyświetlaj miniatury o różnych rozmiarach na stronach o małej ilości miejsca w HTML i minimalnych stylach.
Miniatury w pliku .media-grid
mogą mieć dowolny rozmiar, ale działają najlepiej, gdy są mapowane bezpośrednio do wbudowanego systemu siatki Bootstrap. Szerokości obrazu, takie jak 90, 210 i 330, łączą się z kilkoma pikselami dopełnienia, aby równać się rozmiarom kolumn .span2
, .span4
i ..span6
Siatki multimedialne są łatwe w użyciu i dość proste po stronie znaczników. Ich wymiary są oparte wyłącznie na wielkości dołączonych obrazów.
- <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>
Stoły są świetne — do wielu rzeczy. Jednak świetne tabele wymagają odrobiny miłości do znaczników, aby były użyteczne, skalowalne i czytelne (na poziomie kodu). Oto kilka wskazówek, które pomogą.
Zawsze zawijaj nagłówki kolumn w <thead>
taki sposób, że hierarchia to <thead>
> <tr>
> <th>
.
Podobnie jak w przypadku nagłówków kolumn, cała zawartość treści tabeli powinna być otoczona w taki sposób <tbody>
, aby Twoja hierarchia była <tbody>
> <tr>
> <td>
.
Wszystkie tabele będą automatycznie stylizowane tylko z niezbędnymi obramowaniami, aby zapewnić czytelność i zachować strukturę. Nie ma potrzeby dodawania dodatkowych klas ani atrybutów.
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Niektóre | Jeden | język angielski |
2 | Joe | Sześciopak | język angielski |
3 | Stu | Wygięcie | Kod |
- <tabela>
- ...
- </table>
W przypadku tabel, które wymagają większej ilości danych w ciasnych przestrzeniach, użyj skondensowanego smaku, który przecina wypełnienie o połowę. Można go również używać w połączeniu z obramowaniem i paskami zebry, podobnie jak domyślne style tabeli.
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Niektóre | Jeden | język angielski |
2 | Joe | Sześciopak | język angielski |
3 | Stu | Wygięcie | Kod |
Spraw, aby Twoje stoły wyglądały odrobinę bardziej elegancko, zaokrąglając ich rogi i dodając obramowania ze wszystkich stron.
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Niektóre | Jeden | język angielski |
2 | Joe | Sześciopak | język angielski |
3 | Stu | Wygięcie | Kod |
- < klasa tabeli = "tabela z obramowaniem" >
- ...
- </table>
Wykreuj swoje stoły, dodając paski zebry — po prostu dodaj .zebra-striped
klasę.
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Niektóre | Jeden | język angielski |
2 | Joe | Sześciopak | język angielski |
3 | Stu | Wygięcie | Kod |
rozpiętość 4 kolumn | |||
rozciągnij 2 kolumny | rozciągnij 2 kolumny |
Uwaga: Zebra-striping to progresywne ulepszenie niedostępne w starszych przeglądarkach, takich jak IE8 i starsze.
- < klasa tabeli = "w paski zebry" >
- ...
- </table>
Biorąc poprzedni przykład, poprawiamy użyteczność naszych tabel, udostępniając funkcjonalność sortowania za pomocą jQuery i wtyczki Tablesorter . Kliknij nagłówek dowolnej kolumny, aby zmienić sortowanie.
# | Imię | Nazwisko | Język |
---|---|---|---|
2 | Joe | Sześciopak | język angielski |
3 | Stu | Wygięcie | Kod |
1 | Twój | Jeden | język angielski |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skrypt >
- $ ( funkcja () {
- $ ( "table#sortTableExample" ). sorter tabel ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < klasa tabeli = "w paski zebry" >
- ...
- </table>
Wszystkim formularzom nadawane są domyślne style, aby zaprezentować je w czytelny i skalowalny sposób. Dostępne są style dla wprowadzania tekstu, list wyboru, obszarów tekstowych, przycisków radiowych i pól wyboru oraz przycisków.
Dodaj .form-stacked
do kodu HTML formularza, a otrzymasz etykiety nad ich polami, a nie po lewej stronie. Działa to świetnie, jeśli Twoje formularze są krótkie lub masz dwie kolumny danych wejściowych dla cięższych formularzy.
Dostosuj dowolny formularz input
, select
lub textarea
szerokość, dodając tylko kilka klas do znaczników.
W wersji 1.3.0 dodaliśmy klasy rozmiarów oparte na siatce dla elementów formularzy. Użyj ich zamiast istniejących klas .mini
, .small
, itp.
Zgodnie z konwencją przyciski są używane do działań, podczas gdy łącza są używane do obiektów. Na przykład „Pobierz” może być przyciskiem, a „Ostatnia aktywność” może być linkiem.
Wszystkie przyciski mają domyślnie jasnoszary styl, ale wiele klas funkcjonalnych można zastosować dla różnych stylów kolorów. Klasy te obejmują klasę niebieską .primary
, klasę jasnoniebieską .info
, klasę zieloną .success
i klasę czerwoną .danger
.
Style przycisków można zastosować do wszystkiego, co ma .btn
zastosowane. Zazwyczaj będziesz chciał zastosować je tylko do elementów <a>
, <button>
i select <input>
. Oto jak to wygląda:
Masz ochotę na większe czy mniejsze guziki? Mają na to!
W przypadku przycisków, które nie są aktywne lub zostały wyłączone przez aplikację z tego czy innego powodu, użyj stanu wyłączonego. To .disabled
dotyczy linków i :disabled
elementów <button>
.
.alert-message
Komunikaty jednowierszowe dla podkreślenia niepowodzenia, możliwego niepowodzenia lub sukcesu działania. Szczególnie przydatne do formularzy.
- <div class = "ostrzeżenie komunikatu ostrzegawczego" >
- <a class = "zamknij" href = "#" > × </a>
- <p><strong> Święty guacamole! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze. </p>
- </div>
.alert-message.block-message
W przypadku wiadomości, które wymagają nieco wyjaśnienia, mamy alerty dotyczące stylu akapitu. Są idealne do bulgotania dłuższych komunikatów o błędach, ostrzegania użytkownika o oczekującej akcji lub po prostu prezentowania informacji w celu zwiększenia nacisku na stronę.
- <div class = "alert-message block-message warning" >
- <a class = "zamknij" href = "#" > × </a>
- <p><strong> Święty guacamole! To jest ostrzeżenie! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#"> Wykonaj to działanie </a> <a class = "btn small" href = "#" > Lub zrób to </a>
- </div>
- </div>
Modały — okna dialogowe lub lightboxy — doskonale nadają się do działań kontekstowych w sytuacjach, w których ważne jest zachowanie kontekstu tła.
Jedno piękne ciało…
Twipsy są bardzo przydatne, aby pomóc zdezorientowanemu użytkownikowi i skierować go we właściwym kierunku.
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 accusantuptat quatis fugit volup quae
Użyj okienek popover, aby podać informacje podtekstowe na stronie bez wpływu na układ.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, przedsionek i eros.
Integracja javascriptu z biblioteką Bootstrap jest bardzo łatwa. Poniżej omówimy podstawy i udostępnimy kilka niesamowitych wtyczek na dobry początek!
Ożyw niektóre z podstawowych komponentów Bootstrap za pomocą nowych niestandardowych wtyczek, które współpracują z jQuery i Ender . Zachęcamy do ich rozszerzania i modyfikowania pod kątem konkretnych potrzeb rozwojowych.
Plik | Opis |
---|---|
bootstrap-modal.js | Nasza wtyczka modalna jest bardzo smukłą wersją tradycyjnej wtyczki modalnej js! Zadbaliśmy o to, aby zawierały tylko te same funkcje, których wymagamy na Twitterze. |
bootstrap-alerts.js | Wtyczka alertów to bardzo mała klasa do dodawania bliskiej funkcjonalności do alertów. |
bootstrap-dropdown.js | Ta wtyczka służy do dodawania interakcji rozwijanej do górnego paska ładowania początkowego lub nawigacji na kartach. |
bootstrap-scrollspy.js | Wtyczka ScrollSpy służy do dodawania automatycznej aktualizacji nawigacji na podstawie pozycji przewijania do górnego paska ładowania początkowego. |
bootstrap-buttons.js | Wtyczka ScrollSpy służy do dodawania automatycznej aktualizacji nawigacji na podstawie pozycji przewijania do górnego paska ładowania początkowego. |
bootstrap-tabs.js | Ta wtyczka dodaje szybką, dynamiczną funkcję kart i pigułek do przeglądania zawartości lokalnej. |
bootstrap-twipsy.js | Oparty na doskonałej wtyczce jQuery.tipsy napisanej przez Jason Frame; twipsy to zaktualizowana wersja, która nie opiera się na obrazach, używa CSS3 do animacji i atrybutów danych do lokalnego przechowywania tytułów! |
bootstrap-popover.js | Wtyczka popover zapewnia prosty interfejs do dodawania popoverów do Twojej aplikacji. Rozszerza wtyczkę boostrap-twipsy.js , więc pamiętaj, aby pobrać również ten plik, gdy dołączasz popovery do swojego projektu! |
Nie! Bootstrap został zaprojektowany przede wszystkim jako biblioteka CSS. Ten javascript zapewnia podstawową warstwę interaktywną na wierzchu dołączonych stylów.
Jednak dla tych, którzy potrzebują javascriptu, udostępniliśmy powyższe wtyczki, które pomogą Ci zrozumieć, jak zintegrować Bootstrap z javascriptem i zapewnić szybką, lekką opcję podstawowej funkcjonalności.
Aby uzyskać więcej informacji i zobaczyć niektóre wersje demonstracyjne na żywo, zapoznaj się z naszą stroną dokumentacji wtyczek .
Bootstrap został zbudowany na podstawie Preboot , pakietu domieszek i zmiennych o otwartym kodzie źródłowym, których można używać w połączeniu z Less , preprocesorem CSS w celu szybszego i łatwiejszego tworzenia stron internetowych.
Sprawdź, jak wykorzystaliśmy Preboot w Bootstrap i jak możesz z niego skorzystać, jeśli zdecydujesz się uruchomić Less w swoim następnym projekcie.
Użyj tej opcji, aby w pełni wykorzystać zmienne Bootstrap, domieszki i zagnieżdżanie w CSS za pomocą JavaScript w przeglądarce.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <skrypt src = "js/less-1.1.3.min.js" ></script>
Nie czujesz rozwiązania .js? Wypróbuj aplikację Less Mac lub użyj Node.js do kompilacji podczas wdrażania kodu.
Oto niektóre z najważniejszych elementów Twitter Bootstrap w ramach Bootstrap. Przejdź na stronę Bootstrap lub stronę projektu Github, aby pobrać i dowiedzieć się więcej.
Zmienne w Less są idealne do utrzymywania i aktualizowania Twojego CSS bez bólu głowy. Jeśli chcesz zmienić wartość koloru lub często używaną wartość, zaktualizuj ją w jednym miejscu i gotowe.
- // Linki
- @linkColor : #8b59c2;
- @linkColorHover : przyciemnij ( @linkColor , 10 );
- // Szarości
- @czarny : #000;
- @grayDark : rozjaśnij ( @czarny , 25 %);
- @ szary : rozjaśnij ( @ czarny , 50 %);
- @grayLight : rozjaśnij ( @czarny , 70 %);
- @grayLighter : rozjaśnij ( @czarny , 90 %);
- @biały : #fff ;
- // Kolory akcentujące
- @niebieski : #08b5fb;
- @ zielony : #46a546 ;
- @czerwony : #9d261d;
- @ żółty : #ffc40d ;
- @pomarańczowy : #f89406 ;
- @różowy : #c3325f ;
- @fioletowy : #7a43b6;
- // Siatka linii bazowych
- @czcionka podstawowa : 13px ;
- @linia bazowa : 18px ;
Less zapewnia również inny styl komentowania oprócz normalnej /* ... */
składni CSS.
- // To jest komentarz
- /* To też jest komentarz */
Domieszki są w zasadzie dołączeniami lub częściami CSS, co pozwala na połączenie bloku kodu w jeden. Świetnie nadają się do właściwości z prefiksem dostawcy, takich jakbox-shadow
, gradienty w różnych przeglądarkach, stosy czcionek i nie tylko. Poniżej znajduje się próbka mixinów, które są zawarte w Bootstrap.
- #czcionka {
- . skrót ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- rozmiar - czcionki : @rozmiar ;
- waga czcionki : @waga ; _
- wysokość linii : @lineHeight ; _
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- rodzina czcionek : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- rozmiar - czcionki : @rozmiar ;
- waga czcionki : @waga ; _
- wysokość linii : @lineHeight ; _
- }
- ...
- }
- #gradient {
- ...
- . pionowo ( @startColor : #555, @endColor: #333) {
- kolor tła : @endColor ; _
- background - repeat : repeat - x ;
- background - image : - khtml - gradient ( linear , left top , left bottom , od ( @startColor ), do ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3,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+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- obraz w tle : gradient liniowy ( @startColor , @endColor ) ; // Standard
- }
- ...
- }
Wymyśl i wykonaj trochę matematyki, aby wygenerować elastyczne i potężne mixiny, takie jak ten poniżej.
- // Siatka
- @siatkaKolumny : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterSzerokość : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Zrób kilka kolumn
- . kolumny ( @columnSpan : 1 ) {
- szerokość : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Po zmodyfikowaniu.less
plików w /lib/ będziesz musiał je ponownie skompilować, aby ponownie wygenerować pliki bootstrap-*.*.*.css i bootstrap-*.*.*.min.css. Jeśli przesyłasz żądanie ściągnięcia do usługi GitHub, zawsze musisz ponownie skompilować.
metoda | Kroki |
---|---|
Węzeł z makefile | Zainstaluj kompilator wiersza poleceń less z npm, uruchamiając następujące polecenie: $ npm zainstaluj lessc Po zainstalowaniu wystarczy uruchomić Dodatkowo, jeśli masz zainstalowany watchr , możesz uruchomić |
JavaScript | Pobierz najnowszy plik Less.js i dołącz ścieżkę do niego (i Bootstrap) w pliku
Aby ponownie skompilować pliki .less, po prostu je zapisz i ponownie załaduj swoją stronę. Less.js kompiluje je i przechowuje w pamięci lokalnej. |
Wiersz poleceń | Jeśli masz już zainstalowane narzędzie wiersza poleceń, po prostu uruchom następujące polecenie: $ lessc ./lib/bootstrap.less > bootstrap.css Pamiętaj, aby uwzględnić |
Mniej aplikacji na Maca | Nieoficjalna aplikacja na Maca obserwuje katalogi plików .less i kompiluje kod do plików lokalnych po każdym zapisaniu obserwowanego pliku .less. Jeśli chcesz, możesz zmienić preferencje w aplikacji, aby automatycznie minifikować i do którego katalogu trafiają skompilowane pliki. |