Witam
Otóż zaczynam dopiero zabawę z Bootstrapem, przepracowałem i przeanalizowałem odcinek 0 i 1 u Pana Zelenta, poczytałem trochę z innych źródeł, widzę co wnosi stosowanie Bootstrapa. W celu poukładania tego w głowie stworzyłem od podstaw galerię jak z odcinka 5 CSS(kod pisany przeze mnie od podstaw, kolorystyka, obrazki takie jak w odcinku). Wyszło mi coś takiego:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Galeria</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="main.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<article class="content">
<header>
<h1>Piękne miejsca na ziemi</h1>
</header>
<div class="row no-gutters">
<div class="col-sm-12 col-lg-6">
<figure>
<img src="img/01.jpg" alt="Piękne miejsce na Ziemi :)">
<figcaption>Świątynia cała ta</figcaption>
</figure>
</div>
<div class="col-sm-12 col-lg-6">
<figure>
<img src="img/02.jpg" alt="Piękne miejsce na Ziemi :)">
<figcaption>Świątynia cała ta</figcaption>
</figure>
</div>
<div class="col-sm-12 col-lg-6">
<figure>
<img src="img/03.jpg" alt="Piękne miejsce na Ziemi :)">
<figcaption>Świątynia cała ta</figcaption>
</figure>
</div>
<div class="col-sm-12 col-lg-6">
<figure>
<img src="img/04.jpg" alt="Piękne miejsce na Ziemi :)">
<figcaption>Świątynia cała ta</figcaption>
</figure>
</div>
<div class="col-sm-12 col-lg-6">
<figure>
<img src="img/05.jpg" alt="Piękne miejsce na Ziemi :)">
<figcaption>Świątynia cała ta</figcaption>
</figure>
</div>
<div class="col-sm-12 col-lg-6">
<figure>
<img src="img/06.jpg" alt="Piękne miejsce na Ziemi :)">
<figcaption>Świątynia cała ta</figcaption>
</figure>
</div>
</div>
</article>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.css"></script>
</body>
</html>
I CSS:
body
{
background-color: #2f3640;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: #efefef;
}
h1
{
text-transform: uppercase;
color: #0abde3;
letter-spacing: 5px;
font-size: 36px;
}
.content
{
padding: 0;
text-align: center;
}
Co daje taki efekt: https://zapodaj.net/a7e6df264b542.jpg.html
I teraz parę moich pytań:
1. To że w widoku xl (taki jak na screenie) odstępy pomiędzy 1 i 2, 3 i 4, 5 i 6 obrazkiem są takie to wynika z tego że tak ustawił je Bootstrap, są "efektem działania Bootstrapa"? I jak ewentualnie je edytować.
2. Czemu w widoku xs pojawia się scrollbar? https://zapodaj.net/0fe9323c9ec71.jpg.html
3. Czy to co zrobiłem jest poprawne(jak na fakt że zaczynam), czy nadaję się do wyrzucenia?
4. Czy warto uczyć się dalej z poradników z kanału Pasja Informatyki? Często wiedzę w sieci komentarze że prezentują przestarzały materiał.
5. Trochę z innej beczki, polecacie sprawdzać kod za pomocą validatora? Ma to sens dla kogoś kto się uczy?
Pozdrawiam