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


26.10.2020

Nowa wersja nVision

Można już pobierać nową wersję nVision
26.10.2020

Monitorowanie infrastruktury

Vertiv Environet Alert
23.10.2020

Telefonia w chmurze

NFON Cloudya
23.10.2020

Nowości w EDR

Bitdefender GravityZone
23.10.2020

Wykrywanie anomalii

Flowmon ADS11
23.10.2020

Mobilny monitor

AOC 16T2
22.10.2020

HP Pavilion

HP zaprezentowało nowe laptopy z linii Pavilion.
22.10.2020

Inteligentny monitoring

WD Purple SC QD101
22.10.2020

Przełącznik 2,5GbE

QNAP QSW-1105-5T

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.

Artykuł pochodzi z miesięcznika: IT Professional

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"