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

Bootstrapin käytön aloittaminen

1

Vuosikymmen sitten verkkosivuston omistaminen oli unelma ja mahdollista vain teknisille nörtille. Nykyään jokainen tavallinen mies voi perustaa sivuston tai blogin ilmaisten sivustonrakentajatyökalujen ja käyttöliittymäkehysten suosion ansiosta. Koska rakennustyömaa on luonteeltaan erittäin kilpailukykyinen, jokaisen yrityksen on keskityttävä tarjoamaan muita parempia houkutellakseen loppukäyttäjiä. Bootstrap on yksi suosituimmista puitteista, ja selitämme, kuinka voit aloittaa Bootstrapin oppimisen verkkosivustojesi rakentamiseen.

Käyttäjille ja kehittäjille on kolmenlaisia ​​työkaluja verkkosivustonsa aloittamiseen:

  • Itse isännöidyt avoimen lähdekoodin sisällönhallintajärjestelmät, kuten WordPress.org, Drupal ja Joomla.
  • Ilmaiset isännöidyt alustat, kuten WordPress.com, Weebly ja Wix.
  • Riippumattomat käyttöliittymäkehykset, kuten Bootstrap ja Google Material Design.

Itse isännöityjen alustojen laajuus on laaja eikä sovi useimmille loppukäyttäjille, joilla ei ole aikaa investoida. Ilmaisia ​​isännöityjä alustoja on helppo käyttää, mutta niillä on suuria riippuvuuksia, jotka rajoittavat mahdollisuutesi vain kyseiseen alustaan. Viimeinen vaihtoehto on yhdistelmä itsepalvelua, kehittämistä ja vapautta käyttää käyttöliittymälohkoja uudelleen. Tässä artikkelissa kerromme lisää Bootstrap -käyttöliittymän käytön aloittamisesta.

Bootstrapin käytön aloittaminen

Opi Bootstrap

Mikä on Bootstrap?

Bootstrap on yksi suosituimmista käyttöliittymäkehyksistä, joka on saatavilla tällä hetkellä. Tämä on käyttöliittymäkehys, joka on luotu HTML: llä, CSS: llä ja JavaScriptillä ilman PHP: n kaltaisia ​​palvelinpuolen komentosarjoja. Alun perin Twitter kehitti sen nimellä “Twitter Blueprint" parantaakseen näkyvyyttä useilla laitteilla ja työkaluilla. Myöhemmin se nimettiin uudelleen Bootstrapiksi ja julkaistiin avoimen lähdekoodin projektina elokuussa 2011.

Bootstrap on yksi suosituimmista hankkeita käytettävissä GitHub kanssa 100k + tähdet. Uusimmat tiedot Bootstrapin julkaisuista ja päivityksistä ovat saatavilla virallisella verkkosivustolla getbootstrap.com. Bootstrapin suosio kasvaa ajan mittaan, kun mobiililaitteet otetaan käyttöön ja Bootstrap -teemat on helppo muuntaa suosituiksi sisällönhallinta -aiheiksi, kuten WordPressiksi. On myös suosittuja Bootstrap-sivuston rakentajia, kuten Mobirise, jotka voivat käynnistää verkkosivustosi ilman koodaustaitoja.

Bootstrap -versiot

Alla olevassa taulukossa näkyy Bootstrapin versiopäivitys, joka on artikkelin kirjoittamisen yhteydessä versiossa V4 alfa 6.

Versio Päivämäärä Isoja muutoksia
Versio 1 19 elokuuta 2011 Avoin lähdekoodi
Versio 2 31 tammikuuta 2012 Suuri päivitys, jossa on 12 sarakkeen ruudukon asettelua ja Glyphicons.
Versio 3 19 elokuuta 2013 Litteä muotoilu ja mobiili ensimmäinen lähestymistapa.
Versio 4 19 elokuuta 2015 Suuri päivitys CSS -luokissa, Sassin käyttö ja Glyphiconien poistaminen, tether.js pudotettu ja popper.js lisätty.
Versio 5 05 toukokuuta 2021 Ei sisällä jQueryä, Bootstrap -kuvakkeita, uutta logoa ja RTL -tukea.

Yleinen käyttö

Tällä hetkellä vakaa versio on Bootstrap 5.01, ja sinun on siirryttävä uusimpaan versioon, jos käytät aiempia versioita 3 tai 4. Joten jos kehität pian julkaistavaa sivustoa, mieluiten käytä versiota 5.01, joka on vakaa. Loppukäyttäjät voivat suoraan ladata valmiiksi kootut CSS / JS -tiedostot ja käyttää niitä sivustossasi. Lataa versio 3.4.1 täältä, V4.6 täältä ja V5.01 täältä. Jos kehität projekteja asiakkaille tai itsellesi, voit ladata koko lähdekoodin Sass -tiedostoilla GitHubista.

Huomautus: Bootstrapin asentaminen Windows -tietokoneeseen tai macOS: ään on monimutkainen tehtävä, koska sillä on paljon riippuvuuksia. Lyhyesti sanottuna sinun pitäisi olla Node.js ja NPM asennettuna tietokoneellesi yhdessä Gruntin kanssa kääntämistä varten. Lisäksi voit käyttää Harp.js -tiedostoa staattisten sivustotiedostojen luomiseen osien tai sisällytysten avulla.

Lisenssi

Bootstrap -tiedostot jaetaan MIT -lisenssillä yhdellä vaatimuksella, koska tekijänoikeustiedot on säilytettävä kaikissa Bootstrap -lähdetiedostoissa.

Säilytä lisenssi- ja tekijänoikeusilmoitus Bootstrapin CSS- ja JavaScript -tiedostoissa, kun käytät niitä teoksissasi.

Voit tarkastella koko lisenssiä GitHubissa.

Sivuston aloittaminen

Voit aloittaa sivustosi rakentamisen Bootstrapilla kahdella tavalla. Toinen on ladata ja isännöidä CSS- ja JS -tiedostoja isännöintipalvelimellasi ja toinen on käyttää CDN -linkkejä. Suosittelemme rakentamaan aloitusmallin ja aloittamaan sitten kaikkien Bootstrap -komponenttien käyttämisen aloitusmallissa. Saat lisätietoja Bootstrap 5 -aloitusmalliosasta.

Alla on CDN -linkit, joita voit käyttää sivustossasi:

<!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>

Varmista, että käytät Popper- ja sitten Bootstrap JS -tiedostoa peräkkäin, muuten voit käyttää yksittäistä Popper -komentosarjan sisältävää komentosarjatiedostoa. Lisää vastaavasti kaikki mukautetut CSS -tyylitaulukot Bootstrap CSS: n jälkeen, jotta se ei ole etusijalla kehyksen määritelmiin nähden. Bootstrap 5 käyttää reunusruutua laatikon koon muuttamiseen, mikä voi vaikuttaa asetteluihin. Voit muuttaa tämän sisältölaatikoksi, jos sitä tarvitaan vain tietyille elementeille, ilmoittamalla upotettu CSS.


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