Компоненты макета начальной загрузки
1. Значок шрифта Bootstrap
(1) Ссылка на список значков шрифтов
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) Использование
Чтобы использовать значки, просто используйте следующий код. Пожалуйста, сохраните соответствующее пространство между значком и текстом. Нет CSS Glyphicon.
<pran> </span>
(3) Индивидуальный значок шрифта
Мы видели, как использовать значки шрифтов, а затем посмотрим, как настраивать значки шрифтов.
Мы начинаем с примера выше и настраиваем значок, изменяя размер шрифта, цвет и применив текстовые тени.
А. Пользовательские значки
<button type = "button"> <pan> </span> user </button>
B. Индивидуальный размер шрифта
Увеличивая или уменьшая размер шрифта значка, вы можете сделать значок больше или меньше.
<button Type = "button" style = "font-size: 60px"> <pan> </span> user </button>
C. Настроить цвет шрифта
<button type = "button" style = "color: rgb (212, 106, 64);"> <pan> </span> user </button>
D. Примените текстовые тени
<button type = "button" style = "Text-Shadow: Black 5px 3px 3px;"> <pan> </span> user </button>
2. Bootstrap выпадающее меню
(1) Раскрывающееся меню можно переключаться и представляет собой контекстное меню, которое отображает ссылку в формате списка. Это может быть достигнуто посредством взаимодействия с раскрывающимся меню (выпадающим спином) JavaScript Plugin.
Чтобы использовать следующее меню, просто добавьте раскрывающееся меню в классе .Dropdown.
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадение"> тема <pran> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> java </li-li> role="presentation"> <a role="menuitem" tabindex="-1" href="#">Data Mining</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> Data Communication/Network</a> </li> <li role="presentation"></li> <li role="presentation"> <a rol = "menuitem" tabindex = "-1" href = "#"> отдельные ссылки </a> </li> </ul> </div>
(2) выравнивать
Выровняйте раскрывающееся меню прямо, добавив класс.
(3) заголовок
Вы можете использовать выпадающий заголовок класса, чтобы добавить заголовок в область метки раскрывающегося меню.
3. Группа кнопок Bootstrap
(1) Группа кнопок позволяет сложить несколько кнопок на одной линии. Это очень полезно, когда вы хотите объединить кнопки вместе.
(2) гнездование
Вы можете в гнездо в группе к кнопке в группе к кнопке, то есть гнездо другой .btn Group в одной группе. Это используется, когда вы используете раскрывающееся меню в сочетании с серией кнопок.
4. Раскрывающееся меню кнопок начальной кнопки
Используйте класс Bootstrap, чтобы добавить раскрывающееся меню в кнопку. Чтобы добавить раскрывающееся меню в кнопку, просто поместите кнопку и раскрывающееся меню в группе .btn. Вы также можете использовать <pan> </span> для указания кнопок в виде раскрывающихся меню.
<div> <button type = "button" data-toggle = "выпадает"> по умолчанию <pran> </span> </button> <ul rol = "menu"> <li> <a href = "#"> function </a> </li> <li> <a href = "#"> другие </a> </li> <li> <li href = "#"#" href = "#"> Другое </a> </li> <li> </li> <li> <a href = "#"> Отдельная ссылка </a> </li> </ul> </div>
(1) Расмешное меню с разделенной кнопкой
В раскрывающемся меню раскрывающегося кнопки используется примерно тот же стиль, что и кнопка раскрывающегося меню, но добавляет оригинальную функциональность в раскрывающееся меню. На левой стороне кнопки разделения находится исходная функция, а справа находится переключатель, который отображает раскрывающееся меню.
<div> <button type = "button"> по умолчанию </button> <button Type = "button" Data-toggle = "Выпадение"> <pan> </span> <pran> Переключить раскрывающееся меню </span> </button> <ul role = "menu"> <li> <a href = "#"> function </hre> </li> </li> <li> <li> href = "#"> Другое </a> </li> <li> </li> <li> <a href = "#"> Dised Link </a> </li> </ul> </div>
(2) Размер раскрывающегося меню кнопок
Вы можете использовать раскрывающееся меню с кнопками разных размеров:.
(3) Меню подтягивания для кнопок
Меню также может быть растянуто вверх, просто добавьте.
<div> </div>
5. Группа ввода Bootstrap ввода
Введите группу коробок. Группа ввода простирается от управления формой. С группами ввода, вы можете легко добавить текст или кнопки в качестве префиксов и суффиксов в текстовые поля ввода.
Добавляя содержимое префикса и суффиксов в поле ввода, вы можете добавить общие элементы к пользовательскому вводу. Например, вы можете добавить знак доллара или добавить @ перед именем пользователя Twitter или другими публичными элементами, необходимыми для интерфейса приложения.
Шаги, направленные на добавление префикса или суффикса в.
A. Поместите элемент префикса или суффикса в <Div> с классовой. INPUT-GROUP.
B. Затем, в том же <Div>, поместите дополнительный контент в класс.
C. Поместите <pan> спереди или позади элемента <pint>.
Чтобы поддерживать совместимость с кросс-браузером, избегайте использования элементов <elect>, так как они не полностью предоставляют эффект в браузере Webkit. Кроме того, не применяйте класс группы ввода непосредственно к группе форм, группа ввода является изолированным компонентом.
<form rol = "form"> <div> <pan> $ </span> <input type = "text" Placeholder = "TwitterHandle"> <pan> .00 </span> </div> </form>
(1) Введите размер группы коробки
Вы можете изменить размер группы ввода, добавив классы относительных размеров формы в. ИНПУСПУРТ (например,. INPUT-GROUP-LG, входная группа-SM, входная группа-XS) на. INPUT-GROUP. Содержание в поле ввода будет автоматически изменен.
(2), флажки и радио-плагины
Вы можете использовать флажки и плагины радио
<div> <pan> <input type = "fackbox"> </span> <input type = "text"> </div>
(3) Плагин для кнопки
Вы также можете использовать кнопку в качестве элемента префикса или суффикса группы ввода. В настоящее время вы не добавляете класс INPUT-GROUP-ADDON. Вам нужно использовать класс. INPUT-GROUP-BTN, чтобы обернуть кнопку. Это требуется, потому что стиль браузера по умолчанию не будет переписан.
<div> <pan> <button type = "button"> go! </button> </span> <input type = "text"> </div>
(4) Кнопка с раскрывающимся меню
Добавление кнопки с раскрывающимся меню в группу ввода просто обернута в класс. ИНПУРТ-Групп-BTN.
<div> <div> <button type = "button" data-toggle = "выпадающий"> выпадающее меню <pran> </span> </button> <ul> <li> <a href = "#"> function </a> </li> <li> <a href = "#"> Другое </a> </li> <li> <-href = "#"> " href = "#"> Другое </a> </li> <li> </li> <li> <a href = "#"> Отдельная ссылка </a> </li> </div> <input type = "text"> </div>
(5) Кнопка раскрывающегося меню раскрывается
Добавьте кнопку разделения с раскрывающимся меню в группе ввода, используя примерно тот же стиль, что и кнопка раскрывающегося меню, но добавление основных функций в раскрывающееся меню,
<div> <div> <button type = "button" tabindex = "-1"> раскрывающееся меню </button> <button Type = "button" toggle = "Dropdown" tabIndex = "-1"> <pan> </span> <pan> Переключить функцию раскрывающегося меню </span> </li> <li> href = "#"> Другое </a> </li> <li> <a href = "#"> другие </a> </li> <li> </li> <li> <a href = "#"> отдельная ссылка </a> </li> </div> <input type = "> </div>
6. Навигационные элементы начальной загрузки
Используйте те же теги и базовый класс .nav. Bootstrap также предоставляет вспомогательный класс для обмена тегами и состояниями. Измените модифицированный класс и могут быть переключены между разными стилями.
(1), навигация или тег таблицы
Создайте меню навигации с меткой:
А. Начните с неупорядоченного списка с классом .Nav.
Б. Добавить класс. Нав.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) Меню навигации в стиле капсул
A. Меню базового капсул навигации
Если вам нужно изменить этикетку в стиль капсулы, вам нужно использовать только класс.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
B. Меню навигации по вертикальной капсуле
Вы можете использовать класс .NAV-Stack, используя класс .NAV и .NAV-Pills, чтобы сделать капсулы стекать вертикально.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) Навигация с обоими концами выровненной
Вы можете сделать меню навигации с меткой или капсулой одинаково широко для родительского элемента, используя класс .NAV-Justified при использовании .nav, .nav-tabs или .nav и .nav-pills, соответственно, когда ширина экрана превышает 768px. На меньшем экране навигационные ссылки сложены.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> </ul> <ul> <li> <a href = "#"> Home </a> </li> </ul> <li> <a href = "#"> Home </a> </li> </ul> <li> <a href = "#"
(4) Отключить ссылку
Для каждого класса .NAV, если добавлен класс.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios (отключение ссылки) </a> </li> </ul> <li> <li> <a href = "#"> hom href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (отключение ссылки) </a> </li> </ul>
(5) Потягивание меню
Меню навигации использует аналогичный синтаксис в раскрывающемся меню. По умолчанию привязый элемент списка работает в сочетании с некоторыми свойствами данных, чтобы запустить неупорядоченный список с классом .dropdown-menu.
A. Теги с выпадающим меню
Шаги, чтобы добавить выпадающее меню в тег, следующие:
Начните с неупорядоченного списка с классом .nav.
Добавить класс .nav-tabs.
Добавьте неупорядоченный список с классом .droddown-menu.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "href ="#"> java <span> </span> </a> <ul> <li> <a href ="#"> swing> </span> </a> <ul> <li> <a href =" <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> отдельные ссылки </a> </li> </li> </li> <li> <a href = "#"> php </a> </li> </li> <li>
B. Капсулы с выпущенным меню
Шаги такие же, как создание тега с выпадающим меню, за исключением того, что вам нужно изменить класс .nav-tabs на .nav-pills.
7. Bootstrap Navigation Bar
Навигационная панель является хорошей функцией и является выдающейся особенностью веб -сайта Bootstrap. Навигационная строка служит отзывчивым основным компонентом заголовка навигации в вашем приложении или веб -сайте. Навигационная полоса рухнута в виде мобильного устройства, а навигационная полоса расширяется горизонтально, когда доступная ширина просмотра увеличивается. В основе навигационной панели начальной загрузки навигационная строка включает в себя название сайта и базовые стили определения навигации.
(1) Навигационная панель по умолчанию
Шаги по созданию навигационной панели по умолчанию следующие:
A. Добавьте класс .navbar и .navbar-default в тег <av>.
B. Добавление роли = «навигация» к вышеуказанным элементам поможет увеличить доступность.
C. Добавьте класс заголовка. Навбар-заголовок в элемент <div>, который содержит элемент <a> с классом Navbar Brand. Это сделает текст больше.
D. Чтобы добавить ссылки в панель навигации, вам нужно просто добавить неупорядоченный список с классом .Nav и .navbar-nav.
<NAV ROLE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = " href = "#" data-toggle = "jopdown"> java <b> </b> </a> <ul> <li> </li> <li> <a href = "#"> разделенная ссылка </a> </li> <li> </li> <li> <a href = "#"> одна отдельная ссылка </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li>
(2) Адаптивная навигационная планка
Чтобы добавить адаптивные функции в панель навигации, контент, который вы хотите свернуть, должен быть обернут в <Div> с классами .collapse, .navbar-Collapse. Сваженная навигационная панель на самом деле является кнопкой с классом. Навбар-тог и двумя данными. Первым является тог, что сообщает JavaScript, что делать с кнопкой, а второй-Target, что указывает на, на какой элемент переключиться. Три <pan> с классом .icon-bar создает так называемую кнопку гамбургера. Они переключатся на элементы в .nav-collapse <div>. Чтобы достичь этих функций, вы должны включить плагин с коллапсом Bootstrap.
<NAV ROLE = "navigation"> <div> <button type = "button" data-toggle = "collapse" data-target = "#example-navbar-collapse"> <pan> Навигация по переключению </span> <pan> </span> <span> </span> </span> <span> </span> <//href = "#"#"#"#" id = "Пример Navbar-Collapse"> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" data-toggle = "выпадающий"> java <b> </b> </l> href = "#"> jmeter </a> </li> <li> </li> <li> <a href = "#"> разделенная ссылка </a> </li> <li> </li> <li> <a href = "#"> Другая отдельная ссылка </a> </li> </li> </ul> </div> </nav>
(3) формируются в навигационной панели
Форма в панели навигации не использует класс по умолчанию, упомянутый в главе формы начальной загрузки, она использует класс .Navbar-форма. Это обеспечивает правильное вертикальное выравнивание формы и поведение складывания в более узком просмотре. Используйте параметры выравнивания (это будет подробно объяснено в разделе выравнивания компонентов), чтобы решить, где размещено содержимое в панели навигации.
<NAV ROLE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <form rol = "search"> <div> <input type = "text" Placeholder = "search"> </div> <button type = "Отправить"> отправить </button> </form> </div> </div>
(4) Кнопки в панели навигации
Вы можете использовать класс .navbar-btn, чтобы добавить кнопку к элементу <tood>, которого нет в <Form>, которая вертикально центрируется на панели навигации. .navbar-btn можно использовать в элементах <a> и <pint>. Не используйте .navbar-btn на <a> элементах внутри .navbar-nav, потому что это не стандартный класс кнопок.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit button</button> </form> <button type="button">Navigation bar button</button> </div></nav>
(5) Текст в панели навигации
Если вам нужно включить текстовые строки в свою навигацию, используйте класс .Navbar-Text. Обычно это используется с тегами <p>, обеспечивая правильное руководство и цвет.
<NAV ROLE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> Подписан как Thomas </p> </div> </vav>
(6) НЕ-Навигационная ссылка
Если вы не хотите использовать стандартные ссылки в обычном навигационном навигационном компоненте, используйте класс Navbar-Link, чтобы добавить соответствующие цвета к параметрам по умолчанию и инвертированной навигационной панели.
<NAV ROLE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> Подписано как <a href = "#"> Thomas </a> </p> </div> </div>
(7) выравнивание компонентов
Вы можете использовать класс утилиты. Навбар-левый или. Оба класса добавляют CSS -плавания в указанном направлении.
(8) исправлено на вершине
Навигационная панель начальной загрузки может быть динамически расположена. По умолчанию это элемент уровня блока, который расположен на основе местоположения, размещенного в HTML. С некоторыми вспомогательными классами вы можете разместить его в верхней или нижней части страницы, или вы можете сделать статическую навигационную панель, которая прокручивается вместе со страницей. Если вы хотите, чтобы навигационная панель была прикреплена к верхней части страницы, добавьте класс. Навбар-фиксированный тур в класс .Navbar. Следующий пример демонстрирует это: чтобы предотвратить промежуточную черту навигационной панели с верхней частью другого контента в корпусе страницы, добавьте не менее 50 пикселей прокладки в тег <Body>, и значение прокладки может быть установлено в соответствии с вашими потребностями.
<NAV ROLE = "Навигация">
</nav>
(9) исправлена на дно
Если вы хотите, чтобы навигационная панель была прикреплена к нижней части страницы, добавьте класс. Навбар-фиксированные дни в класс .Navbar.
<NAV ROLE = "Навигация"> </NAV>
(10), статический топ
Чтобы создать навигационную панель, которая прокручивается вместе со страницей, добавьте. Этот класс не требует, чтобы прокладка была добавлена в <body>.
<NAV ROLE = "Навигация">
</nav>
(11), перевернутая навигационная планка
Чтобы создать перевернутую навигационную панель с черным фоном белого текста, просто добавьте. Недоверный класс.
Чтобы не допустить, чтобы навигационная панель не была проведена с верхней частью другого контента в корпусе страницы, добавьте не менее 50 пикселей прокладки в тег <body>, и значение прокладки может быть установлено в соответствии с вашими потребностями.
<NAV ROLE = "Навигация"> </NAV>
8. начальная сухари
Сухания-это метод отображения, основанный на информации на уровне веб-сайта. Возьмите блог, в качестве примера, навигация Breadcrumb может отображать дату выпуска, категория или тег. Они представляют местонахождение текущей страницы в иерархии навигации.
Сухания в начальной загрузке - это простой неупорядоченный список с классом .breadcrumb. Разделитель будет автоматически добавлен с помощью класса, показанного ниже в CSS (bootstrap.min.css):
<ol>
<li> <a href = "#"> Home </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> ноябрь </li>
</ol>
9. Начальная страница
(1) Переводы - это неупорядоченный список. Bootstrap обрабатывает страницу, как и другие элементы интерфейса.
(2) поворот страницы (пейджер)
Если вы хотите создать простую ссылку на пейджингу для предоставления навигации для пользователей, это может быть сделано, перевернув страницу. Как и ссылки на пейджинг, поворот страницы также является неупорядоченным списком. По умолчанию ссылка сосредоточена. В следующей таблице перечислены класс, который обрабатывает обращение страницы.
10. Bootstrap Tags
Bootstrap Tag. Теги могут использоваться для подсчета, подсказки или другого отображения маркировки на странице. Вы можете использовать модифицированную метку класса, этикетку-принципиальные, метки-сюжета, метку-инфу, меток, метку, чтобы изменить внешний вид метки.
<pran> тег по умолчанию </span>
<pran> Основные теги </span>
<pran> Tag успех </span>
<pran> Информационный тег </span>
<pran> предупреждающие теги </span>
<pran> tag опасность </span>
11. Bootstrap значков
(1) Значок похож на этикетку, основное отличие состоит в том, что углы значка более гладкие.
Значки в основном используются для выделения новых или непрочитанных элементов. Чтобы использовать значки, просто добавьте <pan> к ссылкам, навигации по начальной загрузке и другим элементам. Когда нет новых или непрочитанных элементов, значок будет сложен через: пустой селектор CSS, чтобы указать, что внутри нет контента.
<a href = "#"> почтовый ящик <pran> 50 </span> </a>
(2) активировать статус навигации
Вы можете поместить значки в капсульную навигацию и перечислить навигацию в активном состоянии. Активируйте ссылку, используя <pan>.
<h4> Состояние активации в капсульной навигации </h4> <ul> <li> <a href = "#"> Homepage <pran> 42 </span> </a> </li> <li> <a href = "#"> Введение </a> </li> <li> <a href = "#"> сообщение <pran> 3 </span> </li> <li> <a href = "#"> 3 </span> </li> <li> <a href = "#"
12. Bootstrap Super Bargy Screen (Jumbotron)
Супер большой экран (Jumbotron). Как следует из названия, этот компонент может увеличить размер заголовка и добавить больше маржи к содержанию страницы входа в систему. Шаги по использованию Jumbotron заключаются в следующем:
A. Создайте контейнер <div> с классом .jumbotron.
B. В дополнение к более крупному <h1>, шрифт-вес-вес-вес-вес-вес-вес уменьшается до 200 пикселей.
<div> <div> <h1> Добро пожаловать в систему! </h1> <p> Это экземпляр Jumbotron. </p> <p> <a rol = "button"> Узнайте больше </a> </p> </div> </div>
Чтобы получить огромный экран, который занимает всю ширину без округлых углов, используйте класс. Jumbotron за пределами всех классов .container.
13. Название страницы начальной загрузки (заголовок страницы)
Заголовок страницы - хорошая функция, которая добавляет соответствующий интервал вокруг заголовка страницы. Функция заголовка страницы особенно полезна, когда на веб -странице есть несколько названий, и между каждым заголовком необходимо добавить определенное расстояние. Чтобы использовать заголовок страницы, поместите свой заголовок в <Div> с классом.
<div> <h1> Пример заголовка страницы <mall> subtitle </small> </h1> </div>
14. Bootstrap Manubnail
(1) Миниатюра начальной загрузки. Большинству сайтов необходимо макировать изображения, видео, текст и т. Д. В сетке. Bootstrap обеспечивает простой способ сделать это с помощью миниатюр. Шаги по созданию миниатюр с использованием начальной загрузки следующие:
A. Добавьте тег <a> с классом.
B. Это добавит четырех пикселей и серую границу.
C. Когда мышь колеблется над изображением, будет отображаться контур изображения.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>
(2) Добавить пользовательский контент
Теперь, когда у нас есть основная миниатюра, мы можем добавить различный HTML -контент в миниатюру, такие как названия, абзацы или кнопки. Конкретные шаги следующие:
A. Измените тег <a> с классом.
B. В этом <Div> вы можете добавить все, что хотите добавить. Поскольку это <Div>, мы можем использовать правила именования на основе SPAN по умолчанию для изменения размера.
C. Если вы хотите сгруппировать несколько изображений, поместите их в неупорядоченный список, и каждый элемент списка плавает слева.
15. Предупреждение начальной загрузки (оповещения)
Оповещения и класс, предоставленные Bootstrap для предупреждений. Alerts предоставляет пользователям способ определить стили сообщений. Они предоставляют контекстную информацию для типичных пользовательских операций. Вы можете добавить дополнительную кнопку закрытия в поле предупреждения. Чтобы создать встроенную рамку с отменой предупреждения, используйте плагин JQUERY Alerts.
Вы можете добавить базовый предупреждение, создав <Div> и добавив один из класса Alert и четыре класса контекста (то есть. Alert-Success,. Alert-info,. Alert-Warning,. Alert-Danger).
<div> Успех! Представление было сделано очень хорошо. </div>
<div> Информация! Обратите внимание на эту информацию. </div>
<div> Предупреждение! Пожалуйста, не отправляйте. </div>
<div> Ошибка! Пожалуйста, внесите некоторые изменения. </div>
(1) Отмена предупреждения (оповещения об увольнении)
Шаги по созданию отменяемого предупреждения (предупреждение об увольнении) заключаются в следующем:
A. Добавьте базовый предупреждающий коробку, создав <Div> и добавив один из класса. Alert и четыре класса контекста (то есть. Alert-Success,. Alert-info, .Alert-Warning,. Alert-Danger).
B. В то же время добавьте необязательный. ALERT-DISMISSISBALE в вышеупомянутый класс <DIV>.
C. Добавьте кнопку закрытия.
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> успех! Представление было сделано очень хорошо. </div>
(2) ссылки в оповещениях
Шаги по созданию ссылки в оповещениях следующие:
A. Добавьте базовый предупреждающий коробку, создав <Div> и добавив один из класса. Alert и четыре класса контекста (то есть. Alert-Success,. Alert-info, .Alert-Warning,. Alert-Danger).
B. Используйте класс Alert-Link Entity, чтобы быстро предоставить ссылки с соответствующими цветами.
<div>
<a href = "#"> Успех! Представление было сделано очень хорошо. </a>
</div>
16. Bootstrap Progress Bar
В этой главе объяснит планшета начальной загрузки. В этом уроке вы увидите, как использовать начальную загрузку для создания панелей прогресса для загрузки, перенаправления или состояний действия.
Бар начальной загрузки использует переходы и анимации CSS3, чтобы получить этот эффект. Internet Explorer 9 и предыдущие версии и более старые версии Firefox не поддерживают эту функцию, а Opera 12 не поддерживает анимации.
(1) Бар хода по умолчанию
Шаги по созданию базовой панели прогресса следующие:
A. Добавить <Div> с классом .progress.
B. Затем добавьте пустой <viv> с классом .progress-bar в вышеупомянутом <div>.
C. Добавьте атрибут стиля с шириной, представленной процентом, такой как Style = "60%"; Чтобы указать, что план прогресса составляет 60%.
<div> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <pran> 40% завершен </span> </div> </div>
(2) чередование панели прогресса
Шаги по созданию решений прогресса разных стилей заключаются в следующем:
A. Добавить <Div> с классом .progress.
B. Затем, в вышеупомянутом <div>, добавьте пустой <viv> с классом .progress-bar и классовым прогрессом-bar-*. Среди них * может быть успех, информация, предупреждение, опасность.
C. Добавьте атрибут стиля с шириной, представленной процентом, такой как Style = "60%"; Чтобы указать, что план прогресса составляет 60%.
<div> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <pan> 90% завершен (успешно) </span> </div> </div>
(3) Прогресс -панель полос
Шаги по созданию панели прогресса в полосе следующих:
A. Добавить <Div> с классом. ПРОГРАММЫ И .progress-Striped.
B. Затем, в вышеупомянутом <div>, добавьте пустой <viv> с классом .progress-bar и классовым прогрессом-bar-*. Среди них * может быть успех, информация, предупреждение, опасность.
C. Добавьте атрибут стиля с шириной, представленной процентом, такой как Style = "60%"; Чтобы указать, что план прогресса составляет 60%.
<div> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <pan> 90% завершен (успешно) </span> </div> </div>
(4) Прогресс -панель анимации
Шаги по созданию панели прогресса анимации следующие:
A. Добавить <Div> с классом. ПРОГРАММЫ И .progress-Striped. Также добавьте класс .active.
B. Затем добавьте пустой <viv> с классом .progress-bar в вышеупомянутом <div>.
C. Добавьте атрибут стиля с шириной, представленной процентом, такой как Style = "60%"; Чтобы указать, что план прогресса составляет 60%.
Это даст полосам чувство движения справа налево.
<div> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <pran> 40% завершен </span> </div> </div>
(5) Сложный планшетный план
Вы даже можете сложить несколько стержней прогресса. Вы можете сложить несколько стержней прогресса в одном. Прогресс.
17. Bootstrap Multimedia Object (Media Object)
Мультимедийный объект в Bootstrap (Media Object). Эти абстрактные стили объектов используются для создания различных типов компонентов (таких как комментарии в блоге). Мы можем использовать графическое и текстовое микширование в компонентах, а изображения могут быть влево или вправо выровнены. Объекты мультимедиа могут использовать меньше кода для достижения смешанного расположения объектов медиа -объектов и текста.
Легкие теги и простые в масштабирующих свойствах объектов мультимедиа достигаются путем применения класса к простым тегам. Вы можете добавить следующие две формы в тег HTML, чтобы настроить объект Media:
A. Media: Этот класс позволяет мультимедиа (изображение, видео, аудио) в объекте Media, чтобы переплачивать слева или справа от блока контента.
B. СМИ-list: Если вам нужен список, каждый элемент является частью неупорядоченного списка, вы можете использовать этот класс. Может использоваться для списков комментариев и списков статей.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4> Title </h4> Вот какой-то пример текста. Вот какой -то образец текста. </div> </div>
18. Группа списков начальной загрузки
Компоненты списка используются для рендеринга комплекса и пользовательского контента в форме списка. Шаги по созданию основной группы списков следующие:
A. Добавить класс. Список группы в элемент <ul>.
B. Добавить класс .List Group-item в <li>.
<ul> <li> Регистрация имени доменного имени
(1) Добавить значок в группу списков
Мы можем добавить компонент значка в любой элемент списка, который автоматически будет расположен вправо. Просто добавьте <pan> в элемент <li>.
<ul> <li> Регистрация имени доменного имени
(2) Добавить ссылку в группу списков
Используя якорные теги вместо элементов списка, мы можем добавить ссылки в группы списков. Нам нужно использовать <div> вместо элемента <ul>.
<a href = "#"> 24*7 Поддержка </a>
<a href = "#"> Пространство свободного окна </a>
(3) Добавить пользовательский контент в группу списков
Мы можем добавить любой HTML -контент в группу списков, которая была добавлена по ссылке выше.
19. Bootstrap Panels (панели)
Начальная панели (панели). Узел панели используется для вставки сборки DOM в коробку. Чтобы создать базовую панель, просто добавьте класс .panel и класс .panel-default в элемент <div>,
<div> <div> Это основная панель </div> </div>
(1) Название панели
Мы можем добавить названия панелей двумя способами:
A. Использование класса. Панель может легко добавить контейнер заголовка на панель.
B. Используйте <h1>-<h6> с классом .panel-title, чтобы добавить заголовок предопределенного стиля.
<div> <div> Название платформы без заголовка </div> <div> Содержание платформы </div> </div>
(2) панель сноски
Мы можем добавить сноски на панель, просто положить кнопку или подтекст в <viv> с классом .panel-footer.
<div> <div> Это базовая панель </div> <div> Сноска панборда </div> </div>
(3) Панель с контекстуальным цветом
Используйте панель-панель-панели, панель-концерт, панель-инфу, панель и панель, чтобы настроить панель с контекстуальными цветами.
<div> <div> <h3> Название платформы </h3> </div> <div> Это основная панель </div> </div>
(4) Панель с таблицей
Чтобы создать безграничную таблицу на панели, мы можем использовать класс. Таблица на панели. Предполагая, что существует <div>. Если нет <div>.
<div> <div> <h3> Название платформы </h3> </div> <div> Это базовая панель </div> <table> <th> Продукт </th> <Th> Прайс </th> <Tr> <td> Продукт A </td> <td> 200 </td> </tr> <tr> <td> </td> <td> 400 </td> </tr> <td> <td> </td> <td> 400 </td> </tr> <td> <td> </td> <td> 400 </td>
(5) Панель с группой списков
Мы можем включить группы списков в любую панель, создать панели, добавив классы .Panel и .panel-Default в элемент <div> и добавили группы списков на панели.
<div> <div> Название платформы </div> <div> <p> Это базовый контент панели. </p> </div> <ul> <li> Регистрация имени домена </li> <li> Годовая стоимость обновления </li> </ul> </div>
20. Bootstrap Well
Хорошо это контейнер, который вызывает эффект вмятины или иллюстрации на содержание <div>. Чтобы создать колодец, просто положите контент в <Div> с классом.
<div> Привет, я хорошо! </div>
(1) размер
Вы можете использовать дополнительные классы Well-LG или Well-SM, чтобы изменить размер скважины. Эти два класса используются в сочетании с классом .well. Эти два класса влияют на прокладку, и в зависимости от используемого класса, скважина будет выглядеть больше или меньше.
<div> Привет, я в большом скважине! </div>
<div> Привет, я в том же духе! </div>
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.