Osallistu

Auta kehittämään Bootstrapia dokumentaation koontiskripteillämme ja -testeillämme.

Tällä sivulla

Työkalujen asennus

Bootstrap käyttää npm-skriptejä dokumentaation rakentamiseen ja lähdetiedostojen kääntämiseen. Meidän package.json sisältää nämä komentosarjat koodin kääntämistä, testien suorittamista ja paljon muuta varten. Näitä ei ole tarkoitettu käytettäväksi arkiston ja dokumentaatiomme ulkopuolella.

Tarvitset kopion Bootstrapin lähdetiedostoista ja Nodesta, jotta voit käyttää rakennusjärjestelmäämme ja suorittaa dokumentaatiomme paikallisesti. Noudata näitä ohjeita ja sinun pitäisi olla valmis rokkaamaan:

Lataa ja asenna Node.js , jota käytämme riippuvuutemme hallintaan.
Lataa joko Bootstrapin lähteet tai haarukka Bootstrapin arkisto .
Siirry juurihakemistoon /bootstrapja suorita npm installasentaaksesi paketti.jsonissa luetellut paikalliset riippuvuutemme .

Kun olet valmis, voit suorittaa erilaisia komentoriviltä annettuja komentoja.

npm-skriptien käyttö

Paketti.json sisältää lukuisia tehtäviä projektin kehittämiseen . Suorita npm runnähdäksesi kaikki terminaalissasi olevat npm-skriptit. Päätehtäviin kuuluvat:

Tehtävä	Kuvaus
`npm start`	Kääntää CSS:n ja JavaScriptin, rakentaa dokumentaation ja käynnistää paikallisen palvelimen.
`npm run dist`	Luo `dist/`hakemiston käännetyillä tiedostoilla. Vaatii Sassin , Autoprefixerin ja terserin .
`npm test`	Suorittaa testejä paikallisesti suorituksen jälkeen`npm run dist`
`npm run docs-serve`	Rakentaa ja suorittaa dokumentaation paikallisesti.

Aloita Bootstrapin käyttö npm:n kautta aloitusprojektimme avulla! Siirry twbs/bootstrap-npm-starter-mallivarastoon nähdäksesi, kuinka voit rakentaa ja mukauttaa Bootstrapia omassa npm-projektissasi. Sisältää Sass-kääntäjän, Autoprefixerin, Stylelintin, PurgeCSS- ja Bootstrap-kuvakkeet.

Sass

Bootstrap käyttää Dart Sassia Sass-lähdetiedostojemme kääntämiseen CSS-tiedostoiksi (sisältyy rakennusprosessiimme), ja suosittelemme, että teet samoin, jos käännät Sassia käyttämällä omaa resurssiputkeasi. Käytimme aiemmin Node Sassia Bootstrap v4:lle, mutta LibSass ja sen päälle rakennetut paketit, mukaan lukien Node Sass, ovat nyt vanhentuneet .

Dart Sass käyttää pyöristystarkkuutta 10, eikä tehokkuussyistä salli tämän arvon säätämistä. Emme alenna tätä tarkkuutta luodun CSS:n jatkokäsittelyn aikana, kuten pienentämisen aikana, mutta jos päätit tehdä niin, suosittelemme säilyttämään vähintään 6:n tarkkuuden selaimen pyöristysongelmien välttämiseksi.

Automaattinen etuliite

Bootstrap käyttää Autoprefixeria (sisältyy rakennusprosessiimme) lisätäkseen automaattisesti toimittajan etuliitteet joihinkin CSS-ominaisuuksiin rakennusvaiheessa. Näin säästämme aikaa ja koodia, koska voimme kirjoittaa CSS:n tärkeimmät osat yhdellä kertaa, samalla kun v3:n kaltaisia toimittajasekoituksia ei tarvita.

Ylläpidämme luetteloa Autoprefixerin kautta tuetuista selaimista erillisessä tiedostossa GitHub-arkistossamme. Katso lisätietoja osoitteesta .browserslistrc .

RTLCSS

Bootstrap käyttää RTLCSS :ää käännetyn CSS:n prosessoimiseen ja niiden muuntamiseen RTL:ksi – periaatteessa korvaamalla vaakasuuntaiset ominaisuudet (esim. padding-left) niiden vastakkaisilla ominaisuuksilla. Sen avulla voimme kirjoittaa CSS:n vain kerran ja tehdä pieniä muutoksia käyttämällä RTLCSS- ohjaus- ja arvodirektiivejä .

Paikallinen dokumentaatio

Dokumentaation suorittaminen paikallisesti edellyttää Hugon käyttöä, joka asennetaan hugo-bin npm -paketin kautta. Hugo on räjähtävän nopea ja melko laajennettava staattinen sivustogeneraattori, joka tarjoaa meille: perussisällöt, Markdown-pohjaiset tiedostot, mallit ja paljon muuta. Näin pääset alkuun:

Asenna kaikki riippuvuudet suorittamalla yllä olevat työkalut .
/bootstrapSuorita juurihakemistosta npm run docs-servekomentorivillä.
Avaa http://localhost:9001/selaimessasi ja voilà.

Lue lisää Hugon käytöstä lukemalla sen dokumentaatio .

Ongelmien karttoittaminen

Jos sinulla on ongelmia riippuvuuksien asennuksessa, poista kaikki aiemmat riippuvuusversiot (globaalit ja paikalliset). Suorita sitten uudelleen npm install.