Samouczek ładowania początkowego


samouczek bootstrap 4


Bootstrap to front-end frameworka, który pomaga szybciej i łatwiej budować strony responsywne dla urządzeń mobilnych. Po raz pierwszy opracowany przez Twittera, Bootstrap jest teraz używany do wszystkiego, od tworzenia aplikacji internetowych po motywy WordPress. Jest również całkowicie darmowy, wszechstronny i intuicyjny.

Dzięki Bootstrap możesz wyczarować złożone strony internetowe ze standardowego HTML i dostosować je do swoich potrzeb. Bootstrap jest również wyposażony w wiele wtyczek jQuery, które mogą zapewniać dodatkowe funkcje, takie jak karuzele, przyciski, podpowiedzi i inne.

Wreszcie, daje wiele skrótów do tworzenia stron internetowych, które oszczędzają czas i energię. Wszystko czego potrzebujesz to podstawowa znajomość HTML i CSS do tworzenia responsywnych, najpierw mobilnych i kompatybilnych ze wszystkimi nowoczesnymi przeglądarkami.

P.S. Bootstrap nie jest idealną opcją dla kompletnych początkujących. Przydałaby się znajomość HTML i CSS. Alternatywnie możesz użyć konstruktorów stron lub WordPressa do stworzenia strony internetowej.

Jak stworzyć stronę internetową za pomocą Bootstrap (spis treści):

  1. Krok 1: Konfiguracja i przegląd
    1. Utwórz stronę HTML
    2. Załaduj Bootstrap przez CDN lub hostuj go lokalnie
    3. Dołącz jQuery
    4. Załaduj JavaScript Bootstrap
    5. Poskładać wszystko do kupy
  2. Krok 2: Zaprojektuj stronę docelową
    1. Dodaj pasek nawigacyjny
    2. Uwzględnij niestandardowy CSS
    3. Utwórz kontener zawartości strony
    4. Dodaj obraz tła i niestandardowy JavaScript
    5. Dodaj nakładkę
    6. Dołącz tytuł strony i treść
    7. Utwórz przycisk wezwania do działania
    8. Skonfiguruj sekcję trzykolumnową
    9. Dodaj formularz kontaktowy
    10. Utwórz dwukolumnową stopkę
    11. Dodaj zapytania o media
    12. Uruchom swoją witrynę na żywo

Całkowity czas utworzenia strony internetowej za pomocą Bootstrap: 3-4 godziny.
Poziom umiejętności: Początkujący do średniozaawansowanego

Krok 1: Konfiguracja i przegląd


Aby użyć Bootstrap, musisz najpierw zintegrować go ze środowiskiem programistycznym, czyli stroną internetową. W tym celu masz dwie różne możliwości: załaduj go zdalnie lub pobierz i używaj Bootstrap lokalnie. Jednak w obu przypadkach musisz najpierw coś załadować.,

1. Utwórz stronę HTML

Jako pierwszy krok stworzymy prosty szablon HTML jako bazę, w której użyjemy Bootstrap. W tym celu pierwszą rzeczą, którą chcesz zrobić, jest utworzenie folderu na komputerze lub serwerze dla plików projektu. W takim przypadku po prostu to nazwiemy bootstrap. Tutaj utwórz nowy plik tekstowy i wywołaj go index.html. Otwórz go w wybranym edytorze tekstu (np. Notatnik++), a następnie wklej do niego kod poniżej.





Samouczek Bootstrap Przykładowa strona








Nie zapomnij zapisać pliku przed przejściem dalej!

2a. Załaduj Bootstrap przez CDN

Jak już wyjaśniono, Bootstrap składa się głównie z arkuszy stylów i skryptów. Jako takie mogą być ładowane do nagłówka i stopki strony internetowej, podobnie jak inne zasoby, takie jak niestandardowe czcionki. Framework oferuje do tego ścieżkę dostępu do CDN (sieci dostarczania treści). Możesz go znaleźć na stronie Strona pobierania Bootstrap, dalej poniżej.

Aby pobrać Bootstrap na swoją stronę, po prostu wklej poniższy kod do pliku sekcja twojego szablonu.

Gdy teraz zapiszesz plik, każda przeglądarka, która go otworzy, automatycznie załaduje zasoby Bootstrap.

Korzystanie ze zdalnej metody jest dobrym pomysłem, ponieważ wielu użytkowników będzie już miało ramkę w pamięci podręcznej przeglądarki. W takim przypadku nie będą musieli go ponownie ładować, gdy wejdą na Twoją witrynę, co skróci czas ładowania strony. W związku z tym jest to zalecana metoda dla witryn na żywo.

Jednak w celu eksperymentowania i programowania lub jeśli chcesz być niezależny od połączenia internetowego, możesz również uzyskać własną kopię Bootstrap. To właśnie robię dla tego samouczka, ponieważ powoduje to również mniej kodu do opublikowania.

2b. Host Bootstrap lokalnie

Alternatywnym sposobem skonfigurowania Bootstrap jest pobranie go na dysk twardy i użycie plików lokalnie. Opcje pobierania znajdują się w tym samym miejscu, co łącza do wersji zdalnej. Tutaj koniecznie pobierz skompilowane pliki CSS i JS. Nie potrzebujesz plików źródłowych.

Po wykonaniu tego rozpakuj plik i skopiuj jego zawartość do tego samego katalogu co index.html. Następnie możesz załadować CSS Bootstrap do swojego projektu w następujący sposób:

Zauważysz, że obejmuje to ścieżkę do pliku, w którym można znaleźć plik Bootstrap. W twoim przypadku upewnij się, że ścieżka odpowiada Twojej rzeczywistej konfiguracji. Na przykład nazwy katalogów mogą się różnić, jeśli pobrałeś inną wersję Bootstrap.

3. Dołącz jQuery

Aby uzyskać pełną funkcjonalność Bootstrap, musisz także załadować bibliotekę jQuery. Tutaj także musisz zdalnie załadować go lub hostować lokalnie.

W pierwszym przypadku znajdziesz link do najnowszej wersji jQuery tutaj. Możesz go użyć do załadowania biblioteki na swoją stronę, umieszczając wiersz kodu poniżej, tuż przed informacją na Twojej stronie.

Alternatywnie, pobierz jQuery (kliknij prawym przyciskiem myszy> Zapisz link jako…), rozpakuj i umieść w folderze projektu. Następnie umieść go w tym samym miejscu, co plik:

Ponownie upewnij się, że ścieżka odpowiada konfiguracji.

4. Załaduj JavaScript Bootstrap

Ostatnim krokiem w konfiguracji Bootstrap jest załadowanie biblioteki JavaScript Bootstrap. Są one zawarte w pobranej wersji frameworka, a także linki do zdalnych źródeł w tym samym miejscu, co wcześniej. Jednak załadujemy go w innym miejscu niż arkusz stylów. Zamiast nagłówka przechodzi do stopki strony, zaraz po wywołaniu jQuery.

Możesz to nazwać zdalnie w następujący sposób:

Lub lokalnie tak:

5. Złóż to wszystko razem

Jeśli poprawnie wykonałeś powyższe kroki, powinieneś otrzymać plik, który wygląda tak dla zdalnego rozwiązania:

   Samouczek Bootstrap Przykładowa strona         

Alternatywnie, jeśli hostujesz lokalnie, szablon strony powinien przypominać poniższy kod:

   Samouczek Bootstrap Przykładowa strona         

Jeśli to właśnie masz i zapisałeś swoją pracę, możesz teraz przejść do następnego kroku.

Krok 2: Zaprojektuj stronę docelową


W porządku, to było co prawda dużo pracy przygotowawczej. Nie było to jednak bardzo trudne, prawda? Plus, teraz zaczyna się zabawa.

W tej chwili, gdy przejdziesz do przykładowej witryny, powinieneś po prostu zobaczyć pustą stronę. Czas to zmienić.

1. Dodaj pasek nawigacyjny

Pierwszą rzeczą, którą chcemy zrobić, jest dodanie paska nawigacyjnego u góry strony. Dzięki temu odwiedzający mogą poruszać się po Twojej witrynie i odkrywać pozostałe strony.

W tym celu wykorzystamy pasek nawigacyjny klasa. To jest jeden z elementy domyślne Bootstrap. Tworzy element nawigacyjny, który domyślnie reaguje i automatycznie zwinie się na mniejszych ekranach. Oferuje także wbudowane wsparcie dla dodawania marki, schematów kolorów, odstępów i innych elementów.

Użyjemy go jak poniżej i opublikujemy tuż pod etykietka:

 Logo   

Niektóre wyjaśnienia kodu:

  • navbar-expand-md – Oznacza to, w którym momencie pasek nawigacyjny rozwija się od ikony pionowej lub hamburgera do pełnowymiarowego paska poziomego. W tym przypadku ustawiliśmy go na średnie ekrany, które w Bootstrap są większe niż 768px.
  • marka paska nawigacyjnego – Służy do znakowania Twojej witryny. Możesz również dołączyć plik obrazu logo.
  • przełącznik paska nawigacyjnego – Oznacza przycisk przełączania zwiniętego menu. Kawałek data-toggle = "collapse" określa, że ​​zmieni się to w menu hamburgerów, a nie w menu rozwijane, co jest drugą opcją. Ważne jest, aby zdefiniować cel danych z identyfikatorem CSS (zdefiniowanym przez #) i zawiń a div o tej samej nazwie wokół faktycznego pasek nawigacyjny element.
  • ikona paska nawigacyjnego – Jak zapewne można się domyślić, tworzy to ikonę, którą użytkownicy klikają, aby otworzyć menu na mniejszych ekranach.
  • navbar-nav – Klasa dla
      element listy, który przechowuje elementy menu. Te ostatnie są oznaczone symbolem element nawigacyjny i nav-link.

    Dlaczego tyle to wyjaśniam?

    Ponieważ o to właśnie chodzi w Bootstrap. Masz wszystkie te standardy, które pozwalają szybko tworzyć elementy z niektórymi klasami HTML i CSS. Nie musisz pisać żadnego kodu CSS, aby zapewnić stylizację, wszystko jest już skonfigurowane w Bootstrap. Ponadto wszystko jest gotowe do pracy od razu po wyjęciu z pudełka! Zaczynasz rozumieć, jak to jest pomocne?

    Powyższe wystarczy, aby dodać pasek nawigacyjny do swojej witryny. Jednak w tej chwili nadal wygląda bardzo mało.

    samouczek bootstrap dodaj pasek nawigacji

    Wynika to z faktu, że nie ma zbyt wiele stylizacji. Możesz dodawać domyślne kolory (na przykład nadając paskowi nawigacyjnemu klasę podobną do bg-dark navbar-dark), zamiast tego chcemy dodać własne.

    2. Dołącz niestandardowy CSS

    Na szczęście, jeśli chcesz zmienić domyślny styl, nie musisz przedzierać się przez dużą bibliotekę arkuszy stylów i wprowadzać zmiany ręcznie. Zamiast tego, podobnie jak w przypadku motywu podrzędnego WordPress, możesz dodawać własne pliki CSS, których możesz użyć do zastąpienia istniejącego stylu.

    W tym celu wystarczy utworzyć pusty plik za pomocą edytora tekstu i wywołać go main.css. Zapisz go, a następnie dodaj go do sekcji głównej witryny Bootstrap w następujący sposób:

    Jest to kod arkusza stylów znajdującego się w katalogu głównym. Jeśli zdecydujesz się umieścić w środku css folder, pamiętaj, aby podać poprawną ścieżkę w łączu.

    Stąd możesz dodać niestandardowy CSS do swojej witryny. Na przykład, aby stylizować pasek nawigacyjny i jego elementy, możesz użyć znaczników w następujący sposób:

    ciało { wypełnienie: 0; margines: 0; tło: # f2f6e9; } /*--- Pasek nawigacyjny ---*/ .pasek nawigacyjny { tło: # 6ab446; } .nav-link, .navbar-brand { kolor: #fff; kursor: wskaźnik; } .nav-link { margines z prawej: 1em! ważne; } .nav-link: hover { kolor: # 000; } .navbar-collapse { justify-content: flex-end; }

    A oto wynik:

    pasek nawigacji w stylu samouczka bootstrap

    Wygląda lepiej niż wcześniej, prawda??

    3. Utwórz kontener zawartości strony

    Następną rzeczą, którą chcesz po pasku nawigacji, jest pojemnik na zawartość strony. Jest to naprawdę łatwe w Bootstrap, ponieważ wszystko czego potrzebujesz to poniżej tagu paska nawigacyjnego:

    Zwróć uwagę na płyn do naczyń klasa. To kolejna z tych domyślnych klas Bootstrap. Zastosowanie do div element automatycznie stosuje do niego kilka CSS.

    The -płyn część zapewnia, że ​​pojemnik rozciąga się na całej szerokości ekranu. Jest też tylko pojemnik, który ma ustalone szerokości, więc zawsze będzie miejsce po obu stronach ekranu.

    Jeśli jednak ponownie załadujesz stronę, nadal nic nie zobaczysz (chyba że użyjesz narzędzi programistycznych). To dlatego, że utworzyłeś tylko pusty element HTML. To zacznie się teraz zmieniać.

    4. Dodaj obraz tła i niestandardowy JavaScript

    Jako kolejny krok w tym samouczku Bootstrap chcemy dołączyć obraz tła na pełnym ekranie dla naszego nagłówka strony docelowej. W tym celu będziemy musieli użyć jQuery, aby rozciągnąć obraz na cały ekran.

    Robisz to w ten sam sposób, w jaki dołączasz niestandardowy CSS. Najpierw utwórz plik tekstowy o nazwie main.js i umieść go w folderze witryny. Następnie zadzwoń przed zamknięciem oznacz w środku index.html.

    Następnie możesz skopiować i wkleić ten fragment kodu, aby utworzyć

    rozciąganie elementu na całym ekranie:
    $ (dokument) .ready (function () { $ („. header”). height ($ (okno) .height ()); })

    Potem pozostaje tylko ustawić obraz tła. Możesz to zrobić tak w środku main.css:

    .nagłówek { background-image: url ('images / header-background.jpg'); rozmiar tła: okładka; pozycja tła: środek; pozycja: względna; }

    Jeśli umieścisz obraz o wystarczającej wielkości w miejscu określonym przez ścieżkę powyżej, osiągniesz wynik podobny do tego:

    samouczek ładowania zawiera obraz tła nagłówka

    5. Dodaj nakładkę

    Aby obraz tła był wyjątkowo stylowy, dodamy również nakładkę. W tym celu utworzysz kolejny element div wewnątrz tego, który właśnie zawarłeś wcześniej.

    Następnie możesz dodać następujące elementy do niestandardowego pliku CSS:

    .narzuta { pozycja: absolutna; min-wysokość: 100%; min-szerokość: 100%; po lewej: 0; góra: 0; tło: rgba (0, 0, 0, 0,6); }

    Spowoduje to utworzenie tej ładnej nakładki na wcześniej wprowadzony obraz:

    samouczek ładowania początkowego dodaj nakładkę

    6. Dołącz tytuł strony i treść

    Teraz prawdopodobnie chcesz dodać tytuł strony w postaci nagłówka plus trochę tekstu podstawowego. W ten sposób odwiedzający będą od razu wiedzieć, na której stronie się znajdują i czego mogą się po nich spodziewać.

    Aby je utworzyć, po prostu dodaj ten fragment kodu do kontenera skonfigurowanego w ostatnim kroku, poniżej nakładki:

    Witamy na stronie docelowej!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.

    Następnie dodaj następujący znacznik do main.css.

    .opis { po lewej: 50%; pozycja: absolutna; góra: 45%; przekształcać: tłumaczyć (-50%, -55%); wyrównanie tekstu: środek; } .opis h1 { kolor: # 6ab446; } .opis p { kolor: #fff; rozmiar czcionki: 1.3rem; wysokość linii: 1,5; }

    Gdy to zrobisz, strona docelowa wygląda teraz tak:

    samouczek bootstrap dodaj tytuł i opis strony

    To naprawdę zaczyna się łączyć, prawda??

    7. Utwórz przycisk CTA

    Żadna strona docelowa nie jest kompletna bez wezwania do działania, najczęściej w formie przycisku. Z tego powodu nie byłoby nieuwzględnienia sposobu tworzenia takiego w tym samouczku Bootstrap.

    Framework oferuje wiele narzędzi do szybkiego i łatwego tworzenia przycisków. Możesz znaleźć wiele przykładów tutaj. W moim przypadku dodaję następujący znacznik tuż pod zawartością strony wewnątrz pojemnik:

    Oprócz tego dodaję ten CSS do main.css:

    .przycisk opisu { obramowanie: 1px bryła # 6ab446; tło: # 6ab446; promień obramowania: 0; kolor: #fff; } .przycisk opisu: najedź { border: 1px solid #fff; tło: #fff; kolor: # 000; }

    Po zapisaniu i ponownym załadowaniu wygląda to tak:

    samouczek bootstrap dodaj przycisk wezwania do działania

    8. Skonfiguruj sekcję trzykolumnową

    Jestem już całkiem zadowolony z tego, jak wszystko się kształtuje. Jednak jeszcze nie skończyliśmy ze stroną. Następnie chcemy utworzyć trzy kolumny poniżej głównej zawartości, aby uzyskać dodatkowe informacje. Jest to specjalność Bootstrap, ponieważ gra na swoją siłę: tworzenie siatki. Oto jak to zrobić w tym przypadku:

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Pierwszą rzeczą, którą zauważysz, jest rząd element. Potrzebujesz tego za każdym razem, gdy tworzysz kolumny, które pełnią rolę kontenera dla siatki.

    Jeśli chodzi o kolumny, wszystkie mają kilka klas: col-lg-4, col-md-4 i col-sm-12. Oznacza to, że mamy do czynienia z kolumnami i ich rozmiarem na różnych ekranach.

    Aby to zrozumieć, musisz wiedzieć, że w siatce Bootstrap wszystkie kolumny w jednym rzędzie zawsze sumują się do liczby 12. Tak więc, nadanie im powyższych klas oznacza, że ​​zajmą jedną trzecią ekranu na dużym i średnim ekrany (12 podzielone przez 3 to 4), ale cały ekran na małych urządzeniach (12 z 12 kolumn).

    To ma sens, prawda??

    Zauważysz również, że dodałem zdjęcia i dodałem .płyn do obrazowania klasa im. Ma to na celu umożliwienie im reagowania, tak aby skalowały się wraz z ekranem, na którym wyświetlana jest strona.

    Ponadto w zwykłym miejscu znajduje się następująca stylizacja:

    .funkcje { margines: 4em auto; wypełnienie: 1em; pozycja: względna; } .tytuł funkcji { kolor: # 333; rozmiar czcionki: 1.3rem; grubość czcionki: 700; margines na dole: 20px; transformacja tekstu: wielkie litery; } .funkcje img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); margines na dole: 16px; }

    Po dodaniu poniżej głównej zawartości i zapisaniu wygląda następująco:

    samouczek bootstrap dodaj sekcję trzech kolumn

    9. Dodaj formularz kontaktowy

    Zauważysz, że jedno z nowych pól jest nadal puste. Było to celowe, ponieważ chcemy dodać do niego formularz kontaktowy. Jest to bardzo normalna praktyka dla stron docelowych, aby umożliwić odwiedzającym kontakt.

    Tworzenie formularza kontaktowego w Bootstrap jest dość łatwe:

    Skontaktuj się!

    Do tej pory nie muszę wyjaśniać znaczników, aby tworzyć kolumny. Oto, co oznacza reszta znaczników:

    • grupa form – Służy do zawijania pól formularza w celu formatowania.
    • kontrola formy – Oznacza pola formularza, takie jak dane wejściowe, pola tekstowe itp.

    Z formularzami można zrobić znacznie więcej, co można znaleźć w dokumentacja. Jednak do celów demonstracyjnych wystarczy powyższe. Umieść go w pozostałej pustej kolumnie, a następnie dodaj tę stylizację main.css:

    .funkcje .form-control, .funkcje wprowadzania { promień obramowania: 0; } .funkcje .btn { kolor tła: # 589b37; obramowanie: stały 1px # 589b37; kolor: #fff; margines na górze: 20px; } .funkcje .btn: hover { kolor tła: # 333; obramowanie: stały 1px # 333; }

    Gdy to zrobisz, otrzymasz formularz podobny do tego:

    samouczek bootstrap zawiera formularz kontaktowy

    10. Utwórz stopkę z dwoma kolumnami

    W porządku, zbliżamy się do końca samouczka Bootstrap. Ostatnią rzeczą, którą chcesz dodać do strony docelowej, jest sekcja stopki z dwiema kolumnami. Do tej pory nie powinno to już stanowić większego problemu.

    Dodatkowe informacje

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Kontakt

    1640 Riverside Drive, Hill Valley, Kalifornia
    [chroniony e-mailem]
    + 01 234 567 88
    + 01 234 567 89

    Oprócz zwykłych znaczników siatki, w tej sekcji wyróżniono kilka możliwości modyfikacji typografii za pomocą Bootstrap:

    • wielkie litery
    • font-weight-pogrubiony
    • centrum tekstowe

    Nazwy klas, które prowadzą, powinny być całkiem jasne. Możesz znaleźć więcej informacji na temat Bootstrap i typografii tutaj.

    Oprócz powyższego możesz użyć stylizacji w następujący sposób:

    .Stopka stony { kolor tła: # 222; kolor: #ccc; wypełnienie: 60px 0 30px; } .prawa autorskie stopki { kolor: # 666; wypełnienie: 40px 0; }

    Daje to piękną stopkę, która wygląda tak:

    samouczek ładowania początkowego obejmuje stopkę strony

    11. Dodaj zapytania o media

    Strona jest już w zasadzie gotowa. Jest również w pełni odpowiedzialny. Jednak w mobilnym widoku przeglądarki górna część nie wychodzi jeszcze całkiem dobrze.

    błąd samouczka bootstrap w projektowaniu mobilnym

    Jednak nie martw się, możesz to łatwo naprawić za pomocą prostego zapytania medialnego. O ile nie używasz SASS do kompilacji strony Bootstrap, działają one tak samo jak w innych przypadkach. Trzeba tylko pamiętać wstępnie ustawione punkty przerwania zawarte w Bootstrap.

    W związku z tym, aby rozwiązać powyższy problem, możesz po prostu dołączyć taki kod:

    @media (maksymalna szerokość: 575,98px) { .opis { po lewej: 0; wypełnienie: 0 15px; pozycja: absolutna; góra: 10%; transform: brak; wyrównanie tekstu: środek; } .opis h1 { rozmiar czcionki: 2em; } .opis p { rozmiar czcionki: 1.2rem; } .funkcje { margines: 0; } }

    Potem wszystko jest tak, jak powinno być:

    samouczek bootstrap dodaj zapytanie o media

    12. Prześlij swoją witrynę do hosta internetowego

    Jeśli podążasz za nimi, powinieneś teraz ustawić gotową stronę internetową, która również działa na urządzeniach mobilnych i jest całkowicie responsywna.

    Jednak jak dotąd nikt oprócz ciebie nie widzi tego. Aby to zmienić, potrzebujesz hosta i domeny. W ten sposób ludzie mogą wprowadzić adres strony internetowej na pasku przeglądarki, a następnie uzyskać dostęp do Twojej nowej witryny Bootstrap online.

    Aby im na to pozwolić, musisz przesłać witrynę na swój serwer. Możesz to zrobić za pomocą klienta FTP takiego jak FileZilla. Zbierz adres hosta FTP, nazwę użytkownika i hasło od swojego dostawcy hostingu, aby połączyć się zdalnie z serwerem. Gdy to zrobisz, powinieneś być w stanie zobaczyć znajdujące się tam pliki i katalogi.

    załaduj stronę bootstrap na serwer przez ftp

    Przejdź do katalogu, na który wskazuje Twoja domena (zazwyczaj do katalogu głównego). Gdy to zrobisz, po prostu znajdź folder z plikami Bootstrap na dysku twardym, zaznacz wszystkie pliki w środku, a następnie przeciągnij je na serwer, aby rozpocząć przesyłanie. Proces ten potrwa chwilę, w zależności od szybkości połączenia, a także liczby i rozmiaru plików.

    Jednak gdy to zrobisz, po uzyskaniu dostępu do domeny powinieneś zobaczyć gotową witrynę w oknie przeglądarki.

    samouczek bootstrap zakończony strona docelowa

    Nieźle jak na kilka linii kodu, prawda?

    Mówiąc o tym, jeśli chcesz mieć cały kod strony, w tym niestandardowy CSS i JavaScript, możesz pobrać je wszystkie tutaj. Dzięki temu masz wszystko, czego potrzebujesz, aby utworzyć stronę docelową za pomocą Bootstrap.

    Wniosek

    Bootstrap to środowisko programistyczne typu open source, z którego każdy może korzystać za darmo. Pozwala szybko tworzyć prototypy projektów, tworzyć strony internetowe i ogólnie działać na ziemi.

    Jak widzieliście w tym samouczku Bootstrap dla początkujących, potrzebuje jedynie podstawowej wiedzy o HTML, CSS i opcjonalnym jQuery. Chociaż nie jest tak wygodny jak korzystanie z WordPress, Bootstrap jest nadal ważną alternatywą do tworzenia stron internetowych.

    Do tej pory wiesz, jak skonfigurować i zainstalować Bootstrap i jego komponenty, utworzyć prostą stronę docelową, dołączyć podstawową zawartość i nadać jej styl. Możesz tworzyć menu nawigacyjne, ustawiać obrazy tła, zawierać przyciski, kolumny i formularze kontaktowe.

    Oczywiście trzeba się jeszcze więcej nauczyć.

    Dzięki temu podstawowemu samouczkowi Bootstrap znasz teraz wystarczająco dużo, aby iść dalej do przodu. Jeśli chcesz zanurzyć się głębiej w ramy, dobrym punktem wyjścia jest W3Schools. Poza tym mamy nadzieję, że spodobał Ci się ten samouczek dla początkujących i chciałbyś poznać jego przemyślenia i doświadczenia.

    Aktualizacja: Stworzyliśmy również ściągacz bootstrap dla początkujących w wersjach .pdf i .png.

    Czy masz jakieś przemyślenia na temat samouczka Bootstrap powyżej? Pytania, komentarze, prośby? Daj nam znać w sekcji komentarzy poniżej!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map