Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików Cookies.



20.07.2020

Baramundi

Pomoc w czasie pandemii.
20.07.2020

Stop infekcjom

CloudGuard
17.07.2020

Analiza zagrożeń

Kaspersky Threat Attribution Engine
17.07.2020

Strażnik danych

QGD-1602P
16.07.2020

Dysk przemysłowy

Transcend MTE352T
16.07.2020

Połączenie sił

Fugaku
16.07.2020

Brama bezpieczeństwa

Check Point 1570R
23.06.2020

PLNOG Online

PLNOG Online
23.06.2020

Nowe zagrożenie

Ramsay

Tworzenie stron www za pomocą Bootstrapa

Data publikacji: 16-07-2020 Autor: Grzegorz Kubera
Tabela z obramowaniem

Wiele stron internetowych ma tabele i formularze – to niezbędne elementy funkcjonalne. W tej części wyjaśniamy, jak wstawiać je w projektach opartych na Bootstrapie.

 

Ze względu na to, że Bootstrap jest całkowicie darmowym frameworkiem do tworzenia responsywnych stron (mobile-first) i doskonale obsługuje HTML, CSS i JavaScript, mnóstwo deweloperów zna lub aktualnie poznaje to rozwiązanie. Zacznijmy więc od wstawiania potrzebnych komponentów struktury WWW.


> TABELE


Podstawowa tabela w Bootstrapie ma tylko poziome kreski pod rzędami i domyślny styl. Kod takiej tabeli wygląda następująco:


<!DOCTYPE html>
<html lang="pl">
<head>
<title>Tabela – przykład</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tabela podstawowa</h2>
<p>Klasa .table zapewnia podstawowy styl dla tabeli:</p>
<table class="table">
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>jan.kowalski@przyklad.pl</td>
</tr>
<tr>
<td>Maria</td>
<td>Nowak</td>
<td>maria.nowak@przyklad.pl</td>
</tr>
<tr>
<td>Robert</td>
<td>Smith</td>
<td>robert.smith@przyklad.pl</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


Jeśli chcemy przygotować nieco bardziej atrakcyjną i czytelniejszą tabelę, możemy wprowadzić drobne zmiany w kodzie i uzyskamy na przemian pokolorowane wiersze:

 

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Tabela</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Wiersze pokolorowane</h2>
<p>Klasa .table-striped wprowadza styl z na przemian pokolorowanymi wierszami:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>jan.kowalski@przyklad.pl</td>
</tr>
<tr>
<td>Maria</td>
<td>Nowak</td>
<td>maria.nowak@przyklad.pl</td>
</tr>
<tr>
<td>Robert</td>
<td>Smith</td>
<td>robert.smith@przyklad.pl</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


Kolejna klasa dla tabel to .table-bordered. Zapewnia ona obramowanie dla całej tabeli i poszczególnych wierszy (rys. 1). Kod to:

 

<body>
<div class="container">
<h2>Tabela z obramowaniem</h2>
<p>Klasa .table-bordered wprowadza obramowanie dla tabeli:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>jan.kowalski@przyklad.pl</td>
</tr>
<tr>
<td>Maria</td>
<td>Nowak</td>
<td>maria.nowak@przyklad.pl</td>
</tr>
<tr>
<td>Robert</td>
<td>Smith</td>
<td>robert.smith@przyklad.pl</td>
</tr>
</tbody>
</table>
</div> </body>


To jednak ciągle nie wszystko, jeśli chodzi o możliwości tabel. Kolejną klasą jest .table-hover, zapewniająca efekt wizualny – po najechaniu kursorem myszy na dany wiersz zostaje on zaznaczony (podświetlony). Nie będzie tego widać w druku, niemniej warto znać tę klasę, ponieważ stwarza estetyczny i atrakcyjny efekt na stronie WWW. Kod:


<table class="table table-hover">

 

Pozostały kod jest taki sam jak dla poprzednich przykładów, dlatego nie będziemy go już powielać. Warto znać jeszcze klasę .table-condensed, która zmniejsza nieco interlinię, przez co komórki są bardziej ściśnięte, a cała tabela – bardziej kompaktowa. Kod to:
 

<table class="table table-condensed">

 

[...]

 

Założyciel firmy doradczo-technologicznej; pełnił funkcję redaktora naczelnego w magazynach i serwisach informacyjnych z branży ICT. Dziennikarz z ponad 13-letnim doświadczeniem i autor książek nt. start-upów i przedsiębiorczości.

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma.

.

Transmisje online zapewnia: StreamOnline

All rights reserved © 2019 Presscom / Miesięcznik "IT Professional"