Rozwój zaawansowanego interfejsu internetowego Bootstrap Framework

W innym samouczku wyjaśniono wprowadzenie do interfejsów użytkownika Bootstrap, a także samouczek dotyczący projektowania projektu internetowego za pomocą Bootstrap 2.0, w tym przejdziemy do interfejsów i elementów najczęściej używanych w tworzeniu stron internetowych.
Możemy pobrać Bootstrap i umieścić go w katalogu na naszej stronie internetowej lub użyć go, podłączając go do swojej biblioteki online.
Bootstrap to framework open source i otwórz się na szybsze i łatwiejsze tworzenie stron internetowych.
Wyszukując możemy znaleźć wiele wkładów ze społeczności css oraz niestandardowe komponenty i szablony projektowe, które inni użytkownicy stworzyli i udostępnili, istnieje wiele komponentów do tworzenia pasków nawigacyjnych, modalnych okien i wyskakujących okienek, karuzeli obrazów, menu i wielu innych, a także jako wtyczki JavaScript i Jquery do walidacji formularzy i innych funkcjonalności

Tabele i wiersze z efektami

Bootstrap ma już zaprogramowane style CSS i efekty, które możemy wykorzystać np. do zmiany koloru wierszy w tabeli i kiedy myszka nad nią przejedzie.

Kod będzie następujący:

Tabela i wiersze z efektem
 

 
 
Pojazd
 
Źródło
 
Stan
 
Cena
 

 

 

 
 
Fiat 500
 
Madryt
 
Używany
 
9690€
 

 
 
Zgoda Hondy
 
Barcelona
 
Używany
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Używany
 
2800€
 

 

 

Następnie stworzymy menu z podmenu używając tylko Bootstrap CSS:

POWIĘKSZAĆ

Kod będzie następujący:

Wielopoziomowe menu za pomocą CSS Bootstrap
Administrator sprzedaży klientów 

System
Użytkownicy
Ustawienia

Uprawnienia
Serwery

Serwer Vps A
Serwer Vps B


Zużycie zasobów
Utworzyć kopię zapasową

Wyjaśniamy strukturę i jej predefiniowane klasy. Klasa definiuje rozmiar sieci znalezionej domyślnie w Bootstrap.

 .container {szerokość: 1170px; } 

Następujące klasy wierszy zapewniają lewy i prawy margines na całej stronie:

 .wiersz {; margines prawy: -15px; } 

Klasa rozwijanego menu już zawiera klasę Bootstrap i btn btn-primary button. Dodamy podmenu i klasy poziomów, aby móc wygenerować podmenu. Pamiętajmy, że klasy mają hierarchię, dlatego jeśli nazwiemy tę samą klasę, którą mamy w Bootstrap i dodamy do niej jakiś atrybut, pierwszeństwo ma ostatnia złożona deklaracja.
Dzieje się tak w przypadku, gdy dodajemy atrybut shift left, mimo że klasa jest już zdefiniowana w bootstrap.min.css

 .menu rozwijane {po lewej: 150px; } 

Popup CSS i jquery z zawartością html
Użyjemy funkcji popover, która wyświetla wyskakujące okienko, gdy link zostanie najechany myszą, a zmienna content ma kod html do wyświetlenia.
Weźmiemy poprzednią tabelę i dodamy kolumnę do arkusza technicznego.
W każdym linku będziemy mieli następujące zdanie, a następnie wraz z id wywołamy skrypt.

 
 

 
 
Pojazd
 
Źródło
 
Stan
 
Cena
 
Zdjęcia
 

 

 

 
 
Fiat 500
 
Madryt
 
Używany
 
9690€
 
Arkusz danych
 

 
 
Honda akord
 
Barcelona
 
Używany
 
14500€
 
Arkusz danych
 

 

 

 

Jeśli mamy szeroką listę, możemy stworzyć funkcję JQuery, w której możemy wysyłać zawartość dynamiczną, na przykład wyodrębnioną z bazy danych.

Kolumny i bloki na stronie

Bootstrap opiera się na szerokości 1200 pikseli, podzielonej na 12 bloków, które pokrywają 99% struktury sieci, każdy blok zajmuje 8,3333%, co odpowiada 100 pikselom i ma również przestrzeń 1 piksela.
Zawsze kombinacja bloków w tej samej linii, aby dodać 12, na przykład:
Dwa bloki po 3 i jeden po 6

Bloki Bootstrapa
Blok Col-md-3 300px.
Blok Col-md-6 600px.
Blok Col-md-3 300px.
Blok 800px col-md-8.

Poniżej umieszczamy blok o rozmiarze 8 czyli 800 pikseli:

Te bloki reagują, ponieważ są skonfigurowane w CSS Bootstrap. Tutaj możemy zobaczyć próbkę tego, jak klocki dostosowują się do zmiany ekranu urządzenia mobilnego.

Jak dostosować Bootstrap do zmiany stylu i funkcjonalności?

Aby stworzyć style i funkcjonalności, które będą kompatybilne z Bootstrapem, musimy wykorzystać go jak każdą inną bibliotekę css czy js, jako kolejny framework projektu, w tym przypadku będzie on służył do projektowania i funkcjonalności w przeglądarce użytkownika. Powinniśmy unikać reformowania oryginalnych bibliotek, ale zadokować własne, więc gdy programiści Bootstrap wydadzą aktualizację, nie będziemy mieli problemu z włączeniem nowych, jeśli zachowamy nasze zmiany oddzielnie.
Aby zdefiniować własne arkusze stylów, musimy utworzyć nowy plik stylów CSS, aby zdefiniować nasze zmiany bez wpływu na oryginalny CSS. Zapamiętajmy na przykład hierarchię.
Jeśli w Bootstrap css bootstrap.min.css

 .col-md-3 {szerokość: 25%; } 

I chcemy, żeby miał obramowanie, wtedy w osobnym pliku my styles.css możemy zadeklarować:

 .borderojo {obramowanie: 1px stałe czerwone} 

Następnie na stronie wywołujemy oba pliki

W bloku stosujemy to w następujący sposób:

Blok Col-md-3 300px.

Byłoby to równoznaczne z zadeklarowaniem tego w ten sposób:

 kol-md-3 {szerokość: 25%; obramowanie: 1px stałe czerwone; } 

A teraz, jeśli z jakiegoś powodu miał dwa podobne stwierdzenia, załóżmy, że…

 .borderojo {obramowanie: 1px stałe czerwone; } .clientblock {obramowanie: 1px stałe niebieskie; }
Blok Col-md-3 300px.

Kto zwycięża, to zdanie ogłoszone jako ostatnie. Dlatego blok będzie miał niebieską ramkę.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt