TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Bootstrap 5 -aloitusmalli

20

Bootstrap 5 julkaistiin lopullisena julkisena versiona. Tämä tarkoittaa käytännössä sitä, että sinun pitäisi valmistautua siirtymään edellisestä versiosta ja käyttää uutta versiota uusien verkkosivustojen rakentamiseen. Olitpa siirtymässä tai aloittamassa uutta sivustoa, sinun on ensin opittava vähimmäismäärä tai aloitusmalli. Tässä opetusohjelmassa selitämme yksinkertaisten esimerkkien avulla, kuinka luoda perus Bootstrap 5 -aloitusmalli projektien aloittamista varten.

Bootstrap 5 -käynnistysmallin käyttäminen

  1. Bootstrap -lähdetiedostojen lataaminen
  2. Bootstrap 5 -tiedostojen isännöinti palvelimellasi
  3. Bootstrap 5 -käynnistysmallin käyttö CDN -linkkien kanssa
  4. Bootstrap 5 -komponenttien mukauttaminen
  5. Aloitusmallin vieminen eteenpäin
  6. Paketissa olevan komentosarjatiedoston käyttäminen versiossa 5
  7. Sisältää Bootstrap -kuvakkeet
  8. Käyttämällä staattisia sivustogeneraattoreita

1 Bootstrap 5 -lähdetiedostojen lataaminen

Loppukäyttäjänä on kaksi tapaa käyttää Bootstrap CSS- ja JavaScript -tiedostoja. Yksi on ladata esivalmistetut tiedostot ja sisällyttää ne projekteihisi, ja toinen on käyttää CDN -linkkejä.

Saat lisätietoja Bootstrap -tiedostojen hankkimisesta Bootstrapin käytön aloittamisesta.

2 Bootstrap -tiedostojen käyttäminen omalla palvelimella

Voit ladata valmiiksi kootut CSS- ja JavaScript -tiedostot GitHub -arkistosta. Zip -tiedostossa tulee olla CSS- ja JS -kansiot. Alla on CSS -kansioissa käytettävissä olevat tiedostot:

Bootstrap 5 -aloitusmalli

Bootstrap 5 tiedostoa

Ladatusta lähdetiedostosta on saatavana useita CSS -versioita:

  • Oletus- ja minimoidut CSS -tiedostot, joita voit käyttää missä tahansa projektissa
  • Apuohjelmatiedosto
  • Vain ruudukon versio
  • Vain uudelleenkäynnistysversio

Tuotantopalvelimella voit käyttää minimoitua versiota "bootstrap.min.css" kaikkiin tarpeisiisi. Lähdetietokantatiedostot auttavat kartoittamaan lähteen ja valmiiksi käännettyjen minimoitujen versioiden välillä. Sinun ei tarvitse käyttää uudelleenkäynnistystä, ruudukkoa ja karttatiedostoja säännölliseen käyttöön sivustoilla.

Huomautus: Kun käytät sivustossasi vain "bootstrap.min.css” -tiedostoa, jotkin selaimet, kuten Safari, näyttävät virheen tai varoituksen kehittäjäkonsolissa, että lähdetiedostotiedosto puuttuu. Korjaa virhe avaamalla Bootstrap CSS -tiedosto ja poistamalla viimeinen rivi ” / # sourceMappingURL = bootstrap.min.css.map /”.

CSS -tiedostojen tapaan JS -kansiossa on “bootstrap.js” ja “bootstrap.bundle.js”. Bootstrap.js -tiedosto ei sisällä Popper -skriptiä, mutta nippuversio sisältää Popper -komentosarjan. Aiemmassa Bootstrap 4 -versiossa sinun on sisällytettävä jQuery erikseen, jotta JavaScript -komponentit toimivat oikein. Bootstrap 5 ei kuitenkaan tarvitse jQueryä osana kehystä, ja se on suunniteltu toimimaan ilman jQueryä.

Bootstrap 5 -aloitusmalli

Bootstrap 5 JS -tiedostot

Yllä olevan käsityksen mukaan lähdetiedostoilla on seuraava rakenne, joka sisältää paljon CSS- ja JS -tiedostoja.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Peruskäynnistysmallin pitäisi näyttää tältä, kun ylläpidät yllä olevia tiedostoja palvelimellasi:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Muista, että jos et käytä mukana toimitettua JS -tiedostoa, sinun on sisällytettävä erilliset JS- ja popper -skriptitiedostot. Jos olet huomannut oikein, aloitusmallissa on monia muita tunnisteita ja komentosarjoja.

  • Bootstrap käyttää HTML5 DOCTYPE -malleja. Muista siis sisällyttää <! DOCTYPE HTML> HTML -mallisi alkuun odottamattoman toiminnan välttämiseksi.
  • Sinun on käytettävä viewport -sisällönkuvauskenttää varmistaaksesi mallin reagoivuuden renderointilaitteeseen perustuen.
  • Jos lisäät jQueryä, muista lisätä se ennen skriptejä "popper.min.js" ja "bootstrap.min.js".
  • Voit myös ladata Popper -skriptin Popper -sivustosta ja ladata ne sivustosi "resources/js/" -kansioon.
  • Muista, että Popper -skripti on välttämätön, jotta Bootstrap -laajennukset toimivat oikein. Popper on JavaScript -kirjasto, jota käytetään pääasiassa kelluvien elementtien, kuten työkaluvihjeen komponentin, sijoittamiseen Bootstrapissa.

Huomaa, että olemme käyttäneet tiedostojen polkuina kohteita "resources/css/bootstrap.min.css" ja "resources/js/bootstrap.bundle.min.js". On hyvä tapa pitää kaikki CSS- ja JS -tiedostot erillisissä kansioissa, jotta niitä on helppo hallita. Tämä tarkoittaa käytännössä sitä, että sinun on luotava vastaavat kansiot palvelimellesi ja ladattava Bootstrap CSS- ja JS -tiedostot manuaalisesti. Pidä kuvat myös erillisessä "kuvat" -kansiossa ja HTML -tiedostot sivustosi juuressa. Joten koko rakenteen pitäisi näyttää palvelimeltasi seuraavanlaiselta:

Bootstrap 5 -aloitusmalli

Bootstrap 5 -teematiedoston rakenne

Yllä olevan esimerkin "Teemakansio" on sivustosi juurihakemisto, jonka pitäisi olla verkkotunnuksesi tai aliverkkotunnuksesi tai alihakemistosi.

3 Aloitusmallin käyttäminen CDN: n kanssa

Kaikkien tarvittavien tiedostojen isännöinti palvelimellasi on oikea tapa, mutta se vaikuttaa latausnopeuteen ja isäntäkapasiteettiin. Joten suosittelemme käyttämään CDN -linkkejä CSS- ja JS -tiedostoihin sen sijaan, että isännöisit niitä omalla palvelimellasi. Tämä varmistaa staattisten tiedostojen nopean toimituksen ja parantaa sivun latausnopeutta. Alla on Bootstrap 5 -aloitusmalli, jossa on CDN -linkit CSS: lle ja komentosarjoille. Voit yksinkertaisesti lisätä sisältöä body -osaan aloittaaksesi sivustosi tai teemasi rakentamisen. Aiemmin Bootstrap 4 -versio oli Bootstrap CDN -verkosta ja uusin versio 5 jsDelivristä.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

4 Bootstrap -lähdetiedostojen mukauttaminen

Kaikkien mallitiedostojen käyttöä ei vaadita kaikissa tapauksissa. Jos esimerkiksi haluat käyttää vain Bootstrap -painikkeita, voit käyttää vain painikkeille sopivia tyylejä. Bootstrap tarjoaa customizer edellisen version 3.4, jossa voit valita mitä osia tarvitaan ja luoda esikäännetty tiedostoja.

Bootstrap 5 -aloitusmalli

Bootstrap -tiedostojen mukauttaminen

Tällä hetkellä Bootstrap 5 -versiolle ei ole saatavilla yksityiskohtaista mukauttajaa. Voit kuitenkin tutustua viralliseen dokumentaatiosivustoon saadaksesi lisätietoja Bootstrap 5: n mukauttamisesta.

5 Aloitusmallin vieminen eteenpäin

Nyt kun viimeinen aloitusmalli on joko palvelimellasi tai CDN -linkkien avulla. Seuraava vaihe on lisätä sisältöä ja aloittaa sivustosi rakentaminen. Alla on yksi yksinkertainen esimerkki, jossa olemme luoneet erilaisia ​​asiayhteyteen liittyviä painikkeita käyttämällä Bootstrap -oletuspainikkeiden luokkia.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Tuloksen pitäisi näyttää alla selaimessa:

Bootstrap 5 -aloitusmalli

Ihannetapauksessa ei tarvitse käyttää jQuery-, popper- ja Bootstrap -skriptitiedostoja yksinkertaisten painikkeiden luomiseen, joita ohjataan CSS: n kautta. Olemme osoittaneet esimerkin aloitusmallin täydellisyyden vuoksi. Myös kun lisäät muita komponentteja, mukana tulevan komentosarjatiedoston tulee olla mukana.

6 Bootstrap Bundled Script -version käyttäminen

Kuten edellä on selitetty, Bootstrap 5: ssä on mukana skriptitiedosto, joka yhdistää "bootstrap.min.js" ja "popper.min.js". Joten jos haluat käyttää mukana toimitettua versiota, muokkaa aloitusmallia kuten alla käyttämällä "bootstrap.bundle.min.js" -tiedostoa.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7 Bootstrap -kuvakkeiden sisällyttäminen malliin

Bootstrap -versiossa 5 on 1300+ ilmaista SVG -kuvaketta, jotka voit helposti sisällyttää verkkosivustoihisi. Se auttaa poistamaan riippuvuuden ulkoisista kuvakkeista, kuten Font Awesome -kuvakkeista. On olemassa useita tapoja sisällyttää kuvakkeet aloitusmalliin, ja paras vaihtoehto on käyttää CDN CSS: ää kuten alla. Olemme näyttäneet esimerkkikuvakkeen runko -osassa hälytyskomponentilla. Täältä saat täydellisen luettelon kuvakkeiden CSS -luokista .

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Staattisten sivustojen generaattoreiden käyttäminen

Staattisen verkkosivuston luominen Bootstrap -aloitusmallilla on helppoa, mutta useiden staattisten tiedostojen muokkaaminen suuremmalla sivustolla vie paljon aikaa. Yksi verkkosivu sisältää erilaisia ​​osioita, kuten otsikon, pääsisällön, alatunnisteen ja sivupalkin. Kaikkia muita osia kuin pääsisältöä käytetään koko sivustolla samoilla tiedoilla. Staattiset generaattorit käyttävät osien käsitettä, koska niillä on perusmallit kullekin osalle, kuten ylätunniste, alatunniste ja sivupalkki. Lopuksi kaikki nämä perusmallit kootaan siten, että pääosan sisältö on kullakin sivulla erikseen.

Aina kun ylä-, alatunnisteeseen ja sivupalkkiin on tehtävä muutoksia, voit muokata perusmalleja sen sijaan, että muuttaisit jokaista sivua erikseen. Kun sivusto on valmis, voit luoda HTML-, CSS- ja JavaScript -tiedostot ladataksesi ne palvelimellesi. Yksi suosituimmista staattisen sivuston generaattoreista on Harp.js, jonka voit asentaa paikalliselle koneellesi aloitusmallin kehittämistä varten. Muista, että Harp.js tarvitsee Node.js/NPM -riippuvuuden, joten sinun olisi pitänyt asentaa nämä komponentit etukäteen. Vaihtoehtoisesti voit käyttää Mobirisen kaltaisia ​​generaattorisovelluksia Bootstrap -kehyksen hyödyntämiseen ilman tarvetta ymmärtää koodausta.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja