Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum un eros.
Par Bootstrap Īsa vēsture, pārlūkprogrammas atbalsts un daudz kas cits
Vēsture
Twitter inženieri vēsturiski ir izmantojuši gandrīz jebkuru bibliotēku, kas viņiem bija pazīstama, lai izpildītu priekšgala prasības. Bootstrap sākās kā atbilde uz radītajiem izaicinājumiem. Ar daudzu lielisku cilvēku palīdzību Bootstrap ir ievērojami audzis.
Lasiet vairāk vietnē dev.twitter.com ›
Pārlūka atbalsts
Bootstrap ir pārbaudīts un atbalstīts lielākajās mūsdienu pārlūkprogrammās, piemēram, Chrome, Safari, Internet Explorer un Firefox.
- Jaunākais Safari
- Jaunākais Google Chrome
- Firefox 4+
- Internet Explorer 7+
- Opera 11
Kas ir iekļauts
Bootstrap ir komplektā ar kompilētu CSS, nekompilētu un piemēru veidnēm.
- Javascript spraudņi
- Visi oriģinālie .less faili
- Pilnībā apkopots un samazināts CSS
- Pilnīga stila rokasgrāmatas dokumentācija
- Trīs piemēru lapas ar dažādiem izkārtojumiem
Īsā sākuma piemēri
Vai nepieciešamas ātras veidnes? Apskatiet šos pamata piemērus, ko esam apkopojuši:
Režģa sistēma Šūpojiet standarta 940 pikseļus vai izrullējiet pats
Noklusējuma režģis
Noklusējuma režģa sistēma, kas tiek nodrošināta kā daļa no Bootstrap, ir 940 pikseļu plats 16 kolonnu režģis. Tas ir populārās 960 režģa sistēmas aromāts, taču bez papildu piemales/polsterējuma kreisajā un labajā pusē.
Režģa iezīmēšanas piemērs
Kā parādīts šeit, pamata izkārtojumu var izveidot ar divām "kolonnām", no kurām katra aptver vairākas no 16 pamata kolonnām, kuras definējām kā daļu no mūsu režģa sistēmas. Vairāk variantu skatiet tālāk sniegtajos piemēros.
<div class="row">
<div class="span6">
...
</div>
<div class="span10">
...
</div>
</div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16
Kolonnu nobīde
4
8 nobīde 4
1/3 nobīde 2/3 s
4 nobīde 4
4 nobīde 4
5 nobīde 3
5 nobīde 3
10 nobīde 6
Ligzdošanas kolonnas
Ja nepieciešams, ievietojiet saturu, izveidojot .rowesošā kolonnā.
Ligzdoto kolonnu piemērs
Kolonnas 1. līmenis
2. līmenis
2. līmenis
<div class="row">
<div class="span12">
Kolonnas 1. līmenis
<div class="row">
<div class="span6">
2. līmenis
</div>
<div class="span6">
2. līmenis
</div>
</div>
</div>
</div>
Ritiniet savu režģi
Programmā Bootstrap ir iebūvēti daži mainīgie, lai pielāgotu noklusējuma 940 pikseļu režģa sistēmu. Nedaudz pielāgojot, varat mainīt kolonnu izmērus, to notekcaurules un konteineru, kurā tās atrodas.
Režģa iekšpusē
Visi mainīgie, kas nepieciešami, lai modificētu režģa sistēmu, pašlaik atrodas variables.less.
| Mainīgs | Noklusējuma vērtība | Apraksts |
|---|---|---|
@gridColumns |
16 | Kolonnu skaits režģī |
@gridColumnWidth |
40 pikseļi | Katras kolonnas platums režģī |
@gridGutterWidth |
20 pikseļi | Negatīvā atstarpe starp katru kolonnu |
@siteWidth |
Aprēķināta visu kolonnu un notekcauruļu summa | Mēs izmantojam dažas pamata spēles, lai saskaitītu kolonnu un noteku skaitu un iestatītu maisītāja platumu .fixed-container(). |
Tagad, lai pielāgotu
Modificēt režģi nozīmē mainīt trīs @grid-*mainīgos un pārkompilēt mazāk failus.
Bootstrap ir aprīkots ar režģa sistēmu ar līdz 24 kolonnām; noklusējuma vērtība ir tikai 16. Lūk, kā jūsu režģa mainīgie izskatītos pielāgoti 24 kolonnu režģim.
@gridColumns: 24; @gridColumnWidth: 20px; @gridGutterWidth: 20 pikseļi;
Pēc pārkompilēšanas jūs būsiet gatavs!
Izkārtojumi Pamata veidnes tīmekļa lapu izveidei
Fiksēts izkārtojums
Noklusējuma un vienkāršais 940 pikseļu platums, centrēts izkārtojums gandrīz jebkurai vietnei vai lapai, ko nodrošina viens <div.container>.
<body>
<div class="container">
...
</div>
</body>
Šķidruma izkārtojums
Alternatīva, elastīga lapas struktūra ar minimālo un maksimālo platumu un kreiso sānjoslu. Lieliski piemērots lietotnēm un dokumentiem.
<body>
<div class="container-fluid">
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
</div>
</body>
Tipogrāfija Virsraksti, rindkopas, saraksti un citi iekļautie elementi
Virsraksti un kopija
Standarta tipogrāfiskā hierarhija jūsu tīmekļa lapu strukturēšanai.
Viss tipogrāfiskais režģis ir balstīts uz diviem mainīgajiem mazāk mūsu failā mainīgajiem.less: @basefontun @baseline. Pirmais ir visā izmantotais pamata fonta lielums, bet otrais ir bāzes līnijas augstums.
Mēs izmantojam šos mainīgos lielumus un daļu matemātikas, lai izveidotu visu veidu piemales, polsterējumus un līniju augstumus un citus.
h1. 1. virsraksts
h2. 2. virsraksts
h3. 3. virsraksts
h4. 4. virsraksts
h5. 5. virsraksts
h6. 6. virsraksts
Piemērs rindkopa
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.
Virsraksta piemērs Ir apakšvirsraksts…
Dažādi elementi
Izmantojot uzsvarus, adreses un saīsinājumus
<strong> <em> <address> <abbr>
Kad lietot
Uzsvēruma atzīmes ( <strong>un <em>) ir jāizmanto, lai norādītu uz vārda vai frāzes papildu svarīgumu vai uzsvaru salīdzinājumā ar to apkārtējo eksemplāru. Izmantojiet <strong>svarīguma un <em>stresa akcentēšanai .
Uzsvars rindkopā
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.
Piezīme . HTML5 joprojām ir pareizi izmantot <b>un <i>tagus, un tiem nav jābūt attiecīgi treknrakstā un slīprakstā (lai gan, ja ir semantiskāks elements, izmantojiet to). <b>ir paredzēts vārdu vai frāžu izcelšanai, nepiešķirot papildu nozīmi, savukārt <i>galvenokārt balsij, tehniskiem terminiem utt.
Adreses
Elements <address>tiek izmantots tā tuvākā priekšteča kontaktinformācijai vai visam darba kopumam. Šeit ir divi piemēri, kā to varētu izmantot:
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Pilns vārds
[email protected]
[email protected]
Piezīme. Katrai rindiņai <address>ir jābeidzas ar rindiņas pārtraukumu ( <br />) vai jāiekļauj bloka līmeņa tagā (piemēram, <p>), lai pareizi strukturētu saturu.
Saīsinājumi
Saīsinājumiem un akronīmiem izmantojiet <abbr>tagu ( <acronym>ir novecojis HTML5 ). Ievietojiet īsraksta veidlapu tagā un iestatiet nosaukumu pilnam nosaukumam.
Bloķēt citātus
<blockquote> <p> <small>
Kā citēt
Lai iekļautu citātu, aptiniet to un <blockquote>atzīmējiet to . Izmantojiet elementu, lai norādītu savu avotu, un pirms tā tiks parādīta domuzīme .<p><small><small>—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pozuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Veselu skaitļu pozīcija ir ante venenatis dapibus posuere velit aliquet.</p> <small>Dr. Jūlijs Hibberts</small> </blockquote>
Saraksti
Nesakārtots<ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem un massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat plkst
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Bez stila<ul.unstyled>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem un massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat plkst
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Pasūtīts<ol>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem un massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Aprakstsdl
- Aprakstu saraksti
- Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida un eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Kods
<code> <pre>
Padariet savu kodu stilā ar diviem vienkāršiem tagiem. Lai iegūtu vēl vairāk satriecošu javascript, ielieciet Google koda izdaiļošanas bibliotēku un esat gatavs.
Uzrāda kodu
Kodu, blokus vai tikai iekļautos fragmentus var parādīt ar stilu, vienkārši iesaiņojot pareizo tagu. Koda blokiem, kas aptver vairākas rindiņas, izmantojiet <pre>elementu. Iekļautajam kodam izmantojiet <code>elementu.
| Elements | Rezultāts |
|---|---|
<code> |
Šādā teksta rindiņā jūsu iesaiņotais kods izskatīsies kā šis <html>elements. |
<pre> |
<div> <h1>Virsraksts</h1> <p>Kaut kas tieši šeit...</p> </div> Piezīme. Noteikti glabājiet kodu |
<pre class="prettyprint"> |
Izmantojot bibliotēku google-code-prettify, jūsu koda bloki iegūst nedaudz atšķirīgu vizuālo stilu un automātisku sintakses izcelšanu. <div> <h1>Virsraksts</h1> <p>Kaut kas tieši šeit...</p> </div> Lejupielādējiet google-code-prettify un skatiet readme, lai uzzinātu, kā to izmantot. |
Iekļautās etiķetes
<span class="label">
Pievērsiet uzmanību vai atzīmējiet jebkuru frāzi pamattekstā.
Marķējiet jebko
Kādreiz ir bijis vajadzīgs kāds no šiem greznajiem Jaunajiem! vai Svarīgi karodziņi, rakstot kodu? Nu, tagad jums tie ir. Lūk, kas ir iekļauts pēc noklusējuma:
| Etiķete | Rezultāts |
|---|---|
<span class="label">Default</span> |
Noklusējums |
<span class="label success">New</span> |
Jauns |
<span class="label warning">Warning</span> |
Brīdinājums |
<span class="label important">Important</span> |
Svarīgs |
<span class="label notice">Notice</span> |
Paziņojums |
Multivide Attēlu un video parādīšana
Multivides režģis
Parādiet dažāda lieluma sīktēlus lapās ar zemu HTML nospiedumu un minimāliem stiliem.
Sīktēlu piemēri
Sīktēli .media-gridvar būt jebkura izmēra, taču tie vislabāk darbojas, ja tie tiek kartēti tieši ar iebūvēto Bootstrap režģa sistēmu. Attēlu platumi, piemēram, 90, 210 un 330, tiek kombinēti ar dažiem pikseļiem polsterējuma, lai vienāds ar .span2, .span4un .span6kolonnu izmēriem.
Liels
Vidēja
Mazs
To kodēšana
Multivides režģi ir viegli lietojami un diezgan vienkārši iezīmēšanas pusē. To izmēri ir balstīti tikai uz iekļauto attēlu lielumu.
<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>
Tabulas Par, jūs uzminējāt, tabulas datiem
Celtniecības galdi
<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>
Galdi ir lieliski piemēroti daudzām lietām. Tomēr lieliskām tabulām ir vajadzīga neliela iezīmēšana, lai tās būtu noderīgas, mērogojamas un lasāmas (koda līmenī). Šeit ir daži padomi, kas palīdzēs.
Vienmēr ietiniet kolonnu galvenes <thead>tā, lai hierarhija būtu <thead>> <tr>> <th>.
Līdzīgi kā kolonnu galvenēs, visam tabulas pamattekstam ir jābūt ietītam a <tbody>, lai jūsu hierarhija būtu <tbody>> <tr>> <td>.
Piemērs: noklusējuma tabulu stili
Visas tabulas tiks automātiski veidotas tikai ar galvenajām apmalēm, lai nodrošinātu lasāmību un saglabātu struktūru. Nav nepieciešams pievienot papildu klases vai atribūti.
| # | Vārds | Uzvārds | Valoda |
|---|---|---|---|
| 1 | Dažas | Viens | Angļu |
| 2 | Džo | Sešpaka | Angļu |
| 3 | Stu | Dent | Kods |
<tabula> ... </table>
Piemērs: saīsināts galds
Tabulām, kurām šaurākās vietās nepieciešams vairāk datu, izmantojiet kondensēto garšu, kas sagriež polsterējumu uz pusēm. To var izmantot arī kopā ar apmalēm un zebras svītrām, tāpat kā noklusējuma tabulas stilus.
| # | Vārds | Uzvārds | Valoda |
|---|---|---|---|
| 1 | Dažas | Viens | Angļu |
| 2 | Džo | Sešpaka | Angļu |
| 3 | Stu | Dent | Kods |
Piemērs: tabula ar malām
Padariet galdiem mazliet gludāku izskatu, noapaļojot to stūrus un pievienojot apmales no visām pusēm.
| # | Vārds | Uzvārds | Valoda |
|---|---|---|---|
| 1 | Dažas | Viens | Angļu |
| 2 | Džo | Sešpaka | Angļu |
| 3 | Stu | Dent | Kods |
<table class="bordered-table"> ... </table>
Piemērs: Zebra svītrains
Izbaudiet savus galdus, pievienojot zebras joslas — vienkārši pievienojiet .zebra-stripedklasi.
| # | Vārds | Uzvārds | Valoda |
|---|---|---|---|
| 1 | Dažas | Viens | Angļu |
| 2 | Džo | Sešpaka | Angļu |
| 3 | Stu | Dent | Kods |
| aptver 4 kolonnas | |||
| span 2 kolonnas | span 2 kolonnas | ||
Piezīme. Zebra svītrošana ir progresīvs uzlabojums, kas nav pieejams vecākām pārlūkprogrammām, piemēram, IE8 un jaunākām versijām.
<table class="zebra-striped"> ... </table>
Piemērs: Zebra-svītrains ar TableSorter.js
Ņemot vērā iepriekšējo piemēru, mēs uzlabojam savu tabulu lietderību, nodrošinot šķirošanas funkcionalitāti, izmantojot jQuery un spraudni Tablesorter . Noklikšķiniet uz jebkuras kolonnas galvenes, lai mainītu kārtošanu.
| # | Vārds | Uzvārds | Valoda |
|---|---|---|---|
| 1 | Jūsu | Viens | Angļu |
| 2 | Džo | Sešpaka | Angļu |
| 3 | Stu | Dent | Kods |
<script src="js/jquery/jquery.tablesorter.min.js"></script>
<skripts >
$(function() {
$("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
});
</script>
<table class="zebra-striped">
...
</table>
Veidlapas
Noklusējuma stili
Visām veidlapām tiek piešķirti noklusējuma stili, lai tās parādītu lasāmā un mērogojamā veidā. Stili ir nodrošināti teksta ievadei, atlases sarakstiem, teksta apgabaliem, radio pogām un izvēles rūtiņām un pogām.
Sakrautas veidlapas
Pievienojiet .form-stackedsavas veidlapas HTML, un etiķetes būs augšpusē, nevis pa kreisi. Tas darbojas lieliski, ja jūsu veidlapas ir īsas vai smagākām formām ir divas ievades kolonnas.
Veidlapas lauku izmēri
Pielāgojiet jebkuru formu input, select, vai textareaplatumu, pievienojot marķējumam tikai dažas klases.
Sākot ar versiju 1.3.0, veidlapas elementiem esam pievienojuši uz režģi balstītas izmēru klases. Lūdzu, izmantojiet tos esošajām .mini, .smallutt klasēm.
Pogas
Parasti pogas tiek izmantotas darbībām, bet saites tiek izmantotas objektiem. Piemēram, “Lejupielādēt” varētu būt poga un “nesenā darbība” varētu būt saite.
Visām pogām pēc noklusējuma ir gaiši pelēks stils, taču dažādiem krāsu stiliem var piemērot vairākas funkcionālās klases. Šajās klasēs ietilpst zilā .primaryklase, gaiši zilā .infoklase, zaļā .successklase un sarkanā .dangerklase.
Pogu piemēri
Pogu stilus var lietot jebko, izmantojot .btnlietoto. Parasti tos vēlēsities lietot tikai <a>, <button>un atlasītajiem <input>elementiem. Lūk, kā tas izskatās:
Alternatīvi izmēri
Vai vēlaties lielākas vai mazākas pogas? Izdari to!
Atspējots stāvoklis
Pogām, kas nav aktīvas vai kuras lietotne viena vai otra iemesla dēļ ir atspējojusi, izmantojiet atspējošanas stāvokli. Tas .disabledattiecas uz saitēm un :disabledelementiem <button>.
Saites
Pogas
Brīdinājumu un kļūdu stili panākumu, brīdinājumu, kļūdu un informācijas ziņojumu stili
Pamata brīdinājumi
.alert-message
Vienas rindiņas ziņojumi, lai izceltu darbības neveiksmi, iespējamu neveiksmi vai panākumus. Īpaši noderīga formām.
Koda piemērs
<div class="alert-message brīdinājums"> <a class="close" href="#">×</a> <p><strong>Svētais gvakamole!</strong> Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.</p> </div>
Bloķēt ziņas
.alert-message.block-message
Ziņojumiem, kuriem nepieciešams neliels skaidrojums, mums ir rindkopas stila brīdinājumi. Tie ir lieliski piemēroti, lai izpūstu garākus kļūdu ziņojumus, brīdinātu lietotāju par nepabeigtu darbību vai vienkārši sniegtu informāciju, lai lapā būtu lielāks uzsvars.
Koda piemērs
<div class="alert-message block-message brīdinājums">
<a class="close" href="#">×</a>
<p><strong>Svētais gvakamole! Šis ir brīdinājums!</strong> Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi. 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="#">Veiciet šo darbību</a> <a class="btn small" href="#">Vai dariet to</a>
</div>
</div>
Uznirstošie elementi Komponenti satura attēlošanai modālos, rīka padomos un uznirstošos logos
Modāļi
Modāļi — dialoglodziņi vai gaismas kastes — ir lieliski piemēroti kontekstuālām darbībām situācijās, kad ir svarīgi saglabāt fona kontekstu.
×
Modālais virsraksts
Viens labs ķermenis…
Rīku padomi
Twipsis ir ļoti noderīgi, lai palīdzētu apjukušam lietotājam un norādītu viņu pareizajā virzienā.
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 doloremetemque unde sunt sed volquauttytemm a volquauttitamm volquauttitamm
Popovers
Izmantojiet uznirstošos logus, lai sniegtu lapai zemtekstu informāciju, neietekmējot izkārtojumu.
Popover virsraksts
Javascript izmantošana ar Bootstrap Spraudņu rādītājs, lai sāktu darbu
Darba sākšana
Javascript integrēšana ar Bootstrap bibliotēku ir ļoti vienkārša. Tālāk mēs apskatīsim pamatus un piedāvājam dažus lieliskus spraudņus, lai sāktu darbu!
Kas ir iekļauts
Atdzīviniet dažus Bootstrap galvenos komponentus, izmantojot jaunus pielāgotus spraudņus, kas darbojas ar jQuery un Ender . Mēs iesakām tos paplašināt un pārveidot, lai tie atbilstu jūsu īpašajām attīstības vajadzībām.
| Fails | Apraksts |
|---|---|
| bootstrap-modal.js | Mūsu Modal spraudnis ir īpaši plāns tradicionālajam modālajam js spraudnim! Mēs īpaši rūpējāmies, lai iekļautu tikai to funkcionalitāti, kas mums nepieciešama pakalpojumā Twitter. |
| bootstrap-alerts.js | Brīdinājumu spraudnis ir ļoti maza klase, lai brīdinājumiem pievienotu ciešu funkcionalitāti. |
| bootstrap-dropdown.js | Šis spraudnis ir paredzēts nolaižamās mijiedarbības pievienošanai sāknēšanas augšējai joslai vai navigācijām ar cilnēm. |
| bootstrap-scrollspy.js | ScrollSpy spraudnis ir paredzēts automātiskās atjaunināšanas navigācijas sistēmas pievienošanai sāknēšanas augšējai joslai, pamatojoties uz ritināšanas pozīciju. |
| bootstrap-buttons.js | ScrollSpy spraudnis ir paredzēts automātiskās atjaunināšanas navigācijas sistēmas pievienošanai sāknēšanas augšējai joslai, pamatojoties uz ritināšanas pozīciju. |
| bootstrap-tabs.js | Šis spraudnis pievieno ātru, dinamisku cilnes un tablešu funkcionalitāti, lai pārvietotos pa vietējo saturu. |
| bootstrap-twipsy.js | Balstīts uz izcilo spraudni jQuery.tipsy, ko uzrakstījis Džeisons Frame; twipsy ir atjaunināta versija, kas nebalstās uz attēliem, izmanto css3 animācijām un datu atribūtus vietējai nosaukumu glabāšanai! |
| bootstrap-popover.js | Uznirstošo logu spraudnis nodrošina vienkāršu interfeisu, lai lietojumprogrammai pievienotu uznirstošo logu. Tas paplašina spraudni boostrap-twipsy.js , tāpēc noteikti paņemiet arī šo failu, iekļaujot projektā uznirstošos logus! |
Vai javascript ir nepieciešams?
Nē! Bootstrap pirmām kārtām ir izstrādāta kā CSS bibliotēka. Šis JavaScript nodrošina pamata interaktīvu slāni papildus iekļautajiem stiliem.
Tomēr tiem, kam ir nepieciešams JavaScript, mēs esam nodrošinājuši iepriekš minētos spraudņus, lai palīdzētu jums saprast, kā integrēt Bootstrap ar javascript, un nekavējoties sniegtu ātru, vieglu iespēju pamata funkcionalitātei.
Lai iegūtu papildinformāciju un skatītu dažas tiešraides demonstrācijas, lūdzu, skatiet mūsu spraudņa dokumentācijas lapu .
Bootstrap izmantošana ar mazāku apjomu Uzlādējiet savu CSS ar mainīgajiem, miksētājiem un funkcijām
Bootstrap tika izveidots no Preboot — atvērtā koda kombināciju un mainīgo pakotnes, kas jāizmanto kopā ar Less — CSS priekšprocesoru ātrākai un vienkāršākai tīmekļa izstrādei.
Uzziniet, kā mēs izmantojām Preboot programmā Bootstrap un kā jūs varat to izmantot, ja izvēlēsities nākamajā projektā palaist Less.
Kā to lietot
Izmantojiet šo opciju, lai pilnībā izmantotu Bootstrap's Less mainīgos, mixins un ligzdošanu CSS, izmantojot JavaScript savā pārlūkprogrammā.
<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> <script src="js/less-1.1.3.min.js"></script>
Vai nejūtat .js risinājumu? Izmēģiniet lietotni Less Mac vai izmantojiet Node.js , lai kompilētu, izvietojot kodu.
Kas ir iekļauts
Šeit ir daži no svarīgākajiem aspektiem, kas ir iekļauti pakalpojumā Twitter Bootstrap kā daļa no Bootstrap. Dodieties uz Bootstrap vietni vai Github projekta lapu, lai lejupielādētu un uzzinātu vairāk.
Mainīgie lielumi
Mainīgie less ir lieliski piemēroti, lai uzturētu un atjauninātu jūsu CSS bez galvassāpēm. Ja vēlaties mainīt krāsas vērtību vai bieži lietotu vērtību, atjauniniet to vienā vietā, un tas ir gatavs.
// Saites @linkColor: #8b59c2; @linkColorHover: aptumšot(@linkColor, 10); // Pelēkie @melns: #000; @pelēksTumšs: gaišāks (@melns, 25%); @pelēks: gaišāks (@melns, 50%); @pelēksGaisma: gaišāks (@melns, 70%); @pelēks gaišāks: gaišāks (@melns, 90%); @balts: #fff; // Akcentu krāsas @zils: #08b5fb; @zaļš: #46a546; @red: #9d261d; @dzeltens: #ffc40d; @oranžs: #f89406; @rozā: #c3325f; @violeta: #7a43b6; // Bāzes līnijas režģis @basefont: 13px; @baseline: 18px;
Komentējot
Less nodrošina arī citu komentēšanas stilu papildus CSS parastajai /* ... */sintaksei.
// Šis ir komentārs /* Šis arī ir komentārs */
Sajauc wazoo
Sajaukumi būtībā ir CSS savienojumi vai daļēji, kas ļauj apvienot koda bloku vienā. Tie ir lieliski piemēroti pārdevēja prefiksiem, piemēram box-shadow, , starppārlūkprogrammu gradientiem, fontu kaudzēm un citiem. Tālāk ir sniegts Bootstrap komplektācijā iekļauto mixin paraugs.
Fontu kaudzes
#font {
.shorthand(@svars: normāls, @izmērs: 14 pikseļi, @līnijas augstums: 20 pikseļi) {
fonta izmērs: @size;
fonta svars: @weight;
līnijas augstums: @lineHeight;
}
.sans-serif(@svars: normāls, @izmērs: 14 pikseļi, @līnijas augstums: 20 pikseļi) {
fontu saime: "Helvetica Neue", Helvetica, Arial, sans-serif;
fonta izmērs: @size;
fonta svars: @weight;
līnijas augstums: @lineHeight;
}
...
}
Gradienti
#gradients {
...
.vertical (@startColor: #555, @endColor: #333) {
fona krāsa: @endColor;
fona atkārtojums: atkārtojiet-x;
background-image: -khtml-gradient(lineārs, pa kreisi augšā, pa kreisi apakšā, no(@startColor), līdz(@endColor)); // Konqueror
background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
background-image: -webkit-gradient(lineārs, pa kreisi augšā, pa kreisi apakšā, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
fona attēls: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
fona attēls: lineārs gradients(@startColor, @endColor); // Standarts
}
...
}
Operācijas
Iedomājieties un veiciet matemātiku, lai izveidotu elastīgus un jaudīgus miksus, piemēram, tālāk norādīto.
// Griditude
@gridColumns: 16;
@gridColumnWidth: 40 pikseļi;
@gridGutterWidth: 20 pikseļi;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Izveidojiet dažas kolonnas
.columns(@columnSpan: 1) {
platums: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
Sastādot Mazāk
Pēc .lessfailu modificēšanas mapē /lib/ tie būs atkārtoti jākompilē, lai atjaunotu bootstrap-*.*.*.css un bootstrap-*.*.*.min.css failus. Ja GitHub iesniedzat izvilkšanas pieprasījumu, jums vienmēr ir jāpārkompilē.
Veidi, kā apkopot
| Metode | Soļi |
|---|---|
| Mezgls ar makefile | Instalējiet mazāk komandrindas kompilatoru ar npm, izpildot šo komandu: $ npm instalēt lessc Pēc instalēšanas vienkārši palaidiet Turklāt, ja jums ir instalēta programma Watchr , varat palaist |
| Javascript | Lejupielādējiet jaunāko Less.js un iekļaujiet ceļu uz to (un Bootstrap) mapē <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> Lai atkārtoti kompilētu .less failus, vienkārši saglabājiet tos un atkārtoti ielādējiet savu lapu. Less.js tos apkopo un saglabā vietējā krātuvē. |
| Komandrinda | Ja jums jau ir instalēts mazāk komandrindas rīks, vienkārši palaidiet šo komandu: $ lessc ./lib/bootstrap.less > bootstrap.css Noteikti iekļaujiet |
| Mazāk Mac lietotne | Neoficiālā Mac lietotne skatās .less failu direktorijus un apkopo kodu vietējos failos pēc katras skatītā .less faila saglabāšanas. Ja vēlaties, lietotnē varat pārslēgt preferences, lai automātiski samazinātu un kurā direktorijā nonāk apkopotie faili. |