05 – Tworzenie portfolio – tabela w Bootstrapie.

Witaj!
Ten wpis jest kolejnym wpisem o tematyce budowania swojego portfolio.
W tym wpisie zajmiemy się tworzeniem tabeli, którą możemy wykorzystać na naszym portfolio. Ja swoją tabelę umieściłam w zakładce BLOG. Dla ładniejszego efektu w każdej zakładce zamieściłam to samo tło oraz przełączniki nawigacji.


Poprzednie wpisy:

 

Nasze tło oraz nawigacja posiadają kod:

 

Teraz zajmiemy się naszą tabelą.
W centrum dodajemy jedną, rozciągniętą całkowicie kolumnę:

 

Wewnątrz kolumny dodajemy czterokolumnową tabelę z nagłówkami. W moim przypadku to  "Link, Tytuł wpisu, Data oraz Autor".

 

Jak można zauważyć, w znaczniku <td> dodałam po kolei nazwy, tytuły wpisów, datę oraz autora. W pierwszej kolumnie dodałam od razu znacznik <a href=""></a> w którym dodaję odnośnik do danego wpisu na blogu.
Nasz aktualny wygląd tabeli wygląda tak:

Jak dla mnie, taki wygląd tabeli jest niezadowalający 🙂

 

Dodajmy więc klasę table do naszego kodu w naszej tabeli.

Zobaczmy, co otrzymaliśmy:

Nasza tabela wygląda znacznie lepiej 🙂

 

 

Chcesz mieć tabelę-zebrę? Jeżeli tak, dodaj do elementu <table> klasę .table-striped. Zobacz, co otrzymaliśmy:

Uwaga: sektor odpowiedzialny za zmienny kolor tła to: .table-striped > tbody > tr:nth-of-type(odd)

 

 

Chcesz mieć tabelę z pełnym obrabowaniem? Jeżeli tak, dodaj do elementu <table> klasę .table-bordered. Zobacz, co otrzymaliśmy:

 

 

Chcesz mieć tabelę z aktywnymi wierszami? Jeżeli tak, dodaj do elementu <table> klasę .table-hover.
Zobacz, co otrzymaliśmy:

 

 

A na koniec...kolorowanie kontekstowe!
Bootstrap posiada pięć dopasowanych kolorów do kontekstu. Możesz dodać je jako klasy do wybranego elementu <tr>.

A oto kolory:

  • .success - kolor zielony,
  • .warning - kolor pomaranczowy,
  • .danger - kolor czerwony,
  • .active - kolor szary,
  • .info - kolor niebieski.

Przykładowy wygląd:

 

 

Zapraszam serdecznie do śledzenia mnie na:
LinkedIn
Twitter
Github - piotrowinka2410

Instagram
Snapchat - piotrowinka2410
Fanpage na Facebooku 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *