Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum jeung eros.
Bootstrap mangrupakeun toolkit ti Twitter dirancang pikeun kickstart ngembangkeun webapps jeung situs.
Éta kalebet CSS dasar sareng HTML pikeun tipografi, bentuk, tombol, méja, grid, navigasi, sareng seueur deui.
Nerd ngageter: Bootstrap diwangun kalayan Kurang sareng dirancang pikeun dianggo kaluar tina gerbang kalayan panyungsi modéren dina pikiran.
Pikeun ngamimitian anu panggancangna sareng panggampangna, ngan salin snippet ieu kana halaman wéb anjeun.
A kipas tina ngagunakeun Kurang? Henteu aya masalah, ngan ukur clone repo sareng tambahkeun garis ieu:
Unduh, garpu, tarik, masalah file, sareng seueur deui nganggo repo Bootstrap resmi dina Github.
Ayeuna v1.3.0
Insinyur di Twitter baheulana nganggo ampir perpustakaan naon waé anu aranjeunna wawuh pikeun nyumponan sarat hareup. Bootstrap dimimitian salaku jawaban kana tantangan anu dibere. Kalayan bantosan seueur jalma anu saé, Bootstrap parantos ningkat sacara signifikan.
Maca deui dina dev.twitter.com ›
Bootstrap diuji sareng dirojong dina browser modern utama sapertos Chrome, Safari, Internet Explorer, sareng Firefox.
Bootstrap kumplit sareng CSS kompilasi, uncompiled, sareng conto template.
Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 16-kolom lega 940px. Éta rasa tina sistem grid 960 populér, tapi tanpa margin tambahan / padding di sisi kénca sareng katuhu.
Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 16 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami. Tempo conto di handap pikeun leuwih variasi.
- <div class = "baris" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Nest eusi Anjeun lamun kudu ku nyieun hiji .row
dina kolom aya.
- <div class = "baris" >
- <div class = "span12" >
- Tingkat 1 kolom
- <div class = "baris" >
- <div class = "span6" >
- Tingkat 2
- </div>
- <div class = "span6" >
- Tingkat 2
- </div>
- </div>
- </div>
- </div>
Diwangun kana Bootstrap aya sakeupeul variabel pikeun ngaropéa sistem grid standar 940px. Kalayan sakedik kustomisasi, anjeun tiasa ngarobih ukuran kolom, talangna, sareng wadahna tempatna.
Variabel diperlukeun pikeun ngaropéa sistem grid ayeuna sadayana reside di preboot.less
.
Variabel | Nilai standar | Katerangan |
---|---|---|
@gridColumns |
16 | Jumlah kolom dina grid nu |
@gridColumnWidth |
40px | Lebar unggal kolom dina grid nu |
@gridGutterWidth |
20px | Rohangan négatip antara unggal kolom |
@siteWidth |
Jumlah diitung sadaya kolom sareng talang | Kami nganggo sababaraha pertandingan dasar pikeun ngitung jumlah kolom sareng talang tur nyetel lebar .fixed-container() mixin. |
Ngaropéa grid hartina ngarobah tilu @grid-*
variabel jeung recompiling file Kurang.
Bootstrap dilengkepan pikeun nanganan sistem grid nepi ka 24 kolom; standar téh ngan 16. Ieu kumaha variabel grid anjeun bakal kasampak ngaropéa ka grid 24-kolom.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Sakali recompiled, anjeun bakal diatur!
Tata letak standar sareng saderhana 940px-lega, dipuseurkeun pikeun situs wéb atanapi halaman anu disayogikeun ku hiji <div.container>
.
- <awak>
- <div class = "wadah" >
- ...
- </div>
- </awak>
Alternatif, struktur kaca cairan fléksibel jeung min- jeung max-lebar sarta sidebar kénca-leungeun. Saé kanggo aplikasi sareng dokumén.
- <awak>
- <div class = "wadah-cairan" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "eusi" >
- ...
- </div>
- </div>
- </awak>
Hierarki tipografi standar pikeun nyusun halaman wéb anjeun.
Sakabéh grid tipografi dumasar kana dua variabel Kurang dina file preboot.less kami: @basefont
jeung @baseline
. Anu kahiji nyaéta ukuran font dasar anu dianggo sapanjang sareng anu kadua nyaéta jangkungna garis dasar.
Kami nganggo variabel-variabel éta, sareng sababaraha math, pikeun nyiptakeun margin, paddings, sareng jangkung garis sadaya jinis urang sareng seueur deui.
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.
Ngagunakeun tekenan, alamat, & singketan
<strong>
<em>
<address>
<abbr>
Tag emphasis ( <strong>
jeung <em>
) kudu dipaké pikeun nuduhkeun pentingna tambahan atawa tekenan hiji kecap atawa frasa relatif ka salinan sabudeureun na. Anggo <strong>
pikeun pentingna sareng <em>
pikeun tekenan setrés .
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.
Catetan: Ieu masih oke ngagunakeun <b>
sarta <i>
tag dina HTML5 sarta aranjeunna teu kudu styled kandel jeung miring, mungguh (sanajan lamun aya unsur leuwih semantis, make eta). <b>
dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan, sedengkeun <i>
lolobana pikeun sora, istilah teknis, jsb.
Unsur <address>
dipaké pikeun informasi kontak pikeun karuhun pangcaketna, atawa sakabéh awak gawé. Ieu dua conto kumaha éta tiasa dianggo:
Catetan: Unggal garis dina hiji <address>
kudu ditungtungan ku garis-break ( <br />
) atawa dibungkus dina tag blok-tingkat (misalna, <p>
) mun leres struktur eusi.
Pikeun singketan sareng akronim, paké <abbr>
tag ( <acronym>
dileungitkeun dina HTML5 ). Nempatkeun formulir shorthand dina tag tur nyetel judul pikeun ngaran lengkep.
<blockquote>
<p>
<small>
Pikeun ngalebetkeun kutipan blokir , bungkus <blockquote>
sareng tag. Anggo elemen pikeun nyebatkeun sumber anjeun sareng anjeun bakal nampi dash sateuacanna.<p>
<small>
<small>
—
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>
- <leutik> Dr Julius Hibbert </leutik>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp kode anjeun dina gaya sareng dua tag basajan. Pikeun langkung awesomeness ngaliwatan JavaScript, teundeun di perpustakaan prettify kode Google jeung anjeun geus disetel.
Kodeu, blok atawa ngan snippét inline, bisa ditampilkeun kalawan gaya ngan ku wrapping dina tag katuhu. Pikeun blok kode manjang sababaraha garis, make <pre>
unsur. Pikeun kode inline, make <code>
unsur.
unsur | Hasilna |
---|---|
<code> |
Dina garis téks sapertos kieu, kodeu dibungkus anjeun bakal katingali sapertos >html< unsur ieu. |
<pre> |
<div> <h1>Judul</h1> <p>Aya nu kieu...</p> </div> Catetan: Pastikeun pikeun nyimpen kode dina |
<pre class="prettyprint"> |
Ngagunakeun perpustakaan google-code-prettify, anjeun blok kode meunang gaya visual rada béda jeung panyorot sintaksis otomatis. <div> <h1> Judul </h1> <p> Aya anu di dieu... </p> </div> Unduh google-code-prettify sareng tingali readme pikeun kumaha ngagunakeunana. |
<span class="label">
Nelepon perhatian kana atanapi bandéra frasa naon waé dina téks awak anjeun.
Kantos peryogi salah sahiji anu énggal-énggal ! atanapi Bandéra penting nalika nyerat kode? Nya, ayeuna anjeun gaduh aranjeunna. Ieu naon anu kalebet sacara standar:
Label | Hasilna |
---|---|
<span class="label">Default</span> |
Default |
<span class="label success">New</span> |
Anyar |
<span class="label warning">Warning</span> |
Awas |
<span class="label important">Important</span> |
Kadé |
<span class="label notice">Notice</span> |
Bewara |
Tampilkeun gambar leutik tina ukuran anu béda-béda dina halaman kalayan tapak HTML anu lemah sareng gaya anu minimal.
Gambar leutik dina .media-grid
ukuranana tiasa waé, tapi éta tiasa dianggo nalika dipetakeun langsung kana sistem grid Bootstrap anu diwangun. Lebar gambar sapertos 90, 210, sareng 330 digabungkeun sareng sababaraha piksel padding pikeun sami sareng ukuran .span2
, .span4
, sareng .span6
kolom.
Grid média gampang dianggo sareng rada saderhana dina sisi markup. dimensi maranéhanana anu murni dumasar kana ukuran gambar kaasup.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "gambar leutik" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "gambar leutik" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Méja anu saé-pikeun seueur hal. Méja hébat, kumaha oge, peryogi sakedik markup cinta janten mangpaat, scalable, sarta bisa dibaca (dina tingkat kode). Ieu sababaraha tip pikeun ngabantosan.
Salawasna bungkus header kolom anjeun dina <thead>
hirarki sapertos anu <thead>
> <tr>
> <th>
.
Sarupa jeung lulugu kolom, sakabeh eusi awak tabel anjeun kudu dibungkus dina <tbody>
jadi hirarki anjeun <tbody>
> <tr>
> <td>
.
Sadaya tabel bakal ditata sacara otomatis kalayan ngan ukur wates anu penting pikeun mastikeun kabaca sareng ngajaga struktur. Henteu kedah nambihan kelas atanapi atribut tambahan.
# | Nami payun | Nami pengker | Basa |
---|---|---|---|
1 | Sababaraha | Hiji | Inggris |
2 | Joe | Sixpack | Inggris |
3 | Stu | Lentong | Kodeu |
- <méja>
- ...
- </tabel>
Kéngingkeun sakedik méja anjeun ku nambihan zebra-striping-ngan tambahkeun .zebra-striped
kelasna.
# | Nami payun | Nami pengker | Basa |
---|---|---|---|
1 | Sababaraha | Hiji | Inggris |
2 | Joe | Sixpack | Inggris |
3 | Stu | Lentong | Kodeu |
Catetan: Zebra-striping mangrupikeun paningkatan progresif anu henteu sayogi pikeun browser anu langkung lami sapertos IE8 sareng di handap.
- <table class = "zebra-belang" >
- ...
- </tabel>
Nyandak conto samemehna, urang ningkatkeun mangpaat tabel kami ku nyadiakeun fungsionalitas asihan via jQuery jeung plugin Tablesorter . Klik lulugu kolom mana wae pikeun ngarobah nurun.
# | Nami payun | Nami pengker | Basa |
---|---|---|---|
2 | Joe | Sixpack | Inggris |
3 | Stu | Lentong | Kodeu |
1 | Anjeun | Hiji | Inggris |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( fungsi () {
- $ ( "tabél#sortTableConto" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-belang" >
- ...
- </tabel>
Sadaya bentuk dipasihan gaya standar pikeun nampilkeunana dina cara anu tiasa dibaca sareng tiasa skala. Gaya disayogikeun pikeun input téks, pilih daptar, daérah téks, tombol radio sareng kotak centang, sareng tombol.
Tambahkeun .form-stacked
ka HTML formulir anjeun sarta anjeun bakal boga labél dina luhureun widang maranéhanana tinimbang ka kénca maranéhanana. Ieu tiasa dianggo saé upami formulir anjeun pondok atanapi anjeun gaduh dua kolom input pikeun bentuk anu langkung beurat.
Sesuaikeun bentuk naon waé input
, select
, atanapi textarea
lebar ku nambihan sababaraha kelas kana markup anjeun.
Salaku v1.3.0, kami geus ditambahkeun kelas ukuran dumasar-grid pikeun elemen formulir. Punten nganggo ieu dina kelas anu aya .mini
, .small
, jsb.
Salaku konvénsi a, tombol dipaké pikeun lampah bari Tumbu dipaké pikeun objék. Salaku conto, "Unduh" tiasa janten tombol sareng "aktivitas panganyarna" tiasa janten tautan.
Sadaya tombol standar kana gaya kulawu lampu, tapi sajumlah kelas fungsional tiasa diterapkeun pikeun gaya warna anu béda. Kelas ieu kalebet kelas biru .primary
, kelas biru .info
muda, kelas héjo .success
, sareng kelas beureum .danger
.
Gaya tombol tiasa diterapkeun kana naon waé anu .btn
diterapkeun. Biasana anjeun badé nerapkeun ieu ngan ukur <a>
, <button>
, sareng pilih <input>
elemen. Ieu kumaha katingalina:
Fancy tombol gedé atawa leutik? Kudu di dinya!
Pikeun tombol nu teu aktip atawa ditumpurkeun ku aplikasi pikeun hiji alesan atawa sejen, make kaayaan ditumpurkeun. Éta .disabled
pikeun tautan sareng :disabled
pikeun <button>
elemen.
.alert-message
Pesen hiji-garis pikeun nyorot kagagalan, kamungkinan kagagalan, atanapi kasuksésan hiji tindakan. Utamana mangpaat pikeun formulir.
- <div class = "waspada-pesen peringatan" >
- <a class = "deukeut" href = "#" > × </a>
- <p><strong> Guacamole suci! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé. </p>
- </div>
.alert-message.block-message
Pikeun pesen anu peryogi sakedik katerangan, kami gaduh panggeuing gaya paragraf. Ieu sampurna pikeun ngagedekeun pesen kasalahan anu langkung panjang, ngingetkeun pangguna ngeunaan tindakan anu ditangguhkeun, atanapi ngan ukur masihan inpormasi pikeun langkung tekenan kana halaman.
- <div class = "waspada-pesen block-pesen warning" >
- <a class = "deukeut" href = "#" > × </a>
- <p><strong> Guacamole suci! Ieu peringatan! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, atanapi scelerisque nisl consectetur et. </p>
- <div class = "siaga-aksi" >
- <a class = "btn small" href = "#" > Laksanakeun tindakan ieu </a> <a class = "btn small" href = "#" > Atanapi laksanakeun ieu </a>
- </div>
- </div>
Modals-dialogs atanapi lightboxes-saé kanggo tindakan kontekstual dina kaayaan anu penting pikeun ngajaga kontéks latar.
Hiji awak alus…
Twipsies super mangpaat pikeun ngabantosan pangguna anu bingung sareng ngarahkeunana ka arah anu leres.
Ipsum dollar 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 volupremita quasi fugit volupta
Anggo popovers pikeun masihan inpormasi subtekstual ka halaman tanpa mangaruhan perenah.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum jeung eros.
Ngahijikeun javascript sareng perpustakaan Bootstrap super gampang. Di handap ieu kami ngaliwat dasar-dasar sareng nyayogikeun anjeun sababaraha plugins anu saé pikeun ngamimitian anjeun!
Bawa sababaraha komponén primér Bootstrap pikeun hirup kalawan plugins custom anyar nu gawéna kalayan jQuery na Ender . Kami ajak anjeun manjangkeun sareng ngarobih aranjeunna pikeun nyocogkeun ka kabutuhan pangembangan khusus anjeun.
File | Katerangan |
---|---|
bootstrap-modal.js | Plugin Modal kami mangrupikeun super langsing dina plugin modal js tradisional! Urang nyandak perawatan husus pikeun ngawengku ukur fungsionalitas bulistir nu urang merlukeun di twitter. |
bootstrap-alerts.js | Plugin ngageter mangrupikeun kelas super leutik pikeun nambihan fungsionalitas anu caket kana panggeuing. |
bootstrap-dropdown.js | Plugin ieu kanggo nambihan interaksi dropdown kana bootstrap topbar atanapi navigasi tab. |
bootstrap-scrollspy.js | ScrollSpy plugin pikeun nambahkeun hiji nav ngamutahirkeun otomatis dumasar kana posisi gulung ka bootstrap topbar. |
bootstrap-tabs.js | Plugin ieu nambihan gancang, dinamis tab sareng fungsionalitas pél pikeun ngurilingan eusi lokal. |
bootstrap-twipsy.js | Dumasar kana jQuery.tipsy plugin unggulan ditulis ku Jason pigura; twipsy mangrupikeun versi anu diropéa, anu henteu ngandelkeun gambar, ngagunakeun CSS3 pikeun animasi, sareng atribut data pikeun neundeun judul lokal! |
bootstrap-popover.js | The popover plugin nyadiakeun panganteur basajan pikeun nambahkeun popovers kana aplikasi Anjeun. Éta ngalegaan plugin boostrap-twipsy.js , janten pastikeun nyandak file éta ogé nalika kalebet popovers dina proyék anjeun! |
Henteu! Bootstrap dirancang munggaran tur foremost janten perpustakaan CSS. JavaScript ieu nyadiakeun lapisan interaktif dasar dina luhureun gaya kaasup.
Nanging, pikeun anu peryogi javascript, kami parantos nyayogikeun plugins di luhur pikeun ngabantosan anjeun ngartos kumaha ngahijikeun Bootstrap sareng javascript sareng masihan anjeun pilihan anu gancang sareng hampang pikeun fungsionalitas dasar langsung.
Kanggo inpo nu leuwih lengkep sareng ningali sababaraha demo langsung, mangga tingal halaman dokuméntasi plugin kami .
Bootstrap diwangun ku Preboot , hiji pak open-source tina mixins jeung variabel pikeun dipaké babarengan jeung Kurang , a preprocessor CSS pikeun ngembangkeun web gancang sarta gampang.
Parios kumaha kami nganggo Preboot di Bootstrap sareng kumaha anjeun tiasa ngamangpaatkeunana upami anjeun milih ngajalankeun Kurang dina proyék anjeun salajengna.
Anggo pilihan ieu pikeun ngamangpaatkeun pinuh ku Bootstrap's Less variables, mixins, and nesting in CSS via javascript in your browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "sadayana" />
- <script src = "js/less-1.1.3.min.js" ></script>
Teu ngarasa solusi .js? Coba aplikasi Less Mac atawa pake Node.js pikeun ngumpulkeun nalika anjeun nyebarkeun kode anjeun.
Ieu sababaraha sorotan naon anu kalebet dina Twitter Bootstrap salaku bagian tina Bootstrap. Lebetkeun kana halaman wéb Bootstrap atanapi halaman proyék Github pikeun ngaunduh sareng diajar langkung seueur.
Variabel dina Less sampurna pikeun ngajaga sareng ngapdet CSS anjeun bébas nyeri sirah. Nalika anjeun hoyong ngarobih nilai warna atanapi nilai anu sering dianggo, update dina hiji tempat sareng anjeun parantos nyetél.
- // Tumbu
- @linkColor : #8b59c2;
- @linkColorHover : poekeun ( @linkColor , 10 );
- // Grays
- @hideung : #000;
- @grayDark : lighten ( @hideung , 25 %);
- @abu : lighten ( @hideung , 50 %);
- @grayLight : lighten ( @hideung , 70 %);
- @grayLighter : lighten ( @hideung , 90 %);
- @bodas : #fff;
- // Warna aksen
- @biru : #08b5fb;
- @héjo : #46a546;
- @beureum : #9d261d;
- @koneng : #ffc40d;
- @jeruk : #f89406;
- @pink : #c3325f;
- @ungu : #7a43b6;
- // Dasar grid
- @basefont : 13px ;
- @dasar : 18px ;
Kurang ogé nyadiakeun gaya sejen commenting salian /* ... */
sintaksis normal CSS urang.
- // Ieu komentar
- /* Ieu ogé komentar */
Campuran dasarna kalebet atanapi sawaréh pikeun CSS, ngamungkinkeun anjeun ngagabungkeun blok kode kana hiji. Éta hadé pikeun pasipatan awalan vendor sapertos box-shadow
, gradién cross-browser, tumpukan font, sareng seueur deui. Di handap ieu conto tina mixins anu kaasup kana Bootstrap.
- #font {
- . singgetan ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {
- font - ukuran : @ukuran ;
- font - beurat : @beurat ;
- garis - jangkungna : @lineHeight ;
- }
- . sans - serif ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {
- font - kulawarga : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - ukuran : @ukuran ;
- font - beurat : @beurat ;
- garis - jangkungna : @lineHeight ;
- }
- ...
- }
- #gradién {
- ...
- . nangtung ( @startColor : #555, @endColor: #333) {
- latar - warna : @endColor ;
- tukang - ulang : ulang - x ;
- tukang - gambar : - khtml - gradién ( linier , kénca luhur , kénca handap , ti ( @startColor ), ka ( @endColor )); // Konqueror
- tukang - gambar : - moz - linier - gradién ( @startColor , @endColor ); // FF 3.6+
- tukang - gambar : - ms - linier - gradién ( @startColor , @endColor ); // IE10
- tukang - gambar : - webkit - gradién ( linier , kénca luhur , kénca handap , warna - eureun ( 0 %, @startColor ), warna - eureun ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- tukang - gambar : - webkit - linier - gradién ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- tukang - gambar : - o - linier - gradién ( @startColor , @endColor ); // Opera 11.10
- tukang - gambar : linier - gradién ( @startColor , @endColor ); // Standar
- }
- ...
- }
Kéngingkeun sareng laksanakeun sababaraha matematika pikeun ngahasilkeun campuran anu fleksibel sareng kuat sapertos anu di handap ieu.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Jieun sababaraha kolom
- . kolom ( @columnSpan : 1 ) {
- rubak : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Saatos ngaropea .less
file dina /lib/, anjeun bakal kedah recompile aranjeunna pikeun regenerate file bootstrap-*.*.*.css jeung bootstrap-*.*.*.min.css. Upami anjeun ngirimkeun pamenta tarik ka GitHub, anjeun kedah salawasna nyusun ulang.
Métode | Léngkah |
---|---|
Node sareng makefile | Pasang kompiler garis paréntah kirang sareng npm ku ngajalankeun paréntah di handap ieu: $ npm install lessc Sakali dipasang ngan ngajalankeun Salaku tambahan, upami anjeun parantos dipasang watchr , anjeun tiasa ngajalankeun |
JavaScript | Unduh Less.js panganyarna sareng kalebet jalur ka dinya (sareng Bootstrap) dina file
Pikeun recompile file .less, ngan simpen aranjeunna sarta muatkeun deui kaca anjeun. Less.js compiles aranjeunna sarta nyimpen aranjeunna dina gudang lokal. |
Garis paréntah | Upami anjeun parantos gaduh alat garis paréntah anu kirang dipasang, kantun jalankeun paréntah di handap ieu: $ lessc ./lib/bootstrap.less > bootstrap.css Pastikeun kalebet |
Kurang aplikasi Mac | Aplikasi Mac teu resmi ningali diréktori file .less sareng nyusun kode kana file lokal saatos unggal nyimpen file .less anu diawaskeun. Upami anjeun resep, anjeun tiasa ngagentos préferénsi dina aplikasi pikeun ngaminimalkeun otomatis sareng diréktori mana file anu disusun. |