Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap Jumbotron and Page Header


Tworzenie Jumbotron

Jumbotron wskazuje na duże pole do wywoływania szczególną uwagę na jakiegoś szczególnego treści lub informacji.

Jumbotron jest wyświetlany jako szare pole z zaokrąglonymi narożnikami. powiększa się również rozmiary czcionki tekstu w środku.

Wskazówka: Wewnątrz jumbotron można umieścić prawie każdy ważny kod HTML, łącznie z innymi Bootstrap elementów / klas.

Za pomocą <div> elementu z klasy .jumbotron stworzyć jumbotron:

Bootstrap Tutorial

Bootstrap jest najpopularniejszym HTML, CSS i JS ramy dla rozwoju elastycznych, ruchomych pierwsze projekty w internecie.


Jumbotron Wewnątrz Container

Umieścić jumbotron wewnątrz <div class="container"> Jeśli chcesz, aby jumbotron się nie rozciąga się do krawędzi ekranu:

Przykład

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>
Spróbuj sam "

Jumbotron Poza Container

Umieścić jumbotron poza <div class="container"> jeśli chcesz jumbotron przedłużyć do krawędzi ekranu:

Przykład

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>
Spróbuj sam "

Tworzenie Nagłówek

Strona tytułowa jest jak dzielnik przekroju.

.page-header klasy dodaje poziomą linię pod nagłówkiem (+ dodaje jakąś dodatkową przestrzeń wokół elementu):

Za pomocą <div> element z klasy .page-header , aby utworzyć nagłówek strony:

Przykład

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
Spróbuj sam "