Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap është një paketë veglash nga Twitter, e krijuar për të nisur zhvillimin e aplikacioneve në internet dhe sajteve.
Ai përfshin bazën CSS dhe HTML për tipografinë, formularët, butonat, tabelat, rrjetet, navigimin dhe më shumë.
Sinjalizim budalla: Bootstrap është ndërtuar me Less dhe është krijuar për të punuar jashtë portës me shfletues modernë në mendje.
Për fillimin më të shpejtë dhe më të lehtë, thjesht kopjojeni këtë fragment në faqen tuaj të internetit.
Një adhurues i përdorimit të Less? Nuk ka problem, thjesht klononi depon dhe shtoni këto rreshta:
Shkarkoni, forconi, tërhiqni, skedarë probleme dhe më shumë me depon zyrtare të Bootstrap në Github.
Aktualisht v1.3.0
Inxhinierët në Twitter kanë përdorur historikisht pothuajse çdo bibliotekë me të cilën ishin njohur për të përmbushur kërkesat e front-endit. Bootstrap filloi si një përgjigje ndaj sfidave të paraqitura. Me ndihmën e shumë njerëzve të mrekullueshëm, Bootstrap është rritur ndjeshëm.
Lexoni më shumë në dev.twitter.com ›
Bootstrap është testuar dhe mbështetur në shfletues të mëdhenj modernë si Chrome, Safari, Internet Explorer dhe Firefox.
Bootstrap vjen i kompletuar me modele CSS të përpiluara, të pakompiluara dhe shembuj.
Sistemi i parazgjedhur i rrjetit i ofruar si pjesë e Bootstrap është një rrjet me 16 kolona me gjerësi 940 px. Është një shije e sistemit popullor të rrjetit 960, por pa diferencë/mbushje shtesë në anën e majtë dhe të djathtë.
Siç tregohet këtu, një plan urbanistik bazë mund të krijohet me dy "kolona", secila që përfshin një numër prej 16 kolonave themelore që përcaktuam si pjesë e sistemit tonë të rrjetit. Shihni shembujt më poshtë për më shumë variacione.
- <div class = "rresht" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Vendosni përmbajtjen tuaj nëse duhet, duke krijuar një .row
brenda një kolone ekzistuese.
- <div class = "rresht" >
- <div class = "span12" >
- Niveli 1 i kolonës
- <div class = "rresht" >
- <div class = "span6" >
- Niveli 2
- </div>
- <div class = "span6" >
- Niveli 2
- </div>
- </div>
- </div>
- </div>
Të integruara në Bootstrap janë një pjesë e vogël e variablave për personalizimin e sistemit të paracaktuar të rrjetit 940px. Me pak përshtatje, ju mund të modifikoni madhësinë e kolonave, ulluqet e tyre dhe kontejnerin ku ata banojnë.
Variablat e nevojshëm për të modifikuar sistemin e rrjetit aktualisht janë të gjitha në variables.less
.
E ndryshueshme | Vlera e paracaktuar | Përshkrim |
---|---|---|
@gridColumns |
16 | Numri i kolonave brenda rrjetit |
@gridColumnWidth |
40 px | Gjerësia e secilës kolonë brenda rrjetit |
@gridGutterWidth |
20 px | Hapësira negative midis secilës kolonë |
@siteWidth |
Shuma e llogaritur e të gjitha kolonave dhe ulluqeve | Ne përdorim disa ndeshje themelore për të numëruar numrin e kolonave dhe ulluqeve dhe për të vendosur gjerësinë e .fixed-container() përzierjes. |
Modifikimi i rrjetit nënkupton ndryshimin e tre @grid-*
variablave dhe rikompilimin e skedarëve Less.
Bootstrap vjen i pajisur për të trajtuar një sistem rrjeti me deri në 24 kolona; parazgjedhja është vetëm 16. Ja se si variablat e rrjetit tuaj do të duken të personalizuara në një rrjet me 24 kolona.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Pasi të ripërpiloni, do të jeni të vendosur!
Struktura e paracaktuar dhe e thjeshtë me gjerësi 940 px, e përqendruar për pothuajse çdo faqe interneti ose faqe të ofruar nga një e vetme <div.container>
.
- <trupi>
- <div class = "enë" >
- ...
- </div>
- </body>
Një strukturë fleksibël fleksibël dhe alternative e faqeve me gjerësi minimale dhe maksimale dhe një shirit anësor në të majtë. E shkëlqyeshme për aplikacione dhe dokumente.
- <trupi>
- <div class = "kontenier-lëng" >
- <div class = "bar anësor" >
- ...
- </div>
- <div class = "përmbajtje" >
- ...
- </div>
- </div>
- </body>
Një hierarki tipografike standarde për strukturimin e faqeve tuaja të internetit.
I gjithë rrjeti tipografik bazohet në dy ndryshore Less në skedarin tonë variablat.less: @basefont
dhe @baseline
. E para është madhësia e fontit bazë të përdorur në të gjithë dhe e dyta është lartësia e linjës bazë.
Ne i përdorim ato variabla, dhe disa matematikë, për të krijuar kufijtë, mbushjet dhe lartësitë e rreshtave të të gjitha llojeve tona dhe më shumë.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Përdorimi i theksit, adresave dhe shkurtesave
<strong>
<em>
<address>
<abbr>
Etiketat e theksit ( <strong>
dhe <em>
) duhet të përdoren për të treguar rëndësinë ose theksimin shtesë të një fjale ose fraze në lidhje me kopjen përreth. Përdorni <strong>
për rëndësi dhe <em>
për theksim të stresit .
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, një pharetra augue.
Shënim: Është ende në rregull të përdoren <b>
dhe <i>
etiketat në HTML5 dhe ato nuk duhet të jenë përkatësisht të stilizuara të theksuara dhe të pjerrëta (edhe pse nëse ka një element më semantik, përdorni atë). <b>
ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>
është kryesisht për zërin, termat teknike, etj.
Elementi <address>
përdoret për informacionin e kontaktit për paraardhësin e tij më të afërt, ose të gjithë trupin e punës. Këtu janë dy shembuj se si mund të përdoret:
Shënim: Çdo rresht në një <address>
duhet të përfundojë me një ndërprerje rreshti ( <br />
) ose të mbështillet në një etiketë të nivelit të bllokut (p.sh., <p>
) për të strukturuar siç duhet përmbajtjen.
Për shkurtesat dhe akronimet, përdorni <abbr>
etiketën ( <acronym>
është e vjetëruar në HTML5 ). Vendosni formularin e stenografisë brenda etiketës dhe vendosni një titull për emrin e plotë.
<blockquote>
<p>
<small>
Për të përfshirë një kuotë bllokimi , mbështilleni <blockquote>
dhe etiketoni. Përdorni elementin për të cituar burimin tuaj dhe do të merrni një vizë em përpara tij.<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimponi kodin tuaj në stil me dy etiketa të thjeshta. Për më shumë mahnitje përmes javascript, hidhni bibliotekën e bukurisë së kodit të Google dhe jeni gati.
Kodi, blloqet e ose thjesht copa në linjë, mund të shfaqen me stil vetëm duke e mbështjellë në etiketën e duhur. Për blloqet e kodit që përfshijnë shumë rreshta, përdorni <pre>
elementin. Për kodin inline, përdorni <code>
elementin.
Elementi | Rezultati |
---|---|
<code> |
Në një rresht teksti si ky, kodi juaj i mbështjellë do të duket si ky <html> element. |
<pre> |
<div> <h1>Titulli</h1> <p>Diçka këtu...</p> </div> Shënim: Sigurohuni që ta mbani kodin brenda |
<pre class="prettyprint"> |
Duke përdorur bibliotekën google-code-prettify, blloqet tuaja të kodit marrin një stil vizual paksa të ndryshëm dhe theksim automatik të sintaksës. <div> <h1> Titulli </h1> <p> Diçka këtu... </p> </div> Shkarkoni google-code-prettify dhe shikoni readme-në për mënyrën e përdorimit. |
<span class="label">
Tërhiqni vëmendjen ose shënoni ndonjë frazë në tekstin e trupit tuaj.
Keni nevojë ndonjëherë për një nga ato të rejat e bukura ! apo Flamuj të rëndësishëm kur shkruani kodin? Epo, tani i keni ato. Ja çfarë përfshihet si parazgjedhje:
Etiketa | Rezultati |
---|---|
<span class="label">Default</span> |
E paracaktuar |
<span class="label success">New</span> |
I ri |
<span class="label warning">Warning</span> |
Paralajmërim |
<span class="label important">Important</span> |
E rëndësishme |
<span class="label notice">Notice</span> |
Njoftim |
Shfaqni miniaturë të madhësive të ndryshme në faqe me një gjurmë të ulët HTML dhe stile minimale.
Miniaturat në .media-grid
mund të jenë të çdo madhësie, por ato funksionojnë më mirë kur hartohen drejtpërdrejt në sistemin e integruar të rrjetit Bootstrap. Gjerësia e imazhit si 90, 210 dhe 330 kombinohen me disa pikselë mbushje për të barazuar madhësinë .span2
, .span4
, dhe .span6
kolonën.
Rrjetat e mediave janë të lehta për t'u përdorur dhe mjaft të thjeshta në anën e shënjimit. Dimensionet e tyre bazohen thjesht në madhësinë e imazheve të përfshira.
- <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>
Tabelat janë të shkëlqyera - për shumë gjëra. Tabelat e shkëlqyera, megjithatë, kanë nevojë për pak dashuri për shënjimin për të qenë të dobishme, të shkallëzueshme dhe të lexueshme (në nivelin e kodit). Këtu janë disa këshilla për të ndihmuar.
Gjithmonë mbështillni kokat tuaja të kolonës në një mënyrë të <thead>
tillë që hierarkia të jetë <thead>
> <tr>
> <th>
.
Ngjashëm me titujt e kolonave, e gjithë përmbajtja e trupit të tabelës suaj duhet të mbështillet në një <tbody>
mënyrë që hierarkia juaj të jetë <tbody>
> <tr>
> <td>
.
Të gjitha tabelat do të stilohen automatikisht vetëm me kufijtë thelbësorë për të siguruar lexueshmëri dhe për të ruajtur strukturën. Nuk ka nevojë të shtoni klasa ose atribute shtesë.
# | Emri | Mbiemri | Gjuhe |
---|---|---|---|
1 | Disa | Një | anglisht |
2 | Joe | Sixpack | anglisht |
3 | Stu | Dent | Kodi |
- <tabela>
- ...
- </tabela>
Për tabelat që kërkojnë më shumë të dhëna në hapësira më të ngushta, përdorni aromën e kondensuar që e përgjysmon mbushjen. Mund të përdoret gjithashtu në lidhje me kufijtë dhe vijat zebra, ashtu si stilet e parazgjedhura të tabelave.
# | Emri | Mbiemri | Gjuhe |
---|---|---|---|
1 | Disa | Një | anglisht |
2 | Joe | Sixpack | anglisht |
3 | Stu | Dent | Kodi |
Bëjini tavolinat tuaja të duken pak më të hijshme duke rrumbullakosur qoshet e tyre dhe duke shtuar kufij nga të gjitha anët.
# | Emri | Mbiemri | Gjuhe |
---|---|---|---|
1 | Disa | Një | anglisht |
2 | Joe | Sixpack | anglisht |
3 | Stu | Dent | Kodi |
- <table class = "bordered-table" >
- ...
- </tabela>
Bëhuni pak elegant me tavolinat tuaja duke shtuar vija zebra—thjesht shtoni .zebra-striped
klasën.
# | Emri | Mbiemri | Gjuhe |
---|---|---|---|
1 | Disa | Një | anglisht |
2 | Joe | Sixpack | anglisht |
3 | Stu | Dent | Kodi |
shtrihet në 4 kolona | |||
shtrihet në 2 kolona | shtrihet në 2 kolona |
Shënim: Zebra-striping është një përmirësim progresiv që nuk disponohet për shfletuesit më të vjetër si IE8 dhe më poshtë.
- <table class = "zebra-striped" >
- ...
- </tabela>
Duke marrë shembullin e mëparshëm, ne përmirësojmë dobinë e tabelave tona duke ofruar funksionalitet renditjeje nëpërmjet jQuery dhe shtojcës Tablesorter . Klikoni në kokën e çdo kolone për të ndryshuar renditjen.
# | Emri | Mbiemri | Gjuhe |
---|---|---|---|
2 | Joe | Sixpack | anglisht |
3 | Stu | Dent | Kodi |
1 | E juaja | Një | anglisht |
- <script src = "js/jquery/jquery.tablesorter.min.js" </script>
- <skript >
- $ ( funksioni () {
- $ ( "table# sortTableExample" ). klasifikues tavoline ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </tabela>
Të gjitha formave u jepen stile të paracaktuara për t'i paraqitur ato në një mënyrë të lexueshme dhe të shkallëzueshme. Stilet ofrohen për futjen e tekstit, listat e përzgjedhjes, zonat e tekstit, butonat e radios dhe kutitë e kontrollit dhe butonat.
Shtoni .form-stacked
në HTML të formularit tuaj dhe do të keni etiketa në krye të fushave të tyre në vend që të jenë në të majtë. Kjo funksionon shkëlqyeshëm nëse format tuaja janë të shkurtra ose keni dy kolona hyrjesh për forma më të rënda.
Personalizojeni çdo formë input
, select
, ose textarea
gjerësi duke shtuar vetëm disa klasa në shënimin tuaj.
Që nga v1.3.0, ne kemi shtuar klasat e përmasave të bazuara në rrjet për elementët e formës. Ju lutemi përdorni këto mbi klasat ekzistuese .mini
, .small
, etj.
Si konventë, butonat përdoren për veprime ndërsa lidhjet përdoren për objektet. Për shembull, "Shkarko" mund të jetë një buton dhe "aktiviteti i fundit" mund të jetë një lidhje.
Të gjithë butonat janë të paracaktuar në një stil gri të çelur, por një numër klasash funksionale mund të aplikohen për stile të ndryshme ngjyrash. Këto klasa përfshijnë një .primary
klasë blu, një klasë blu të lehta .info
, një klasë jeshile .success
dhe një klasë të kuqe .danger
.
Stilet e butonave mund të aplikohen për çdo gjë me atë të .btn
aplikuar. Zakonisht do të dëshironi t'i zbatoni këto vetëm në elemente <a>
, <button>
dhe zgjidhni . <input>
Ja si duket:
Dëshironi butona më të mëdhenj apo më të vegjël? Kanë në atë!
Për butonat që nuk janë aktivë ose janë çaktivizuar nga aplikacioni për një arsye ose një tjetër, përdorni gjendjen e çaktivizuar. Kjo është .disabled
për lidhjet dhe :disabled
për <button>
elementët.
.alert-message
Mesazhe me një linjë për të theksuar dështimin, dështimin e mundshëm ose suksesin e një veprimi. Veçanërisht i dobishëm për format.
- <div class = "paralajmërim me mesazh alarmi" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Guacamole e shenjtë! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë. </p>
- </div>
.alert-message.block-message
Për mesazhet që kërkojnë pak shpjegim, ne kemi sinjalizime për stilin e paragrafit. Këto janë perfekte për të krijuar mesazhe më të gjata gabimi, për të paralajmëruar një përdorues për një veprim në pritje ose thjesht për të paraqitur informacione për më shumë theksim në faqe.
- <div class = "paralajmërim bllokimi i mesazheve alarmuese" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Guacamole e shenjtë! Ky është një paralajmërim! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë. Nulla vitae elit libero, një pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "veprimet e alarmit" >
- <a class = "btn small" href = "#" > Bëje këtë veprim </a> <a class = "btn small" href = "#" > Ose bëje këtë </a>
- </div>
- </div>
Modalet - dialogët ose kutitë e lehta - janë të shkëlqyera për veprimet kontekstuale në situata ku është e rëndësishme që të ruhet konteksti i sfondit.
Një trup i bukur…
Twipsies janë shumë të dobishme për të ndihmuar një përdorues të hutuar dhe për t'i drejtuar ata në drejtimin e duhur.
Lorem ipsum dolar sit amet illo gabim ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus pasoja konsequuntur, 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 dikta volumi volorem quaessi
Përdorni popovers për të ofruar informacion nëntekstual në një faqe pa ndikuar në paraqitjen.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Integrimi i javascript me bibliotekën Bootstrap është shumë i lehtë. Më poshtë do të shqyrtojmë bazat dhe ju ofrojmë disa shtojca të mrekullueshme për t'ju filluar!
Jepni në jetë disa nga komponentët kryesorë të Bootstrap me shtojca të reja të personalizuara që funksionojnë me jQuery dhe Ender . Ne ju inkurajojmë t'i zgjeroni dhe modifikoni ato për t'iu përshtatur nevojave tuaja specifike të zhvillimit.
Skedari | Përshkrim |
---|---|
bootstrap-modal.js | Shtojca jonë Modal është një pamje shumë e hollë e shtojcës tradicionale modal js! Ne u kujdesëm të veçantë për të përfshirë vetëm funksionalitetin e zhveshur që kërkojmë në Twitter. |
bootstrap-alerts.js | Shtojca e alarmit është një klasë super e vogël për shtimin e funksionalitetit të afërt të sinjalizimeve. |
bootstrap-dropdown.js | Kjo shtojcë është për shtimin e ndërveprimit me zbritje në shiritin e sipërm të bootstrap ose navigimet me skeda. |
bootstrap-scrollspy.js | Shtojca ScrollSpy është për shtimin e një navi me përditësim automatik bazuar në pozicionin e lëvizjes në shiritin e sipërm të bootstrap. |
bootstrap-buttons.js | Shtojca ScrollSpy është për shtimin e një navi me përditësim automatik bazuar në pozicionin e lëvizjes në shiritin e sipërm të bootstrap. |
bootstrap-tabs.js | Kjo shtojcë shton funksionalitet të shpejtë, dinamik të skedave dhe pilulave për çiklizëm përmes përmbajtjes lokale. |
bootstrap-twipsy.js | Bazuar në shtojcën e shkëlqyer jQuery.tipsy të shkruar nga Jason Frame; twipsy është një version i përditësuar, i cili nuk mbështetet në imazhe, përdor css3 për animacione dhe atribute të dhënash për ruajtjen lokale të titujve! |
bootstrap-popover.js | Shtojca popover ofron një ndërfaqe të thjeshtë për të shtuar popover në aplikacionin tuaj. Ai zgjeron shtojcën boostrap-twipsy.js , prandaj sigurohuni që ta kapni edhe atë skedar kur përfshini popover-et në projektin tuaj! |
Jo! Bootstrap është projektuar para së gjithash për të qenë një bibliotekë CSS. Ky javascript ofron një shtresë bazë ndërvepruese në krye të stileve të përfshira.
Megjithatë, për ata që kanë nevojë për javascript, ne kemi ofruar shtojcat e mësipërme për t'ju ndihmuar të kuptoni se si të integroni Bootstrap me javascript dhe për t'ju dhënë menjëherë një opsion të shpejtë dhe të lehtë për funksionalitetin bazë.
Për më shumë informacion dhe për të parë disa demonstrime të drejtpërdrejta, ju lutemi referojuni faqes sonë të dokumentacionit të shtojcave .
Bootstrap u ndërtua nga Preboot , një paketë miksesh dhe variablash me burim të hapur që do të përdoret në lidhje me Less , një paraprocesor CSS për zhvillim më të shpejtë dhe më të lehtë të uebit.
Shikoni se si kemi përdorur Preboot në Bootstrap dhe si mund ta përdorni nëse zgjidhni të ekzekutoni Less në projektin tuaj të ardhshëm.
Përdoreni këtë opsion për të shfrytëzuar plotësisht variablat Less të Bootstrap, mixins dhe folenë në CSS nëpërmjet javascript në shfletuesin tuaj.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "të gjitha" />
- <script src = "js/less-1.1.3.min.js" </script>
Nuk e ndjeni zgjidhjen .js? Provoni aplikacionin Less Mac ose përdorni Node.js për të përpiluar kur vendosni kodin tuaj.
Këtu janë disa nga pikat kryesore të asaj që përfshihet në Twitter Bootstrap si pjesë e Bootstrap. Drejtohuni në faqen e internetit të Bootstrap ose faqen e projektit Github për të shkarkuar dhe mësuar më shumë.
Variablat në Less janë perfekte për të mirëmbajtur dhe përditësuar CSS tuaj pa dhimbje koke. Kur dëshironi të ndryshoni një vlerë ngjyre ose një vlerë të përdorur shpesh, përditësoni atë në një vend dhe jeni gati.
- // Lidhjet
- @linkColor : #8b59c2;
- @linkColorHover : errësohet ( @linkColor , 10 );
- // Gri
- @zezë : #000;
- @gryDark : ndriçoj ( @e zezë , 25 %);
- @gri : ndriçoj ( @e zezë , 50 %);
- @gryLight : ndriçoj ( @e zezë , 70 %);
- @grayLighter : ndriçoj ( @e zezë , 90 %);
- @white : #fff;
- // Ngjyrat e theksit
- @blu : #08b5fb;
- @gjelbër : #46a546 ;
- @red : #9d261d;
- @verdhë : #ffc40d ;
- @portokalli : #f89406;
- @rozë : #c3325f ;
- @vjollcë : #7a43b6 ;
- // Rrjeti bazë
- @basefont : 13px ;
- @baseline : 18px ;
Less ofron gjithashtu një stil tjetër komentimi përveç /* ... */
sintaksës normale të CSS.
- // Ky është një koment
- /* Edhe ky eshte nje koment */
Përzierjet në thelb janë të përfshira ose të pjesshme për CSS, duke ju lejuar të kombinoni një bllok kodi në një. Ato janë të shkëlqyera për vetitë e prefiksuara nga shitësi, si box-shadow
p.sh. Më poshtë është një mostër e mikseve që përfshihen me Bootstrap.
- #font {
- . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- madhësia e shkronjave : @size ;
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . sans - serif ( @pesha : normale , @madhësia : 14 px , @line Lartësia : 20 px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- madhësia e shkronjave : @size ;
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . vertikale ( @startColor : #555, @endColor: #333) {
- sfond - ngjyra : @endColor ;
- sfond - përsëritje : përsërit - x ;
- sfond - imazh : - khtml - gradient ( lineare , majtas lart , majtas poshtë , nga ( @startColor ), në ( @endColor )); // Konqueror
- sfond - imazh : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- sfond - imazh : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- sfond - imazh : - ueb- kit - gradient ( lineare , majtas lart , majtas poshtë , ndalesa e ngjyrave ( 0 %, @startColor ), ndalesa e ngjyrave ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- sfond - imazh : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- sfond - imazh : - o - gradient linear ( @startColor , @endColor ) ; // Opera 11.10
- sfond - imazh : linear - gradient ( @startColor , @endColor ); // Standardi
- }
- ...
- }
Bëhuni fantastik dhe bëni disa matematikë për të gjeneruar miks fleksibël dhe të fuqishëm si ai më poshtë.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Bëni disa kolona
- . kolonat ( @columnSpan : 1 ) {
- gjerësia : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Pas modifikimit të .less
skedarëve në /lib/, do t'ju duhet t'i rikompiloni ato në mënyrë që të rigjeneroni skedarët bootstrap-*.*.*.css dhe bootstrap-*.*.*.min.css. Nëse po paraqisni një kërkesë tërheqjeje në GitHub, duhet të ripërpiloni gjithmonë.
Metoda | Hapat |
---|---|
Nyja me makefil | Instaloni përpiluesin më pak të linjës së komandës me npm duke ekzekutuar komandën e mëposhtme: $ npm instaloni më pak Pasi të instalohet, thjesht drejtojeni Për më tepër, nëse keni të instaluar watchr , mund të kandidoni |
Javascript | Shkarkoni Less.js më të fundit dhe përfshini shtegun drejt tij (dhe Bootstrap) në
Për të rikompiluar skedarët .less, thjesht ruajini ato dhe ringarkoni faqen tuaj. Less.js i përpilon ato dhe i ruan në ruajtjen lokale. |
Linja e komandës | Nëse tashmë keni të instaluar mjetin më pak të linjës së komandës, thjesht ekzekutoni komandën e mëposhtme: $ lessc ./lib/bootstrap.less > bootstrap.css Sigurohuni që të përfshini |
Më pak aplikacion Mac | Aplikacioni jozyrtar Mac shikon drejtoritë e skedarëve .less dhe përpilon kodin në skedarët lokalë pas çdo ruajtjeje të një skedari .less të shikuar. Nëse dëshironi, mund të ndryshoni preferencat në aplikacion për zvogëlimin automatik dhe në cilin drejtori përfundojnë skedarët e përpiluar. |