Budujemy prostą stronę internetową cz. 4

Witam w kolejnej 4 części kursu w tej części pokażę jak zbudować kolejne 3 sekcje strony według mojego projektu.

Linki do poprzednich części kursu znajdziecie poniżej:

• Budujemy prostą stronę internetową cz. 1
• Budujemy prostą stronę internetową cz. 2
• Budujemy prostą stronę internetową cz. 3
• Budujemy prostą stronę internetową cz. 4
• Budujemy prostą stronę internetową cz. 5
• Budujemy prostą stronę internetową cz. 6
• Struktura strony w HTML5

Budowa pierwszej sekcji czyli <section id=”word”>

Pierwsza sekcja jak widać na załączonym powyżej obrazku składa się z jednego długiego akapitu. Nie jest więc zbytnio rozbudowaną sekcją.

W HTML zaimplementowałam ją następująco:

<section id="word">
<div class="container">
    <div class="row">
        <div class="col-12">
        <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem 
                  aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. 
                  Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p>
        </div>
     </div>
</div>
</section>

W ten sposób uzyskałam ogólny wygląd wciąż jednak brakuje odstępów. Postanowiłam je dodać ogólnie (globalnie dla tego projektu) czyli dla wszystkich elementów section:

section {
    padding: 30px 0;
}

 

Sekcje <section id=”us”> i <section id=”technology”>

Z pozoru obie te sekcje wyglądają prawie identycznie, zamienione są jednak kolejnością. W pierwszej najpierw jest obrazek a potem tekst z kolei w drugiej tekst a potem obrazek.

W HTML pierwsza z sekcji wygląda następująco:

<section id="us">
 <div class="container">
  <div class="row align-items-center">
   <div class="col-12 col-md-6 image">
    <img src="http://aurainweb.pl/wp-content/uploads/2018/10/grafik.jpg" class="img-fluid">
    </div>
   <div class="col-12 col-md-6">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem 
    aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo 
    enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p>
    </div>
   </div>
  </div>
</section>

Obie kolumny są równych rozmiarów dlatego posiadają klasy

col-12 col-md-6

Zasada ich działania nie uległa zmianie od poprzedniej wersji Bootstrap. Różnica polega na tym, że zastosowana jest tu technologia Flexbox.

.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

 

Z punktu widzenia mojego projektu trochę ułatwiło mnie to pracę. Nie musiałam wprowadzać zbyt wielu zmian w CSS w celu wyśrodkowania zawartości kolumn względem siebie. Jedynie odnaleźć odpowiednią klasę align-items-center.

Inaczej podeszłam do <section id=”technology”> gdzie wzięłam pod uwagę układ pod urządzeniami mobilnymi. Dużo ładniej wygląda kiedy mamy układ obrazek tekst, obrazek tekst niż obrazek tekst, tekst obrazek.

<section id="technology">
 <div class="container">
  <div class="row align-items-center">
   <div class="col-12 col-md-6 order-md-2 image">
       <img src="http://aurainweb.pl/wp-content/uploads/2018/10/grafik.jpg" class="img-fluid"></div>
   <div class="col-12 col-md-6 order-md-1">
        <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae 
          ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur 
          aut odit aut fugit, sed quia consequuntur magni dolores eos</p>
    </div>                
  </div>
 </div>
</section>

Jak widać układ w HTML jest prawie identyczny jak znajdującej się wyżej sekcji.

Różnica polega na dodaniu nowych klas

• order-md-2
• order-md-1

Jak sama nazwa mówi klasy te określają kolejność wyświetlania elementów (są to tzw. klasy przestawne). W efekcie pierwszy div posiada order-md-2 co oznacza, że ma być drugim a drugi order-md-1 czyli ma być pierwszy.

Klasy order-md- mają jeszcze jedną cechę nie działają na urządzeniach mobilnych. W efekcie na smartphonie wyświetli się kolejność taka jak jest w HTML – najpierw obrazek potem text.

Teraz dodam jeszcze niewielki pudding nad tekstem

#us p, #technology p{
    padding: 18px 0 0;
}

Jak widać na załączonym obrazku nie wszystko jeszcze wygląda jak na moim projekcie.

Obrazki nie zajmują całej szerokości kontenera a tekst jest troszkę za szeroki. Te problemy rozwiąże poniższe CSS:

#us p, #technology p{
    padding: 18px 2% 0;
}
#us img, #technology img{
    width: 100%;
    height: auto;
}
.image{
   padding:0;
}

 

 

Do skończenia tej strony zostały jeszcze dwie sekcje Design i Footer. Ich opis znajdzie się w kolejnej części kursu.

 

 

https://flexbox.aurainweb.pl/podstawy-flexbox/

Przydatne linki:

https://getbootstrap.com/docs/4.1/utilities/flex