Благодаря предварительно обработанным классам макетов передней структуры Bootstrap нам больше не нужно писать много кода CSS для каждого элемента тега макета. Мы можем использовать функции макета начальной загрузки. Вы можете создавать предварительно определенные стили для названий, абзацев, списков и других встроенных элементов и ввести очень стандартную веб-страницу.
Давайте научимся вместе. Какие классы наборов предварительно определяют переднюю каркас Bootstrap?
Первое: Bootstrap использует Helvetica Neue, Helvetica, Arial и Sans-Serif в качестве стека шрифтов по умолчанию, которые являются наиболее часто используемыми шрифтами на всех веб-страницах в настоящее время. С тех пор нам больше не нужно определять стили шрифтов глобального стиля для тела. Пока вы используете фронтальную фронтальную фонд-семью Bootstrap, приведенная выше серия шрифтов будет использоваться по умолчанию.
То есть: font-family: sans-serif;
Давайте подтвердим это и откроем Framework CSS File Bootstrap.css на передней части начальной загрузки
Уважаемые друзья, можем ли мы использовать только шрифты по умолчанию фронтальной фреймворка Bootstrap? Очевидно, нет. Позже я научу вас, как настраивать платформу Bootstrap и создать платформу для начальной загрузки, которая нам нравится и хотим осуществить.
Во-вторых: передняя основа начальной загрузки предварительно определена стиль CSS H1-H6. Я извлек часть определенного стиля из Framework CSS File Bootstrap.css передней фронтальной системы начальной загрузки. Вы можете видеть, что значения атрибутов размером с шрифта определены для HN соответственно.
H1 {font-size: 36px;}
H2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
H6 {font-size: 12px;}
Фактический эффект заключается в следующем:
Код веб -страницы:
Эффект веб -страницы:
Третий: встроенные субтитры. Если вам нужно добавить встроенный подзаголовок к любому заголовку, просто добавьте <small> на обе стороны элемента или добавьте класс.
Код веб -страницы:
Эффект веб -страницы:
Четвертое: привести главную копию. Чтобы добавить текст акцента в абзац, вы можете добавить class = "ряд", что приведет к большему, более толстому, более высокому тексту, как показано в следующем примере:
Код веб -страницы:
Эффект веб -страницы:
Следующий фронт-класс Bootstrap Front-End Framework больше не приведет примеры, я только запишу эту цель, потому что вы можете попробовать небольшие эффекты, такие как приведенный выше пример.
Пятый: подчеркните, что акцент по умолчанию HTML - <mall> (установите текст на 85% от родительского размера текста), <strong> (установить текст в более толстый текст), <em> (установить текст на курсив).
Шестая: аббревиатура, HTML -элементы предоставляют теги для аббревиатуры, такие как WWW или HTTP. Bootstrap определяет стиль элемента <abbr> быть пунктирной границей, отображаемой в нижней части текста, а полный текст будет отображаться, когда мышь будет зависать над ней (если вы добавили текст в атрибут «Abbr> заголовка»). Чтобы получить меньший текст шрифта, добавьте .инициализм в <abbr>.
Седьмое: адрес. Используя тег <dread>, вы можете отображать контактную информацию на веб -странице. Поскольку <drade> по умолчанию по умолчанию: Block;, вам нужно использовать тег, чтобы добавить разрыв строки в прилагаемый текст адреса.
Восьмой: blockquote, вы можете использовать по умолчанию <blockquote> рядом с любым текстом HTML. Другие параметры включают добавление тега <mall> для определения источника ссылки и использования класса. Следующий пример демонстрирует эти функции:
Девятое: список
Bootstrap поддерживает упорядоченные списки, неупорядоченные списки и определенные списки.
Заказанный список: Заказанный список относится к списку, который начинается с номеров или других упорядоченных символов.
Неупорядоченный список: Неупомянутый список относится к списку без определенного порядка и является списком, который начинается с традиционного стиля акцента. Если вы не хотите отображать эти номера акцентов, вы можете использовать класс. Вы также можете поместить все элементы списка в одной и той же строке, используя class.list-inline.
Список определений: в этом типе списка каждый элемент списка может содержать элементы <dt> и <dd>. <dt> означает термин определения, как словарь, который определяется как принадлежность (или фраза). Далее, <dd> это описание <dt>. Вы можете использовать ClassDL-Horizontal для отображения вещей в строке <dl> рядом с описанием.
Другие классы фронтальных фронтовых фронтовых фронтовых систем должны быть очень опытными, и каждый должен запомнить и использовать их.
.Lead выделяет абзацы
.small Установите небольшой текст (установите на 85% от размера родительского текста)
.Text-Left Set Text Last Выравнивание
.Text-Center Set Text Center выравнивание
.text-Right Установите правильное выравнивание текста
.Text-Justify Устанавливает выравнивание текста, а текст вне экрана в абзаце будет автоматически завершен
.Text-Nowrap Apacraps не обертывает линии за экраном
.Text-LowerCase SET TEXT TEXT LOWNERSE
.Text-UppperCase Установка текстовой капитализации
.Text-CaPitalize Устанавливает капитализацию первой буквы слова
.initialism Текст, отображаемый в элементе <abbr>, отображается небольшим шрифтом
.blockquote-reverse sets ссылка на правое выравнивание
.list-unstyled Удаляет стиль списка по умолчанию и выравнивается в элементах списка (в <ul> и <ol>). Этот класс подходит только для прямых предметов списка детей (если вам нужно удалить вложенные элементы списка, вам необходимо использовать этот стиль в вложенном списке)
.list-inline помещает все элементы списка в одной и той же строке
.dl-horizontal Этот класс наборы плавает и смещены и применяются к элементам <dl> и элементам <dt>. Для конкретных реализаций вы можете просмотреть экземпляр.
.pre-Scrollable Make <Pre> Прокрутите прокручивать элемент прокручиваемой прокручиваемой
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.