Najlepszy samouczek układ bootstrap W 2024 r. W tym samouczku możesz dowiedzieć się
nagłówek,Przykłady,Przykłady,Kopia korpusu prowadnicy,Przykłady,podkreślać,Przykłady,skrót,Przykłady,Adres (Address),Przykłady,Odniesienia (Blockquote),Przykłady,lista,Przykłady,Więcej klasa nabieranie,
układ bootstrap
Bootstrap użyciu Helvetica Neue Helvetica, Arial i czcionki sans-serif jako domyślnego stosu.
Bootstrap używania funkcji układu strony, można tworzyć nagłówki, akapity, listy i inne elementy liniowe.
nagłówek
Bootstrap definiuje wszystkie nagłówki (H1 do H6) style. Rozważmy następujące przykłady:
Przykłady
<H1> I zmierzał 1 h1 </ h1>
<H2> I zmierzał 2 h2 </ h2>
<H3> I zmierzał 3 h3 </ h3>
<H4> I zmierzał 4 H4 </ h4>
<H5> I zmierzał 5 h5 </ h5>
<H6> I zmierzał 6 h6 </ h6>
Spróbuj » Wyniki przedstawiają się następująco:
inline napisów
Jeśli chcesz dodać napisy do inline dowolny tytuł, wystarczy dodać po obu stronach elementu <small> lub dodaj.small klasę, w ten sposób można uzyskać mniejszy rozmiar jaśniejszy kolor tekstu, jak w poniższych przykładach w następujący sposób:
Przykłady
<H1> I zmierzał 1 h1. <Small> I napisów 1 h1 </ small> </ h1>
<H2> I zmierzał 2 h2. <Small> Jestem napisów 2 h2 </ small> </ h2>
<H3> I zmierzał 3 H3. <Small> Jestem napisów 3 h3 </ small> </ h3>
<H4> I zmierzał 4 H4. <Small> Jestem napisów 4 H4 </ small> </ h4>
<H5> I zmierzał 5 h5. <Small> Jestem napisów 5 h5 </ small> </ h5>
<H6> I zmierzał 6 H6. <Small> I podtytuł 6 h6 </ small> </ h6>
Spróbuj » Wyniki przedstawiają się następująco:
Kopia korpusu prowadnicy
Aby dodać punkt do podkreślenia tekstu, można dodać class = "Lead", który będzie większy i śmielszy, bardziej wysokość linii tekstu, jak pokazano na poniższych przykładach:
Przykłady
<H2> Kopia korpus prowadzący </ h2>
<P class = "lead"> To jest przykład demo wykorzystanie kopii korpusu prowadnicy. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. Jest to przykład kopii demo wykorzystania korpusu prowadzącego. </ P>
Spróbuj » Wyniki przedstawiają się następująco:
podkreślać
Znaczniki HTML domyślny podkreślić <small> (85% rodziców ustawić rozmiar czcionki tekstu), <strong> (ustawić tekst odważniejsze tekst), <em> (ustawić tekst kursywą).
Ładujący dostarcza klasy używane podkreślenie tekstu, jak to przedstawiono w następujących przykładach:
Przykłady
<Small> Bank jest w znaczniku content </ small> Największa
<Strong> Bank jest w znaczniku content </ strong> <br>
<Em> Bank jest w treści znacznika i renderowane jako kursywą </ em> <br>
<P class = "text-left"> tekst wyrównany do lewej </ p>
<P class = "text-center"> wyrównać tekst </ p>
<P class = "text-right"> tekst wyrównany do prawej </ p>
<P class = "text-wyciszony"> Zawartość Banku jest tłumiony </ p>
<P class = "text-primary"> Zawartość bank z podstawowej klasy </ p>
<P class = "text-success"> Zawartość Banku z klasą sukcesu </ p>
<P class = "text-info"> Zawartość z informacji bankowych klasy </ p>
<P class = "text-ostrzeżenie"> Zawartość Banku z klasą ostrzegawczego </ p>
<P class = "text-niebezpieczeństwo"> Zawartość Banku z klasą zagrożenia </ p>
Spróbuj » Wyniki przedstawiają się następująco:
skrót
Element HTML znacznik jest przewidziany skrótów, takich jak WWW lub HTTP. Bootstrap definicja <abbr> element stylu do wyświetlania linia przerywana w tekście w dolnej części ramy, gdy wskaźnik myszy znajduje się nad wyświetli pełną treść (tak długo, jak dodać atrybut <abbr> Tytuł tekstu). W celu uzyskania mniejszej czcionki tekstu, dodawać .initialism do <abbr>.
Przykłady
<abbr title = "World Wide Web"> WWW </ abbr> Największa
<abbr title = "Real Simple Syndication" class = "initialism"> RSS < / abbr>
Spróbuj » Wyniki przedstawiają się następująco:
Adres (Address)
Użyj <adres> tag, można wyświetlić informacje kontaktowe na stronie. Od <adres> Default display: block; trzeba używać etykiet, aby dodać tekst zamknięty adres opasania.
Przykłady
<Adres>
<Strong> Niektóre Company, Inc. < / strong> Największa 007 street Największa Niektóre miasto, województwo XXXXX Największa
<abbr title = "Telefon"> P: </ abbr> (123) 456-7890 </ address>
<Adres>
<Strong> Pełna nazwa </ strong > Największa
<a href = "mailto: #"> mailto@somedomain.com </ a>
</ Address>
Spróbuj » Wyniki przedstawiają się następująco:
Odniesienia (Blockquote)
Można użyć domyślnego <blockquote> obok dowolnego tekstu HTML. Inne opcje obejmują dodanie <small> tag do identyfikacji źródła cytatu z wykorzystaniemklasy.pull prawy prawy odniesienie wyrównania. Poniższy przykład ilustruje następujące funkcje:
Przykłady
<Blockquote>
<P> To jest odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. Jest to odniesienie do instancji domyślnej. </ P>
</ Blockquote>
<Blockquote> To jest tytuł ze źródłem odniesienia. <Small> Ktoś znany w <cite title = "Źródło Tytuł"> Źródło tytuł </ cite> </ small>
</ Blockquote>
<blockquote class = "pull-prawo"> Jest to odniesienie do wyrównany do prawej strony. <Small> Ktoś znany w <cite title = "Źródło Tytuł"> Źródło tytuł </ cite> </ small>
</ Blockquote>
Spróbuj » Wyniki przedstawiają się następująco:
lista
Bootstrap wsparcie nakazał list, nieuporządkowaną wykazy i listy definicji.
- Lista numerowana: uporządkowana lista numerów lub innych środków na początku listy charakter uporządkowany.
- Lista nieuporządkowana: nieuporządkowana lista odnosi się do listy w przypadkowej kolejności, jest to lista numerów zaczynających się nacisk na tradycyjnym stylu.Jeśli nie chcesz, aby wyświetlić ten nacisk, można użyćklasy.list-pierwotnych ustawień usuwania stylów. Można również skorzystać z listyklas.list-inline wszystkich elementów znajdujących się na tej samej linii.
- Listy definicji: W tego typu listy, z których każdy może zawierać element listy <dt> i <dd> element.<Dt> w imieniudefinicji terminówtakich jak słownika, który jest częścią (lub fraz) są zdefiniowane. Następnie <dd> to <dt> Opis. Można użyćklasyDL-horyzontalnego <dl> wiersz należy Opis wyświetlane obok siebie.
Poniższy przykład demonstruje te typy list:
Przykłady
<H4> Lista numerowana </ h4>
<Ol>
<Li> Artykuł 1 </ li >
<Li> Artykuł 2 </ li >
<Li> Artykuł 3 </ li >
<Li> Artykuł 4 </ li >
</ Ol>
<H4> Lista nieuporządkowana </ h4>
<Ul>
<Li> Artykuł 1 </ li >
<Li> Artykuł 2 </ li >
<Li> Artykuł 3 </ li >
<Li> Artykuł 4 </ li >
</ Ul>
<H4> Lista niezdefiniowany Styl </ h4>
<ul class = "list-pierwotnych ustawień">
<Li> Artykuł 1 </ li >
<Li> Artykuł 2 </ li >
<Li> Artykuł 3 </ li >
<Li> Artykuł 4 </ li >
</ Ul>
<H4> Lista Inline </ h4>
<ul class = "list-inline">
<Li> Artykuł 1 </ li >
<Li> Artykuł 2 </ li >
<Li> Artykuł 3 </ li >
<Li> Artykuł 4 </ li >
</ Ul>
<H4> Lista definicji </ h4>
<Dl>
<Dt> Opis 1 </ dt >
<Dd> Artykuł 1 </ dd >
<Dt> Opis 2 </ dt >
<Dd> Artykuł 2 </ dd >
</ Dl>
Lista definicji <h4> Poziom </ h4>
<dl class = "dl-poziomy">
<Dt> Opis 1 </ dt >
<Dd> Artykuł 1 </ dd >
<Dt> Opis 2 </ dt >
<Dd> Artykuł 2 </ dd >
</ Dl>
Spróbuj » Wyniki przedstawiają się następująco:
Więcej klasa nabieranie
Poniższa tabela zawiera dodatkowe przykłady Bootstrap klasę typografia:
kategoria | opis | Przykłady |
---|
.lead | Zaznacz akapit, aby | próbować |
.small | Ustawianie mały tekst (set 85% wielkość tekstu dominującej) | próbować |
.text lewej | Ustaw tekst wyrównany do lewej | próbować |
.text-center | Ustawianie Tekst Align | próbować |
.text prawym | Ustawianie Tekst Align Right | próbować |
.text-uzasadnić | Ustawianie wyrównania tekstu, akapity poza ekran niektóre oblewania tekstem | próbować |
.text-nowrap | Ustęp poza ekranem częściowo zawinąć | próbować |
.text-małe | Ustawianie małe litery tekstu | próbować |
.text-wielkie | Ustawianie wielkie tekstu | próbować |
.text-wykorzystać | Ustawianie inicjały słów | próbować |
.initialism | Jest on wyświetlany w elemencie <abbr> w tekście, aby wyświetlić małych czcionek | próbować |
.blockquote-reverse | Ustawianie odniesienie do prawej wyrównane | próbować |
.list-pierwotnych ustawień | Usuń domyślny styl listy, elementy listy wyrównany do lewej strony (<ul> i <ol> in). Kategoria ta odnosi się tylko do kierowania liście podrzędnej pozycji (jeśli trzeba usunąć zagnieżdżone elementy listy, trzeba użyć styl w zagnieżdżonej listy) | próbować |
.list-inline | Zostaną umieszczone na tej samej linii, wszystkie elementy listy | próbować |
.dl-poziome | Klasa ta ustawia pływak i punktu odniesienia <dl> elementu i elementu <dt> można zobaczyć konkretne przykłady realizacji | próbować |
.pre-Przesuwne | Więc <pre> elementu Przesuwne Przesuwne | próbować |