Wprowadzenie do ściągawki Bootstrap 4
Ściągawka Bootstrap 4 zawiera gruntowny przegląd Bootstrap 3. Dokonano wielu zmian w większości składników, takich jak tabele, formularze, listy rozwijane, siatki, paski nawigacyjne itp. Główne zalety frameworków takich jak Bootstrap polegają na tym, że mogą przyspieszyć czasy programowania, nawet przy zachowaniu jakości i spójności aplikacji w całej witrynie. Ściągawka Bootstrap 4 działa we wszystkich nowoczesnych przeglądarkach powyżej Internet Explorera 9.
Bootstrap 4
Bootstrap 4 to najnowsza i najbardziej zaawansowana wersja bootstrap. Jest to najpopularniejsza platforma dla HTML, CSS i JavaScript służąca do tworzenia responsywnych i mobilnych aplikacji. Bootstrap 4, podobnie jak wcześniejsze wersje, jest darmowy i open source. Nie musimy już pisać i przeprojektowywać wszystkiego, od zera zerowego dla różnych zestawów urządzeń. Ponadto nie musimy tracić czasu na kilka godzin, próbując naprawić wszystko i upewnić się, że wygląda i działa poprawnie na różnych przeglądarkach, unikalnych platformach i urządzeniach.
Polecenia i opis w Bootstrap 4 Cheatheet
Niektóre ważne polecenia Bootstrap 4 i ich opis podano poniżej: -
| Polecenia | Opis |
| Naprawiono pojemnik | Stały pojemnik ma stałą szerokość. Po zmianie rozmiaru przeglądarki jej szerokość pozostaje taka sama, dopóki nie zostanie znaleziony punkt przerwania. |
| Pojemnik na płyn | Pojemnik z płynem obejmuje całą szerokość dostępnej rzutni. Rozwija się i kurczy płynnie, co oznacza, że zmienia się wraz ze zmianą rozmiaru przeglądarki. |
| .Przełęcz- | Dotyczy to bardzo małych urządzeń - szerokość ekranu jest mniejsza niż 576 pikseli |
| .Col-sm- | Dotyczy małych urządzeń - szerokość ekranu pozostaje równa lub większa niż 576 pikseli |
| .Col-md- | Dotyczy średnich urządzeń - szerokość ekranu pozostaje równa lub większa niż 768px |
| .Col-lg- | Dotyczy dużych urządzeń - szerokość ekranu jest równa lub większa niż 992px |
| .Col-XL | Dotyczy to dużych urządzeń - szerokość ekranu jest równa lub większa niż 1200 pikseli |
- | h1 Nagłówek rozmiaru paska startowego o wartości 2, 5rem = 40px h2 Rozmiar nagłówka Bootstrap z 2rem = 32px h3 Rozmiar nagłówka Bootstrap z 1, 75rem = 28px h4 Rozmiar nagłówka Bootstrap z 1, 5rem = 24px h5 Rozmiar nagłówka Bootstrap z 1, 25rem = 20px h6 Rozmiar nagłówka Bootstrap z 1rem = 16px |
| Ten element znacznika HTML zapewnia żółty kolor tła z dopełnieniem | |
| Ten element znacznika HTML ma dolną ramkę z kropkami. | |
|
| Dodaj klasę za pomocą
służy do cytowania bloków treści ze źródła, które pochodzą z zewnątrz. |
| .font-weight-pogrubienie | Pogrubiony tekst |
| .font-kursywa | Dla tekstu kursywą |
| . lekki ciężar | Dla lekkiego tekstu |
| .font-normalny | Dla zwykłego tekstu |
| .prowadzić | Dzięki temu akapit wyraźnie się wyróżnia |
| .mały | Wskazuje mniejszy tekst, tzn. Zmniejsza rozmiar czcionki do 85% rozmiaru jej rodzica. |
| .text-left | Wskazuje, że tekst ma być wyrównany do lewej. |
| .text - * - lewo | Wskazuje, że tekst jest wyrównany do lewej na ekranach wszystkich rozmiarów |
| .text-center | Wskazuje tekst wyśrodkowany |
| .text - * - centrum | Wskazuje wyśrodkowany tekst na ekranach wszystkich rozmiarów |
| .tekst-prawo | Wskazuje tekst wyrównany do prawej |
| .text - * - prawo | Wskazuje wyrównany do prawej tekst na ekranach wszystkich rozmiarów |
| .text-justify | Oznacza uzasadniony tekst |
| .tekst-monospace | Ma tekst Monospaced |
| .text-nowrap | Wskazuje brak tekstu zawijania |
| .tekst małe litery | Wskazuje na tekst pisany małymi literami |
| .text-wielkie litery | Oznacza tekst pisany wielkimi literami |
| .text-capitalize | Oznacza tekst pisany wielkimi literami |
| .inicjalizm | Wyświetla tekst wewnątrz elementu znacznika HTML czcionką o mniejszym rozmiarze. Usuwa dostępny domyślny styl listy i lewy margines na zagnieżdżonych elementach listy |
| .stół | Klasa dodaje podstawową stylizację do stołu. |
| . stoły w paski | Klasa dodaje paski zebry do stołu. |
| . obramowane tabelą | Klasa dodaje obramowania ze wszystkich stron tabeli i komórek. |
| .tower-hover | Klasa dodaje efekt aktywowania, tj. Szary kolor tła w dostępnych wierszach tabeli. |
| .tabela-ciemna | Klasa dodaje czarne tło do stołu. |
Darmowe porady i wskazówki dotyczące korzystania z Bootstrap 4 Ściągawka: -
Kilka fajnych porad i wskazówek, jak szybko zhakować funkcje ściągawki bootstrap 4 i stworzyć niesamowitą aplikację na urządzenia mobilne, wymieniono w tej sekcji: -
- Z użyciem. col- (breakpoint) -push- (number) or when using. col- (punkt przerwania) -pull- (liczba) klas do kolumn, kolejność określonych kolumn można zmienić.
- Aby szybko i łatwo ukryć element tylko na urządzeniach xs, istnieje. klasa hidden-xs, można tego użyć do ukrycia.
- . klasę ukrytą (punkt przerwania) można również zastosować do reszty punktów przerwania, a po połączeniu można osiągnąć zakres ukryty, jak wspomniano powyżej. Np .: - klasy .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap jest wyposażony w 5 domyślnych dostępnych stylów przycisków, są to domyślny, podstawowy, sukces i niebezpieczeństwo. Gdy przycisk wymaga zmiany w celu zmniejszenia promienia obramowania lub wypełnienia, najlepszym sposobem na osiągnięcie tego jest zastąpienie pliku .btn
- Aby wyłączyć radia i pola wyboru, należy dodać wyłączoną klasę do nadrzędnego elementu .checkboxor do elementu .radio. następnie dodaj atrybut disabled do określonego wejścia
- Aby wyłączyć przyciski, dodaj wyłączony atrybut do przycisków znaczników HTML
Lub to samo można zrobić poprzez dodanie do przycisków klasy .disabled.
- Aby łatwo wyśrodkować element bloku poziomo, należy dodać do niego klasę bloku środkowego, jak w.
- Jeśli chcesz szybko wyśrodkować zawartość śródliniową lub wykonać elementy śródliniowe wewnątrz div, dodaj klasę .text-center do elementu nadrzędnego.
- Można również łatwo osadzać filmy z YouTube za pomocą klasy Bootstrap-responsive, która jest klasą pomocniczą. Należy wybrać klasę embed-responsive-16by9 lub embed-responsive-4by3 na podstawie proporcji filmu
Bootstrap 4 Ściągawka - zakończenie
Arkusz opisany powyżej bootstrap 4 zapewnia wgląd w to, co jest możliwe dzięki bootstrap 4. Dostępny jest jednak bardziej kompleksowy przewodnik z tysiącami innych parametrów i tagów. Oczywiste jest, że informacji dotyczących wszystkich nie można podać w jednym artykule, albo programista musi pamiętać wszystkie tagi i klasy, aby wykonać programowanie. Najlepszym i najbardziej zalecanym podejściem jest trzymanie takich oszustów pod ręką, a użytkownik powinien odwoływać się do takich arkuszy, gdy zajdzie taka potrzeba. To zapewni, że wszystkie zadania zostaną wykonane w czasie potrzeby, oraz poprawi zrozumienie użytkownika i znajomość bootstrap 4 w danym okresie.
Polecany artykuł
To był przewodnik po Bootstrap 4 Ściągawka tutaj omówiliśmy zawartość i polecenia, a także darmowe porady i wskazówki dotyczące Bootstrap 4 Ściągawka możesz również przeczytać poniższy artykuł, aby dowiedzieć się więcej -
- Ściągawka CSS
- Bootstrap vs Różnice Jquery
- Prosty i przydatny przewodnik do ściągania kodu SQL
- Ostateczny ściągawka dla języka programowania C ++ (podstawy)