Bootstrap, из Twitter, является самой популярной фронтальной структурой в настоящее время. Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее.
Ключевые моменты для обучения:
1. Пейдж
На этом уроке мы в основном узнаем стиль макета в стиле Bootstrap Global CSS, включая заголовок, тело страницы, выравнивание, список и другой общий контент.
один. Макет страницы
Bootstrap предоставляет некоторые стили регулярного макета страницы дизайна для разработчиков.
1. Корпус страницы
Bootstrap устанавливает глобальный размер шрифта до 14px, высота линии линии установлена на 1,428 (то есть 20 пикселей); Элемент абзаца устанавливается на равную высоту линии 1/2 (то есть 10px); Цвет установлен на #333.
// Создать текст с выделенным параграфом <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p>
2. Название
//From h1 to h6<h1>Bootstrap framework</h1>//36px<h2>Bootstrap framework</h2>//30px<h3>Bootstrap framework</h3>//24px<h4>Bootstrap framework</h4>//18px<h5>Bootstrap framework</h5>//14px<h6>Bootstrap Framework </h6> // 12px
Мы узнали от Firebug, что начальная загрузка рефактировала H1 ~ H6 соответственно, а также поддерживает определение класса = (. H1 ~ H6) для обычных встроенных элементов для достижения той же функции.
// встроенные элементы Используйте заголовок Font <pran> Bootstrap </span>
ПРИМЕЧАНИЕ. При просмотре элементов через Firebug вы также можете увидеть, что цвет шрифта, стиль шрифта и высота линии фиксируется, что обеспечивает однородность. Нативный будет определяться на основе предпочтительного шрифта, встроенного в систему, а цвет самый черный.
Между элементами H1 ~ H6 небольшой элемент также может быть встроен в качестве субтитра.
//Insert small element in the title element <h1>Bootstrap framework <small>Bootstrap subtitle</small></h1><h2>Bootstrap framework <small>Bootstrap subtitle</small></h2><h3>Bootstrap framework <small>Bootstrap subtitle</small></h3><h4>Bootstrap framework <small>Bootstrap Subtitle </small> </h4> <h5> bootstrap framework <mall> subtitle bootstrap </small> </h5> <h6> bootstrap framework <mall> subtitle </small> </h6>
Благодаря просмотру Firebug мы обнаружили, что размер небольшого элемента под H1 ~ H3 составляет только 65% родительского элемента. Затем посредством расчета (см. Стиль, рассчитанное по Firebug), небольшой элемент под H1 ~ H3 составляет 23,4px, 19,5px и 15,6px; Размер небольшого элемента под H4 ~ H6 составляет только 75% родительского элемента, а именно: 13,5px, 10,5px и 9px. Небольшой стиль под H1 ~ H6 также был изменен, цвет стал светло -серым: #777, высота ряда составляет 1, а толщина - 400.
3. Встроенные текстовые элементы
// Добавить отметки, <card> элементы или. Текст // Разнообразие текста с акцентом <Small> Bootstrap Framework </small> // 85% от стандартного размера шрифта <strong> Bootstrap Framework </strong> // Bold 700 <em> Bootstrap Framework </em> // наклон
4. Выравнивание
// Установить выравнивание текста <p> bootstrap framework </p> // в левой <p> bootstrap framework </p> // center <p> bootstrap framework </p> // справа <p> bootstrap framework </p> // Выровнен на обоих концах, плохая поддержка <p> bootstrap pramework </p> //.
5.
// Установить английский текстовый корпус <p> Bootstrap Framework </p> // Нижний Crases <p> Bootstrap Framework </p> // uppercas
6. аббревиатура
// аббревиатура начальная загрузка <abbr> рама </abbr>
7. Адрес. Текст
// Установите адрес, удалите наклон, установите высоту строки, нижний 20px <drade> <strong> Twitter, Inc. </Strong> <br> 795 Folsom Ave, Suite 600 <br> Сан-Франциско, CA 94107 <br> <brbr> p: </abbr> (123) 456-7890 </address>
8. Цитируйте текст
// Справочник по стилю по умолчанию, добавить линии края, установить размер шрифта и внутренние и внешние поля <BlockQuote> Bootstrap Framework </blockquote> // reample <blockquote> Bootstrap Framework </blockquote>
9. Список макета
// Переместить стиль по умолчанию <ul> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Framework </li> </ul> // Set inline <ul> framework </li> </um </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> bootstrap framework </li> </ul> // Список описания. разработчики для использования. </dd> </dl>
10. Код
// встроенный код <code> <section> </code> // Пользовательский ввод Нажмите <KBD> CTRL +, </KBD> // CODE Block <Pre> <p> Пожалуйста, ввод ... </p> </pre>
Bootstrap также перечисляет <VAR> для переменных разметки и <SAMP> для вывода программы, но CSS не переработана.
Выше приведено соответствующие знания о стиле макета страницы Bootstrap, представленный вам редактором. Я надеюсь, что это будет полезно для вас!