dodatkowa linia "link" potrzebna do załadowania bootstrapa
<html> <head> <link type="text/css" rel="stylesheet" href="cssTrzecie.css"/> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head>
Kontener
Kontener jest podstawowym elementem siatki i jest on wymagany gdy chcemy zbudować layout. Używamy go do tworzenia sekcji naszej strony. Jednym kontenerem jest nasz header, jednym jest treść wpisu, kolejnym sekcja z komentarzami i stopka . Możemy zamknąć całą stronę w jednym kontenerze ale lepiej jest stworzyć kilka, każdemu nadać identyfikator czy klasę i w ten sposób uporządkować nasz dokument. Kontenery można również zagnieżdżać, ale lepiej tego nie robić.
przykład:
<div class="container"> <!-- tresc kontenera --> </div>
jeśli chcemy rozciągnąć na cały dostępny ekran "container-fluid"
Siatka -Grid
Siatka Bootstrapa składa się z kontenerów rzędów (.row) i kolumn (.col-*-*), które umieszczamy wewnątrz rzędów.
Bootstrap pozwala na stworzenie do 12 kolumn, gdy stworzymy ich więcej to wyświetlą się one poniżej. Kolumna może mieć szerokość 1 (.col-sm-1), wtedy mamy ich 12. Szerokość może mieć 4 (.col-sm-4) wtedy, w jednym rzędzie będziemy mieli trzy kolumny.
przykład:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="cssTrzecie.css"/> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> Tytuł </div> </div> <div class="row"> <div class="col-sm-12"> Treść Treść Treść Treść Treść Treść </div> </div> <div class="row"> <div class="col-sm-4"> <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" /> </div> <div class="col-sm-4"> <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" /> </div> <div class="col-sm-4"> <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" /> </div> </div> </div> </body> </html>
Rząd tytułu ma szerokość 12, tak więc mamy 1 kolumnę, podobnie rząd treści.
Dopiero trzeci rząd ma kolumny szrokości 4, tak więc ma je trzy, w każdej osobny obrazek.
uwaga:
stworzenie dwóch kolumn o szerokości 6 za pomocą klasy .col-md-6 wyświetli je obok siebie jeśli szerokości ekranu będzie 786px inaczej będą się one układać pod sobą. Stworzenie dwóch kolumn za pomocą klasy .col-xs-6 wyświetli nam dwie kolumny bez względu na rozdzielczość.
Nagłówki
Znaczniki H są już ostylowane w Bootstrapie poprzez dodanie im dolnego marginesu oraz font-weight: 500;. Dodanie większych odstępów, zmiana grubości fonta, jego koloru itp należy do was.
przykład:
<p class="h1"> paragraf h1 Bootstrap</p> <p class="h2"> paragraf h2 Bootstrap</p> <p class="h3"> paragraf h3 Bootstrap</p> <p class="h4"> paragraf h4 Bootstrap</p> <p class="h5"> paragraf h5 Bootstrap</p> <p class="h6"> paragraf h6 Bootstrap</p>
Mamy również gotowy element, który pozwala stworzyć nam nagłówek z mniejszym przypisem.
wystarczy dopisać: <small class="text-muted">
<h3> Taki sobie nagłówek <small class="text-muted">Z mniejszym dopiskiem</small> </h3>
Większe nagłówki:
Klasy te mają nazwy od .display-1 do .display-4
<h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1>
.
zr:
https://bs4.kursbootstrap.pl/typografia-typography/