Framework CSS o nazwie Bootstrap jest jedną z powszechnie używanych ram do tworzenia i projektowania aplikacji internetowych. Ma style HTML, CSS i niektóre komponenty projektowe JavaScript do formularzy, przycisków, nawigacji i innych modułów interfejsu. Przed użyciem bootstrap należy dodać wymagane łącza CSS, JavaScript i JQuery.

Ten zapis opisuje metody dodawania bootstrap do projektu.

Jak dodać bootstrap do projektu?

Istnieją dwa sposoby dodania bootstrap do projektu:

• • Pobierz bootstrap
  • Dodawanie bootstrap z CDN

Metoda 1: Pobierz bootstrap

Jeśli chcesz hostować bootstrap na swojej stronie, pobierz bootstrap z jej oficjalnej strony internetowej i postępuj zgodnie z instrukcjami.

Metoda 2: Dodanie bootstrap z CDN

Globalna sieć o nazwie CDN lub sieć dostarczania treści buforuje zasób statyczny dla strony internetowej na całym świecie. Zasoby obejmują obrazy, filmy, CSS i inne. Sprawia, że ​​czas ładowania witryny jest szybszy, ładując pliki statyczne z stosunkowo bliskiego serwera CDN. Maxcdn oferuje obsługę CDN dla JavaScript i CSS Bootstrap. JQuery musi być również uwzględnione.

Zaimplementujmy przykład, aby utworzyć stronę internetową za pomocą Bootstrap.

Przykład: Utwórz stronę internetową za pomocą Bootstrap

Aby utworzyć stronę internetową z Bootstrap, wypróbuj następujące kroki:

Krok 1: Utwórz plik HTML

Najpierw utwórz plik HTML i nazwij go rozszerzeniem „.html". W naszym przypadku nazwaliśmy plik HTML „indeks.html". Po utworzeniu go dodaj wymagane elementy, jak pokazano poniżej:

Krok 2: Dodaj wymagany łącze Bootstrap CSS

Teraz dodaj wymagany łącze CSS Bootstrap w elemencie „”:

Załóżmy, że używamy Bootstrap 4, więc odwiedź oficjalną stronę Bootstrap 4 i skopiuj link CSS do sekcji HTML Head.

Bootstrap CSS

Krok 3: Dodaj wymagane tagi skryptów

Istnieje kilka elementów ładowania początkowego, które potrzebują JavaScript do prawidłowego funkcjonowania. Mówiąc dokładniej, potrzebują wtyczek JQuery, Popper i JavaScript. Aby dodać je do swojego projektu, użyj „„Tagi, tuż przed„„Zamknięcie:

Ważna uwaga: Sekwencja tagów „” nie może być zmieniana, taka jak jQuery, należy umieścić na pierwszym miejscu, JS i trzeci popper.JS.

Bonusowa wskazówka

Istnieje prosty i najłatwiejszy sposób na włączenie bootstrap w swoim projekcie. Szablon startowy można skopiować z oficjalnej strony internetowej Bootstrap i wkleić do twojego projektu.

Krok 4: Dodaj elementy HTML

Z powodzeniem dodaliśmy niezbędne łącza bootstrap. Teraz dodaj elementy HTML, aby utworzyć stronę internetową. Na przykład w trwającym przykładzie dodaj elementy HTML wewnątrz „„Element, jak wspomniano poniżej:

• • Najpierw dodaj „„Element do utworzenia obszaru dla elementów. Przypisz to „Centrum tekstu" I "BG-info„Zajęcia.
  • Wewnątrz „” dodaj „

    „Tag z klasą”Warnowanie tekstowe”Aby określić nagłówek w kolorze żółtym.

  • Następnie dołącz trochę treści tekstu za pomocą „

    " element.

Html

Linuxhint

Linuxhint zapewnia najlepsze artykuły i filmy do celów edukacyjnych!

Klasy bootstrap zastosowane w wyżej wymienionym przykładzie wyjaśniono poniżej:

• • „„Centrum tekstu„Centrum klasy wyrównuje tekst.
  • "BG-info”Dodaje niebieski kolor.
  • "Warning BG”Stosuje żółty kolor do tekstu.

Zapisz kod i uruchom go w przeglądarce. Strona internetowa będzie wyglądać tak:

W ten sposób możesz dodać bootstrap do swojego projektu.

Wniosek

Aby dodać bootstrap do swojego projektu, „Pobierz bootstrap" Lub "Użyj Bootstrap CDN”To dwie opcje. Aby pobrać Bootstrap, odwiedź oficjalną stronę internetową i śledź przewodnik, a jeśli nie chcesz jej pobrać, użyj go za pośrednictwem CDN. Aby to zrobić, dodaj link CSS w „”Sekcja HTML i dodaj tagi JQuery, JavaScript i Popper.JS w pobliżu zamknięcia ””Tag. Następnie dołącz elementy HTML po znaczniku rozpoczęcia „" element. Ten zapis wyjaśnił, jak dodać bootstrap do projektu z przykładem.