Введение в начальную загрузку
Bootstrap, из Twitter, является самой популярной фронтальной структурой в настоящее время. Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее.
Компонент миниатюры
Наиболее часто используемые миниатюры на веб -сайтах - это страница списка продуктов, которая отображает несколько изображений в одной строке, а некоторые имеют названия, содержание описания, кнопки и другую информацию под изображениями.
Структура начальной загрузки разделяет эту часть на компонент модуля и реализуется через имя класса. Тублонна и система Bootstrap Grid. Ниже приведены файлы исходного кода различных версий компонента миниатюрного миниатюра начальной загрузки:
Меньше: tbumbnails.less
Sass: _tbumbnails.scss
Принцип реализации:
Реализация макета в основном опирается на систему сетки платформы начальной загрузки. Ниже приведен стиль, соответствующий миниатюре
.thumbnail {дисплей: блок; накладка: 4px; Margin-bothom: 20px; линейная-высота: 1.42857143; фоновый цвет: #fff; граница: 1px solid #ddd; границы-радий: 4px; -webkit-transition: все. img {margin-ruight: auto; margin-left: auto;} a.thumbnail: Hover, A.ThumbNail: Focus, A.ThumbNail.Active {Border-Color: #428BCA;}.Давайте посмотрим на пример:
<div> <div> <a herf = "#"> <img src = "img/1.jpg" style = "Высота: 180px; ширина: 100%; дисплей: блок"> </a> </div> <div> <a herf = "#"> <img src = "img/2.jpg" стиль = "высота: 180px; width: 100%; Блок "> </a> </div> <div> <a herf ="#"> <img src =" img/3.jpg "style =" Высота: 180px; ширина: 100%; отображение: блок "> </a> </div> <div> <a herf ="#"> <img src =" img/4.jpg ". Блок "> </a> </div> </div>
Эффекты следующие:
Вы можете просмотреть его, используя Firefox Recavive Design View
На основе только миниатюр, добавьте контейнер для Div с именем класса. Крайт и поместите другое содержимое в этом контейнере, например: заголовок, описание текста, кнопки и т. Д.
<div> <div> <div> <a href = "#"> <img src = "img/1.jpg" style = "Высота: 180px; ширина: 100%; дисплей: блок"> </a> <div> <h3> Вот графическое название 1111 </h3> <p> Содержание. Здесь Описание Содержимое Описание Описание Описание Описание. Описание Описание Описание. Описание Описание Описание. Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание. З. here is the description content here is the description content here is the description content here is the description content here is the description content</p><a href="#">Begin to learn</a></div><div><a href="#"><img src="img/2.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 2222 </h3> <p> Вот описание Содержание 2222Here - это описание Содержание 2222Here - это описание содержимое 2222Here - это содержимое описания 2222Here - это содержимое описания 2222. Style = «Высота: 180px; ширина: 100%; дисплей: блок»> </a> <div> <h3> Вот графическое название 3333 </h3> <p> Вот описание Содержание 3333 Вот содержимое описания 3333 Вот содержимое описания 3333 Вот содержимое описания 222. Узнайте </a> </div> <div> <a href = "#"> <img src = "img/4.jpg" style = "Высота: 180px; ширина: 100%; отображение: блок"> </a> <div> <h3> Вот графическое название 4444 </h3> <p>. Описание Содержание 4444HERE - это описание Содержание 4444HERE - это описание Содержание 4444 </p> <a href = "#"> начать изучать </a> <a href = "#"> Изучение </a> </div> </div> </div>
Компонент оповещения
Структура Bootstrap использует стиль Alert для достижения эффекта предупреждения. По умолчанию Bootstrap предоставляет четыре различных эффекта предупреждения:
1. Успешное предупреждение: побуждает пользователя преуспеть в операции, добавьте стиль. Alert-Success на основе .Alert;
2. Блок предупреждения о информации: предоставить пользователям быстрое информацию и добавить стиль Alert-Info на основе .Alert;
3. Предупреждающий ящик: предоставить предупреждающую информацию и добавить стиль алреста на основе. Alert;
4. Ошибка предупреждения о ошибке: подсказывает пользователю ошибки в эксплуатации и добавьте стиль Alert Danger на основе .alert;
Среди них стиль. Alert в основном устанавливает цвет фона, границу, округлый угол и цвет текста предупреждающей коробки. Кроме того, обработка стиля выполняется на H4, P, UL и .Alert-Link. Ниже приведен исходный код CSS:
.Alert {Padding: 15px; Margin-Bottom: 20px; граница: 1px Solid Transparent; Border-Radius: 4px;}. Alert h4 {margin-top: 0; color: nherit;}. Alert. Alert-Link {font-weight: Bold;}. Alert> p, .Alert> ul {margin-b-weight: 0; {margin-bott. {margin-top: 5px;}. Alert-success {color: #3c763d; фоновый цвет: #dff0d8; границы: #d6e9c6;}. alert-success hr {border-top-color: # #2b52c3 {color: #31708f; фоновый цвет: #d9edf7; border-color: #bce8f1;}. alert-info hr {border-top-color: #a6e1ec;}. alert-info. Alert-link {color: #245269;}. Alert-warning { #8A6D3 #faebcc;}. warnning hr {border-top-color: #f7e1b5;}. alert-warning .alert-link {color: #66512c;}. Alert-grong #e4b9c0;}. Alert Danger .Alert-Link {Color: #843534;}Например:
<div role = "replert"> Поздравляем с вашей успешной операцией! </div> <div rol = "warer"> Пожалуйста, введите правильный пароль </div> <div rol = "ware"> вы потерпели неудачу дважды, и есть еще один последний шанс </div> <div rol = "warer"> извините, ваш пароль был введен неверно! </div>
Краткая оповещения
1. Добавьте имя класса. Alert-Dismissable к контейнеру в блоке предупреждения по умолчанию.
2. Добавить .close в кнопку метку, чтобы реализовать кнопку закрытия блока предупреждения
3. Убедитесь, что пользовательский атрибут data-dismiss = "оповещение" установлен на элементе кнопки «Закрыть» (закрытие блока оповещения требует JS для обнаружения атрибута, тем самым контролируя закрытие блока оповещения)
пример:
<div rol = "alert"> <button Type = "Кнопка" Data-Dismiss = "Alert"> × </button> Поздравляем с вашей успешной операцией! </div><divrole="alert"><button type="button" data-dismiss="alert">×</button>Please enter the correct password</div><div role="alert"><button type="button" data-dismiss="alert">×</button>You have failed the operation twice, and there is a last chance</div><div role="alert"><button type="button" Data-Dismiss = "Alert"> × </button> Извините, ваш пароль был введен неправильно! </div>
Ссылка на Alert Box
Иногда вам нужно добавить ссылку в поле для предупреждения, чтобы сообщить пользователю перейти на новую страницу. Ссылка на поле предупреждения выделена в платформе начальной загрузки. Добавьте имя класса как .Alert-Link в ссылку, добавленную в поле предупреждения. Ниже приведен стиль CSS of Alert Link
.alert .alert-link {font-weight: bold;}/*Цвет текста ссылки в разных типах предупреждающих коробок*/. Alert-success .alert-link {color: #2b542c;}. Alert-info. Alert-link {color: #245269;}. Alert-Warning .Alert-link {Color: #245269;}. Alert-Warning. #66512C;}. Alert Danger .Alert-Link {Color: #843534;}пример:
<div rol = "alert"> <strong> хорошо сделано! Читать <a href = "#"> это важное оповещение </a> </div> <div rol = "alert"> <strong> хорошо сделано! </strong> Вы успешно читаете <a href = "#"> ROLE = "Alert"> <strong> хорошо сделано! </strong> Вы успешно читаете <a href = "#">
Я так много расскажу о компоненте компонента миниатюры Bootstrap и компонентом предупреждения, который эта статья представляет вам. Я надеюсь, что это будет полезно для вас!