Я продолжал писать макет предыдущей статьи. В предыдущей статье я завершил макет навигационной панели и рекламы.
Начните размещать:
Я думаю, что финальный рендеринг такой, следующим образом: я разделен на три страничные скриншоты, которые слишком велики:
Тогда последний незаконченный будет продолжаться:
Шаг 5: Добавление системы сетки я выбрал макет трех столбцов COL-MD-4; Полная сетка составляет 12, а 4-одна треть 12. Вы также можете отзывчиво макет и установить несколько сетей:
<div id = "tag_container"> <div> <div> <img src = "image/3.jpg"> <h2> Animal1 </h2> <p> Linka Hotel только что сказал, что Fenghan увидел большое судирное учреждение, отправленное в обратный </p> <p> <a href = "#" src = "Image/3.jpg"> <h2> Animal1 </h2> <p> Linka Hotel только что сказал, что Fenghan увидел большое сувенирное учреждение, отправленное в Back </p> <p> <a href = "#"> Нажмите меня </a> </p> </p> <div> <img src = "Image/3.jpg"> <h2> </H2 </H2 </H2 </H2> </H2> </H2> </H2> <H2> </H2> <H2> </H2> </H2> </H2> </H2> </H2> </H2 </H2> </p> </p> <div> <img src = ". что Фенган увидел, как я поисково -домик, присланный мной, </p> <p> <a href = "#"> щелкните меня </a> </p> </div> </div> </div> </div> </div>
1) Сетка должна находиться в контейнере или контейнере-потоке, так что можно автоматически назначить соответствующее выравнивание и заполнение.
2) Сделайте идентификатор "TAG_Container", а часть с классом Col-MD-4 сосредоточена и выровнена:
#tag_container .col-md-4 {text-align: center; }Шаг 6: Установите расстояние между линиями и разделите верхнюю и нижнюю части
<hr> </hr>
CSS есть
HR .Divider {Margin: 40px; }Шаг 7: Создание страницы вкладок. Следующее изображение - визуализация трех страниц вкладок:
1) Принцип страницы вкладок:
<ul rol = "tableist"> <li> <a href = "#an1" rol = "tab" data-toggle = "tab"> Animal1 </a> </li> <li> <a href = "#an2" role = "tab" data-toggle = "tab"> Animal2 </a> </li> <li> <a href = "#an3" Tab = "Tab = animal2 </a> </li> <li> <a href ="#an3 " data-toggle = "tab"> Animal3 </a> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
Структура страницы тегов: Список UL объявляет теги и метки Class = "NAV-Tabs" ROLE = "TABLIST"
Ссылка в теге LI является помеченной ROLE = "Tab" Data-toggle = "Tab", так что функция открытия страницы страницы вкладки может быть достигнута. Href = "#an1" на каждой странице вкладка связана со следующим макетом отображения.
Расширенная структура макета: в <Div> на каждой странице вкладка есть панель. Обратите внимание, что идентификатор карты на вкладке выше, чтобы можно было открыть страницу. <div id = "an3">
2) Добавить макет на странице тегов
<ul rol = "tableist"> <li> <a href = "#an1" rol = "tab" data-toggle = "tab"> Animal1 </a> </li> <li> <a href = "#an2" role = "tab" data-toggle = "tab"> Animal2 </a> </li> <li> <a href = "#an3" Tab = "Tab = animal2 </a> </li> <li> <a href ="#an3 " data-toggle = "tab"> Animal3 </a> </li> </ul> <div> <div id = "an1"> <div> <div> <h2> Animal1 <pran> Zootopia </span> </h2> <p> ajdkgjfd видит цену времени технологического самолета, разработанного технологическим самолетом Time. If the Embassy Shiguo Police Day results cost, the price of Ka song artificial mourning irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/1.jpg"> </div> </div> </div> <div> <div> <h2>Animal2 <span>Zootopia</span></h2> <p> ajdkgjfd видит цену самолетов Time Technology, разработанного мочщиком технологическим самолетом. Если стоят результаты полицейского дня посольства Шигуо, цена на песню KA Artificial Mourning Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "Image/2.jpg"> </div> </div> </div> <div Id = "An3"> <d Div> <h2> </div> </div> <div id = " <pran> Zootopia </span> </h2> <p> ajdkgjfd видит цену самолета Time Technology. Если результат полицейского дня Посольства Шигуо результат, цена KA Song Artificial Mourning Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "Image/3.jpg"> </div> </div> </div> </div> </div>
1) Установите верхнюю поля на вкладках страницы
.feature {Padding: 30px 0}2) Установите заголовок шрифтов на вкладках и т. Д.
. Цвет:#2A6496; маржинальная версия: 120px; }
3) Установите формат подзаголовок на странице вкладок:
.feature. Цвет: #999; }
Шаг 8: Добавьте нижнее уведомление об авторском праве, визуализации следующие:
<chooler> <p> <a href = "#top"> назад к вершине </a> </p> <p>@2016 Rongyu System </p> </cooler>
ПРИМЕЧАНИЕ: Class = "Pull-Right" может вытянуть элемент вправо, что является особенностью CSS Bootstrap.
Шаг 9: Добавьте кнопку всплывающего окна о:
<div id = "about"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <h4> о </h4> </div> <p> Zootopia. и озвученным Гиннифом Гудвином, Джейсоном Бейтман, Шакирой, Алленом Туддиком, Идрисом Эльба, Дж. К. /.modal-content-> < /div> <!-/.modal-dialog-> < /div> <!-/.modal-dialog-> < /div> <!-/.modal->
1) Статическое всплывающее окно разделено на три части: заголовок, форма и кнопка; Среди которых нам нужна только одна кнопка, а другая прокомментировала. И добавить id = собираться облегчить позиционирование ниже;
2) В строке меню о навигационной панели добавьте переключательную ссылку, data-toggle = "modal", а ID соответствует Data-target = "#о":
<li> <a href = "#" data-toggle = "modal" data-target = "#о"> о </a> </li>
Шаг 10, позиционирование меню
Нажмите на столбец функции навигационной панели, и будет открыта соответствующая вкладка; Для его реализации необходим часть кода JS
<Script> $ (document) .ready (function () {$ ("#demo-navbar .dropdown-menu a"). click (function () {var href = $ (this) .attr ('href'); // alert (href); $ ("#tab-list a [href = ' + href +"'] ")."); "); </script>1) перемещаться по позиционированию идентификации $ ("#демо-навбар .dropdown-menu a") и установите событие Click;
2) Tab ("Show"), чтобы открыть вкладку $ ("#lab-list a [href = '" + href + "']").
Таким образом, началось обучение Bootstrap.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам замечательную тему: учебник по обучению Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.