Bootstrap ir viens no populārākajiem front-end web izkārtojuma un dizaina rīkiem, kas ļauj ātri un viegli izveidot estētiski pievilcīgas un lietojamas mājaslapas un tīmekļa aplikācijas. Tā ir bezmaksas atvērtā koda bibliotēka, kuru izstrādāja Twitter, un tā sastāv no HTML, CSS un JavaScript koda.
Bootstrap izmanto divu kolonnu izkārtojumu un paredzētās izmantošanas veidu, lai palīdzētu izstrādātājiem ātri izveidot līdzīgus dizainus un izkārtojumus. Tā piedāvā dažādus elementus, piemēram, navigācijas joslas, izvēlnes, pogas, formas elementus un tabulas, lai ātri izveidotu interfeisu.
Bootstrap ir ļoti viegli lietojams, un to var izmantot, lai izveidotu gan vienkāršas, gan sarežģītas mājaslapas. Lai izmantotu Bootstrap, ir nepieciešams lejupielādēt Bootstrap failus vai piekļūt tām tieši no tīmekļa. Pēc tam jums ir jāiekļauj Bootstrap CSS un JavaScript faili savā HTML dokumentā, un jūs varat sākt izmantot Bootstrap elementus savā mājaslapā.
Bootstrap ir ļoti populārs, jo tas ir viegli lietojams un piedāvā daudzas ērtības, piemēram, responsive dizainu, kas ļauj mājaslapai labi izskatīties gan lielā ekrānā, gan mobilajās ierīcēs. Tā ir arī lieliska iespēja iesācējiem, kuri vēlas ātri apgūt web dizainu un izkārtojumu.
Piemēri kā izmantot bootstrap:
Lai izmantotu Bootstrap, ir nepieciešams lejupielādēt Bootstrap failus vai piekļūt tām tieši no tīmekļa. Pēc tam jums ir jāiekļauj Bootstrap CSS un JavaScript faili savā HTML dokumentā.
Piemēram, šādi var izskatīties HTML dokuments ar Bootstrap iekļautiem CSS un JavaScript failiem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.16.6/dist/umd/popper.min.js" integrity="sha384-C0nP5y6xXo6PmJ6VuR6RfmQ7VuZM/3o7VuZO8xarTNM9XhXjK2eT8WnH/ZnJhZG8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</head>
<body>
<!-- Bootstrap elements go here -->
</body>
</html>Pēc tam jūs varat sākt izmantot Bootstrap elementus savā mājaslapā.
Kādi ir iespējamie BOOTSTRAP elementi?
Bootstrap piedāvā daudzus dažādus elementus, kurus var izmantot, lai ātri izveidotu interfeisu savai mājaslapai vai tīmekļa aplikācijai. Šeit ir daži no tiem:
- Navigācijas joslas: izmantojiet navigācijas joslas, lai izveidotu augšējo izvēlni savai mājaslapai.
- Izvēlnes: izmantojiet izvēlnes, lai izveidotu izvēlni ar sadaļām vai lapām savai mājaslapai.
- Pogas: izmantojiet pogas, lai pievienotu interaktivitāti savai mājaslapai.
- Formas elementi: izmantojiet formas elementus, lai izveidotu veidlapas, piemēram, reģistrācijas veidlapas vai pieprasījumu veidlapas.
- Tabulas: izmantojiet tabulas, lai parādītu datus tabulas veidā.
- Karošu klases: izmantojiet karošu klases, lai izveidotu karošu izkārtojumu, piemēram, produktu katalogu.
- Grid sistēma: izmantojiet Bootstrap grid sistēmu, lai izkārtojumu būtu vieglāk pielāgot dažādiem ekrāniem.
Tā ir tikai daļa no elementiem, kurus var izmantot ar Bootstrap. Ar Bootstrap ir iespējams izveidot daudz dažādus elementus, piemēram, modālus logus, zīmējumu paneli, ziņu paziņojumus un daudz ko citu.
Kā izskatīsies bootstrap grid sistēma?
Bootstrap grid sistēma ir rīks, kas ļauj izkārtojumu ātri pielāgot dažādiem ekrāniem. Tā sastāv no divām galvenajām daļām: rindām un kolonnām.
Rindas ir horizontālas līnijas, kas pārklājas ar vienu otro un veido izkārtojumu mājaslapā. Kolonnas ir vertikālas līnijas, kas atdala mājaslapas saturu rindās.
Izkārtojums ar Bootstrap grid sistēmu var izskatīties šādi:
<div class="container">
<div class="row">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>
</div>Šajā piemērā mēs izveidojām trīs kolonnas ar klasi “col-4”, kas nozīmē, ka katras kolonnas platums ir 1/3 no mājaslapas platumā.
Bootstrap grid sistēmā ir daudz dažādu iespēju, kā pielāgot izkārtojumu, piemēram, izmantojot dažādas kolonnu klases, lai kolonnas būtu dažāda platumā, vai izmantojot rindas un kolonnas ar dažādu skaitu, lai izveidotu sarežģītākas struktūras. Tā ir lieliska iespēja ātri un viegli pielāgot izkārtojumu dažādiem ekrāniem.
Kas ir bootstrap karošu klases?
Bootstrap karošu klases ir rīks, kas ļauj ātri izveidot karošu izkārtojumu mājaslapā. Karošais izkārtojums ir izkārtojums, kurā elementi ir izvietoti rindās un kolonnās, līdzīgi kā tabulas.
Lai izveidotu karošu izkārtojumu ar Bootstrap, jums ir jāizmanto divi elementi: rindas un kolonnas. Rindas ir horizontālas līnijas, kas pārklājas ar vienu otro un veido izkārtojumu mājaslapā. Kolonnas ir vertikālas līnijas, kas atdala mājaslapas saturu rindās.
Piemēram, šādi var izskatīties karošais izkārtojums ar Bootstrap:
<div class="container">
<div class="row">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
<div class="row">
<div class="col-4">Column 3</div>
<div class="col-4">Column 4</div>
<div class="col-4">Column 5</div>
</div>
</div>Šajā piemērā mēs izveidojām divas rindas ar kolonnām. Pirmajā rindā ir divas kolonnas ar klasi “col-6”, kas nozīmē, ka katras kolonnas platums ir 1/2 no mājaslapas platumā. Otrajā rindā ir trīs kolonnas ar klasi “col-4”, kas nozīmē, ka katras kolonnas platums ir 1/3 no mājaslapas platumā.
Bootstrap karošu klases ļauj ātri un viegli izveidot karošu izkārtojumu, un tās ir lieliska iespēja, piemēram, izveidot produktu katalogu vai parādīt datus tabulas veidā.
Kur lejuplādēt bootstrap failus?
Bootstrap failus var lejupielādēt no oficiālā Bootstrap mājaslapas (https://getbootstrap.com/) vai no GitHub lapas (https://github.com/twbs/bootstrap).
Lai lejupielādētu Bootstrap no oficiālās mājaslapas, jums ir jādodas uz “Get Bootstrap” sadaļu un jāizvēlas vēlamā versija. Pēc tam jūs varat lejupielādēt Bootstrap failus, izvēloties vienu no divām opcijām: “Download Bootstrap” vai “Download source”. “Download Bootstrap” opcija ļaus jums lejupielādēt minimāli apstrādātus Bootstrap failus, kas ir gatavi lietošanai, bet “Download source” opcija ļaus jums lejupielādēt visus Bootstrap avota failus, kas var būt noderīgi, ja vēlaties mainīt Bootstrap kodu.
Lai lejupielādētu Bootstrap no GitHub lapas, jums ir jādodas uz Bootstrap lapu (https://github.com/twbs/bootstrap) un jānoklikšķina uz “Code” pogas. Pēc tam jūs varat lejupielādēt Bootstrap failus, izvēloties vienu no divām opcijām: “Download ZIP” vai “Clone or download”. “Download ZIP” opcija ļaus jums lejupielādēt Bootstrap failus ZIP formātā, bet “Clone or download” opcija ļaus jums klonēt Bootstrap repozitoriju ar Git.
Pēc tam, kad esat lejupielādējuši Bootstrap failus, jums ir jāiekļauj tās savā HTML dokumentā, lai varētu sākt izmantot Bootstrap elementus savā mājaslapā.
Kā iekļaut bootstrap failus savā html dokumentā izmantojot git?
Lai iekļautu Bootstrap failus savā HTML dokumentā, izmantojot Git, jums ir jāveic šādi soļi:
- Lejupielādējiet Bootstrap repozitoriju ar Git, izmantojot “Clone or download” pogu GitHub lapā (https://github.com/twbs/bootstrap).
- Pēc lejupielādēšanas jums ir jāatver savs HTML dokuments un jāiekļauj Bootstrap CSS un JavaScript faili tajā. Lai to izdarītu, jūs varat izmantot šādas komandas:
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.bundle.min.js"></script>Šajās komandās “/path/to/” jāaizvieto ar ceļu uz Bootstrap failiem jūsu datorā. Piemēram, ja Bootstrap faili atrodas jūsu projekta mapē “vendor”, ceļš varētu izskatīties šādi:
<link rel="stylesheet" href="/vendor/bootstrap.min.css">
<script src="/vendor/bootstrap.bundle.min.js"></script>Pēc tam jūs varat sākt izmantot Bootstrap elementus savā HTML dokumentā.
Piezīme: ja vēlaties izmantot Bootstrap no tiešsaistes resursdatora, jūs varat izmantot šādas komandas:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>Šajā gadījumā jums nav jālejupielādē Bootstrap faili, bet gan tie tiks ielādēti tieši no resursdatora, kad lietosiet mājaslapu.
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.