Latest web development tutorials

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:

nagłówek

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:

inline napisów

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:

Kopia korpusu prowadnicy

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:

podkreślać

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:

skrót

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: #"> [email protected] </ a> </ Address>

Spróbuj »

Wyniki przedstawiają się następująco:

adres

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:

cytować

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:

lista

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ć