В предыдущей статье уже говорилось о некоторых шагах и о некоторых основных использовании начальной загрузки. Нажмите, чтобы просмотреть
Этот блог продолжает представлять вам некоторые общие эффекты, в основном включая следующие компоненты
1. Снимите меню
2. Навигационный бар
3. Прогресс -бар
4. Media Objects
5. Парень
6. Список
Во -первых, импортировать CSS и JS Bootstrap
<link rel = "styleSheet" href = "css/bootstrap.min.css"> <!-Лучше всего цитировать CSS CDN, некоторые файлы стиля не-> <link rel = "stylesshiet" href = "// cdn.bootcss.com/bootstrap/3.5/cssssssssssss.min.css.com/bootstrap/3.5/cssssssssmscscscscs.com/bootstrap/3.5/cssssscscscscs.com. src = "js/jquery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Снимите меню
Он состоит в основном из кнопки и UL, и может добавлять субтитры и линии разделения
<div> <button type = "button" data-toggle = "выпадающий" aria-expanded = "false"> Line <!-это символ нисходящего треугольника-> <pan> </span> </button> <ul role = "menu"> <!-Это субтит href = "#"> Line 2 </a> </li> <li> <a href = "#"> строка 3 </a> </li> <li> <a href = "#"> строка 4 </a> </li> <!-Это разделение-> <li> </li> <li> <a href = "#"> line 5 </a> </li> <li> <a href = "#">
2. Навигационный бар
Навигационная строка является стандартом практически для каждой веб -страницы, поэтому абсолютно правильно научиться ее использовать.
Это навигационная панель в верхней части страницы
<!-Установите класс NAV, чтобы быть более высоким классом, установите на Navbar-Static-Top, чтобы удалить округлые углы Navbar и исправить его вверху-> <NAV ROLE = "Navigation"> <Div> <!-Начало навигационной панели, обычно текст или изображение-> <Div> <!-Кнопка может нажать на меню, когда позиция недостаточно-> <Кнопка «Кнопка» = «Кнопка». data-target = "#bs-example-navbar-collapse-1"> <pan> навигация по переключению </span> <pran> </span> <pan> </span> <pan> </span> <pan> </span> </button> <!-Swap Brand на img-> <a href = "#"> brand </a> </divesse-xample-ex-colls-colle-colls-colle-x. Чтобы отозвать и нажать на-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> Management </a> </li> <li> <a href = "#"> Управление членом </a> </li> <li> <a href = "#"> Управление членом </a> </li> <a href = "#"> </li> <href = "#" Управление </a> </li> <li> <a href = "#"> Management </a> </li> <li> <a href = "#"> Management </a> </li> <li> <a href = "#"> Управление участниками </a> </li> <li> <a href = "#"> Управление членом </a> </li> <li> <a href = "#"> </a> </li> <li> <a href = "#"> </a> </li> <li> <href = "#" <li> <a href = "#" data-toggle = "drupdown" rol = "button" aria-expaded = "false"> поддержание системы <pran> </span> </a> <ul rol = "menu"> <li> <a href = "#"> Восстановить систему </a> </li> <li> <a href = "#" href = "#"> declonect </a> </li> <li> <a href = "#"> Удалить пользователя </a> </li> </li> </li> </ul> <!-Напишите вправо вправо и справа-> <!-кнопку навигации-> <Кнопка-тип = ">« Подписать »>« Кнопка »</nover> <! <input type = "text" Placeholder = "Введите Содержание поиска"> </div> <button Type = "Summit"> Search> </form> </div> </div> </nav> </nav>
Когда мы используем веб -страницы для просмотра блогов или файлов, у нас есть уровень. В настоящее время, если мы хотим вернуться на предыдущий уровень или несколько уровней, нам нужна навигационная панель местоположения.
<!-навигационная строка-> <ol> <li> <a href = "#"> my Backend </a> </li> <li> <a href = "#"> Системный анализ </a> </li> <!-Текущее местоположение не может быть нажат, чтобы прыгнуть-> <li> Статистика доступа </li> </ol> <!
3. Прогресс -бар
<div> <!-Прогнозируется на полосах, а анимация Active Set-> <!-Покажите процент панели прогресса в соответствии с процентом ширины стиля-> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <prop>. </div> </div>
4. Media Objects
Это в основном то же сообщение на Weibo или Twitter
Аватар слева, заголовок и текст справа
<div> <div> <img src = "Images/1.jpg"> </div> <div> <h4> Media Heading </h4> <p> cras sit amet nibh libero, в Gravida nulla. Nulla Vel Metus Sclerisque Ante Sollicitinin Commomodo. Cras Purus Odio, Vestibulum в вультупуте At, Tempus viverra Turpis. Fusce Condimentum nunc ac nisi vulputate fringilla. DONEC LACINIA CONGUE FELIS в Faucibus. </P> </div> </div>
5. Парень
Это несколько страниц
<ul> <li> <a href = "#" aria-label = "предыдущий"> <!-двойные стрелки слева-> <span aria-hidden = "true"> «</span> </a> </li> <!-Первый вариант активирован-> <li> <a href ="#"> 1 </a> </li> <li> <li> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 6 </a> </li> <li> <a href = "#"> 7 </i> </li> </li> </li> </li> </li> href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "Next"> <!-двойные стрелки справа-> <span aria-hidden = "true"> »</span> </a> </li> </ul>
Это только предыдущая страница и следующая страница
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> предыдущая страница </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> Следующая страница </a> </li> </ul>
Выше написано с двумя кнопками, соединенными вместе
Следующее написано как две кнопки распределены с обеих сторон
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> предыдущая страница </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> Следующая страница </a> </li> </ul>
6. Список
Эффект списка очень распространен и очень прост в использовании
<div> <!-Первый элемент был выбран-> <a href = "#"> Статистика доступа </a> <a href = "#"> Информационная статистика </a> <a href = "#"> Статистика журнала </a> <a href = "#"> Информационная статистика </a> <a href = "#"> Информационная статистика </a> <A HREF = "#>"#> "№"#> "#>". href = "#"> Информационная статистика </a> <a href = "#"> Информационная статистика </a> </div>
Я использовал приведенный выше компонент, чтобы сделать бэкэнд статическую веб -страницу
Эффект, как показано на картинке
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.