Wprowadzenie do paneli Bootstrap
Treść danych musi być czysta, schludna i odpowiednia. Atrakcyjne jest miejsce w treści, kolorowy nagłówek i stopka oraz ramka dla zawartości. Atrakcyjna treść jest łatwa do czytania i zrozumienia. Panel ładowania początkowego działa dokładnie tak samo w przypadku treści. Służy do obramowania zawartości z określonym wypełnieniem. Działa dla zawartości, nagłówka, stopki, a także w innym kolorze. Podstawowy panel bootstrap działa przy użyciu klasy „.panel” w elemencie div, przy czym wymagana jest również klasa „.panel-default”.
Przykład:
THIS IS A DEFAULT PANEL
Wynik:
Rodzaje paneli Bootstrap
Panele są podzielone na kategorie według różnych klasyfikacji i celów, które są następujące. Treść ma część nagłówka, treści i stopki. Aby stworzyć elegancką treść i styl z przeznaczeniem, panel przedstawia następujące kategorie:
1. Panel z nagłówkiem
W nagłówku panelu obramowanie otoczone nagłówkiem treści i treścią z dopełnieniem formatu. Panel nagłówka add class = „nagłówek panelu”, a treść treści add class = „panel-body”.
Kod:
Content Heading
Content Body
Wynik:
Możesz dodać class = „panel-title”, aby osobno zmodyfikować nagłówek treści. Ta klasa jest używana rzadko, ponieważ klasa nagłówka panelu samodzielnie modyfikuje wszystkie style.
2. Panel ze stopką
W stopce panelu obramowanie otoczone stopką treści i treścią z dopełnieniem formatu. Panel stopki add class = „panel-stopka”, a treść treści add class = „panel-body”.
Kod:
Content Body
Content Footer
Wynik:
3. Grupa paneli
Ten panel służy do wiązania wielu paneli jednocześnie. Usuwa margines dolnego panelu i tworzy grupę paneli.
Kod:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Wynik:
4. Panele z klasami kontekstowymi
Aby uzyskać bardziej znaczący kontekstowy panel ładujący, należy zaprojektować różne klasy dla kontekstu. Każda pozycja klasy kontekstowej ma inny kolor, aby pokazać wpływ kontekstu. Te klasy paneli są poniżej z ich przykładami i wynikami,
- .panel-default: Jest to domyślny panel używany w kontekście.
Kod:
Content Heading
Content Body
Wynik:
- .panel-primary: Ta klasa używana w kontekście podstawowym oznacza konteksty główne.
Kod:
Content Heading with panel-primary class /div>
Content Body2
Wynik:
- .panel-sukces: Ta klasa jest używana, gdy jakiś kontekst ma znaczenie sukcesu.
Kod:
Content Heading with panel-success class
Content Body3
Wynik:
- .panel-info: Ta klasa jest używana, gdy jakiś kontekst ma charakter informacyjny.
Kod:
Content Heading with panel-info class
Content Body4
Wynik:
- .panel-warning: Ta klasa jest używana, gdy jakiś kontekst ma znaczenie znaku ostrzegawczego.
Kod:
Content Heading with panel-warning class
Content Body5
Wynik:
- .panel-hazard: Ta klasa jest używana, gdy jakiś kontekst ma znaczenie niebezpieczne i chce wskazać.
Kod:
Content Heading with panel-danger class
Content Body6
Wynik:
Przykłady paneli rozruchowych
Poniżej szczegółowo wyjaśniono przykłady panelu ładującego:
Przykład 1: Prosty panel ładowania początkowego
Jest to prosty przykład domyślnego panelu ładującego, w którym umieszczony jest nagłówek panelu, stopka panelu i treść opisu.
Kod:
Content Heading
Content Body
Panel body for context
Content Footer
Wynik:
Przykład # 2: Panel Bootstrap z tabelą
- W tym przykładzie uzyskaj dane wyjściowe tabeli za pomocą panelu ładowania początkowego. Stół można zmodyfikować, aby wyglądał elegancko. Poniższy przykład i dane wyjściowe to tabela przy użyciu panelu ładowania początkowego.
- Ten przykład wymaga klasy tabeli do utworzenia tabeli. Powoduje, że klasa nagłówka podstawowego i panelu zachowuje nazwę tabeli.
- Klasa stołu ma klasę korpusu panelu. W tej tabeli są umieszczone nagłówek i dane tabeli.
Kod:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
