Сегодня мы рассмотрим влияние компонента CSS и более важных классов. Эти классы не сложны. Ключ должен освоить их опытно, использовать их в комбинации и гибко использовать их. Для статей о стиле и макете CSS в первых двух статьях вы можете прочитать их в предыдущих статьях.
1. Навигационные компоненты
Я сам сделал навигацию. В настоящее время существует только меню первого уровня. В следующей статье будет дано меню второго уровня с участием плагинов JS, поэтому я не буду описать его здесь.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! -> <Title> Меню второго уровня </title> <style> .sidebar-menu {Margin: 20px Auto; ширина: 180px;}/*Перепишите стиль скольжения мыши*/. Nav-Pills li A: Hover {foangy-color: #337ab7; Цвет: #fff;} </style> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylessite"> <link href = "css/style.css" rel = "stolseheet"> <link href = "css/style.css" rel = " src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </scriptrap/3.3.4/js/bootstrap.min.js "> </scriptrap/3.3.4/js/bootstrap.min.js> </scripstrap/33.4/js/bootstrap.min.js> Меню-> <div> <ul> <li role = "presentation"> <a href = "#"> <pan> </span> home </a> </li> <li role = "presentation"> <a href = "#"> <pan> </span> о ME </a> </li> <li role = "> <a href ="#"#"> <span> </span> </span> </span> </span> </span> </span> </span> </span> </li> <li> </href = "#". <li rol = "presentation"> <a href = "#"> <pan> </span> отсутствует </a> </li> <li role = "presentation"> <a href = "#"> <pan> </span> Доска объявлений </a> </li> <li role = "Presentation"> <a href = "#"> </span> эмоциональный </ul> </div> </body> </html>Эффекты следующие:
Следующие моменты должны быть отмечены в навигации:
1: навигационный компонент зависит от класса NAV. (То есть при использовании других классов вы должны написать этот класс)
2: обеспечить доступность навигационных компонентов (добавить атрибут роли)
3: Вовлеченные классы включают в себя Nav-Tabs, NAV-Pills (Make навигационные капсулы), навигационные покрытия (сделайте горизонтальную навигацию в вертикальную навигацию), овщинка (сделайте навигационную навигацию равным расположению ширины)
4: Для класса отключенных, при добавлении ссылок на странице навигации (включая вкладки и навигационные страницы) он просто отключен на поверхности (цвет становится серо -сеянным, изменяется форма мыши), и фактическая функция все еще существует.
5: Используйте навигацию с раскрывающимся меню.
Давайте посмотрим на следующий подмоток: вы можете вставить код и проверить его самостоятельно, и больше не делать снимки экрана.
<!-Навигация зависит от класса NAV NAV-Tabs Class Class-> <ul> <li role = "Presentation"> <a href = "#"> Home </a> </li> --- Пожалуйста, добавьте роли атрибут <li role = "Presentation"> <a href = "#"> Profile </a> </li> <li role = "> <a href ="##"> </a> </li> <li role ="> <a href = "##"> </a> </li> <li role = " </ul> <!-вкладки капсулы вертикально расположены NAV-Stacked-> <ul> <li role = "Presentation"> <a href = "#"> home </a> </li> <li role = "Presentation"> <a href = "#"> Профиль </a> </li> <li role = "> <a href ="#"> </li> <li> <li> </href =" <!-Выравнивание навигации на обоих концах оправдано для достижения выравнивания навигационных столбцов-> <ul> <li role = "Presentation"> <a href = "#"> Home </a> </li> <li role = "Presentation"> <a href = "#"> Профиль </a> </li> <li role = "> <a href ="##"######"> </a> </lest </a> </li> <li olue = " <br> <br>
Давайте посмотрим на статус навигации в раскрывающемся меню:
<ul> <li rol = "presentation"> <a data-toggle = "drupdown" href = "#" role = "кнопка" aria-haspopup = "true" aria-expeded = "false"> выпадающий <pan> </span> </a> <ul> <li> <a href = "#"> action </a> </li> <li> <al> href = "/action </a> </li> <li> <al>#>"/#> "/action. <li> <a href = "#"> action 222 </a> </li> <li> <a href = "#"> action 333 </a> </li> </li> </li> <li> <a href = "#"> Действие 333 </a> </li> </li> </li> <li> <a href = "divider"> -lier divider, lieder hieder, lieder hieder, lieder hreeder. Обычно используя пустой LI или SPAN. <li rol = "presentation"> <a href = "#"> профиль </a> </li> <li role = "presentation"> <a href = "#"> Сообщения </a> </li> </ul>
Фактически, для использования раскрывающегося меню класса меню базовый формат похож на вышеупомянутый, или если вы включите ссылку A в кнопку A в кнопку и т. Д., Вы можете использовать его гибко.
2. Компонент навигационной планки
Примечание:
1: Навигационная планка состоит в том, чтобы организовать все компоненты горизонтально и обернуть компоненты, аналогично горизонтальной навигации
2: обеспечить доступность. Используйте тег <av> или <div rol = "navigation">
3: Классы, участвующие в навигационных стержнях, включают в себя: NAVBAR DEVERVERS (для реализации цвета фона как черного и текстового белого), навигационного фиксированного Top | Navbar-Fixed-Bottom (фиксированные навигационные стержни сверху и снизу)
Navbar-left | Navbar-Right (обычно добавляйте Navbar-Right к последнему элементу), Navbar-Text, Navbar-Link (установите цвет соединения), Navbar-Btn (для кнопок, не включенных в форму, вы можете
Используйте этот класс для достижения эффекта вертикального центрирования), формы Navbar (для достижения вертикального выравнивания), бренда Navber (Set Brand Icon), Navbar-Collapse (коллапс)
Давайте посмотрим на эффект складывания Navbar-Collapse, код заключается в следующем:
<!-- Navigation bar collapsed means folding--><nav> <div> <div> --Navigation bar header<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <pan> </span> </button> <a href = "#"> brand </a> </div> <div Id = "BS-Example-navbar-collapse-1">-Размещение колонки <ul> <li> <a href = "#"> link <pan> current </span> </a> </li> <li> <a href = "#"##"> link> href = "#" data-toggle = "drupdown" rol = "button" aria-haspopup = "true" aria-expaded = "false"> выпадает <pran> </span> </a> <ul> <li> <a href = "#"> action </a> </li> <li> <a href = "#"> другое действие </a> </li> <href = "#"> другое действие </li> <li> <a href = "#" Здесь </a> </li> <li> <a href = "#"> разделенная ссылка </a> </li> <li role = "seperator"> </li> <li> <a href = "#"> еще одна разделенная ссылка </a> </li> </li> </li> </ul> <form role = "> <dive> <Dife inpituld =" text holeThodOhtOh type = "Отправить"> отправить </button> </form> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "ROPDOWN" ROLE = "Кнопка" ARIA-HASPOPUP = "TRUE" ARIA-EXPANED = "FALSEDOWNDADIN href = "#"> action </a> </li> <li> <a href = "#"> другое действие </a> </li> <li> <a href = "#"> что-то еще здесь </a> </li> <li> <a href = "#"> разделенная ссылка </a> </li> </li> </li> </div> <! <Button Type = "Button" Data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expaded = "false"> <pan> навигация по переключению </span> <pran> </span> <pran> </span> <pan> </span> <span> </span> </button> <s href = "############"################".
Эффект заключается в следующем:
То есть, когда сжимается экран моего браузера, исходные компоненты станут сложенными линиями (три горизонтальные линии) с правой стороны линии бренда. Нажмите кнопку «Три горизонтали», и будет отображаться компонент.
3. Компоненты страниц
Примечание:
1: Используйте классовую страницу (добавьте класс Pagination-LG, чтобы сделать его больше)
2: достичь выравнивания страницы и реализации выравнивания страницы (передняя и задняя часть расположены на обоих концах соответственно).
Код заключается в следующем:
<!-Категория страниц-> <vav> <ul> <li> <a href = "#" aria-label = "предыдущий"> <span aria-hidden = "true"> «</span> </a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> </li> <li> <li> <li> href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#" aria-hidden = "true"> »» </span> </a> </li> </ul> </nav>
Если вы реализуете пейджинг, просто добавьте <ul>.
Эффект поворота страницы выглядит следующим образом: в основном используйте класс пейджера
<!-Flip-up-> <vav> <ul> <li> <a href = "#"> предыдущий </a> </li> <li> <a href = "#"> следующие </a> </li> </ul> </nav> <! aria-hidden = "true"> ← </span> старше </a> </li> <li> <a href = "#"> newer <span aria-hidden = "true"> → </span> </a> </li> </ul> </nav>
Эффекты вышеупомянутых двух следующих:
4. Значок
Функция: Представьте информацию в привлекательных номерах.
<!-Значок-> <a href = "#"> inbox <pan> 42 </span> </a> <button Type = "button"> Message <pan> 4 </span> </button>
Эффекты следующие:
Добавление этого типа класса значков также можно использовать с навигацией и т. Д.
5. Компонент миниатюры
Используйте его с растровой системой и уроком миниатюры. Код выглядит следующим образом: может быть проверен самостоятельно
<!-Миниатюрная миниатюр-> <div> <div> <div> <img src = "111.png"> <div> <h3> метка миниатюр </h3> <p> <a href = "#" Роль = "Кнопка"> Кнопка </a> </p> </div> </div> </div> <! src = "111.png"> <div> <h3> метка миниатюр </h3> <p> <a href = "#" "role =" Кнопка "> Кнопка </a> </p> </div> </div> <!-треть href = "#" rol = "button"> кнопка </a> </p> </div> </div> <!-третье-> <div> <div> <img src = "111.png"> <div> <h3> метка ссоры </h3> <p> <a href = "#" div> div> </h3> <p> <a href = "#" div> div> </h3> <p> <a href = "#" </div> </div> </div> </div> </div> </div> </div>
6. Краткая предупреждающая коробка
Используйте класс: предупреждение и кнопка, и кнопка размещаются следующим образом:
<!-Предоставьте кнопку «Закрыть» для блока предупреждения-> <div rol = "alert"> <button Type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-hidden = "true"> × </span>-Add Aria-hidden Attruit </button> <strong> </strong> лучше проверяйте себя, вы не будете выглядеть неплохо. Убедитесь, что правильное поведение на всех устройствах ->
Что касается сцены, вы можете заменить ее самостоятельно. Нет больше описания. Установите Alert Link, чтобы установить цвет, который соответствует текущей коробке предупреждения.
7. Прогресс
Использовать класс: прогресс и строка прогресса для реализации анимации
<!-Бар прогресса-> <div> <div rol = "progressbar" aria-valuenow = "60" aria-valuemax = "100" aria-valuemin = "0"> 60% </div> </div> <!-Установите минимальную ширину-> <div> <dive = "progressbar" aria-valuenow = "80" "aria-valuemin =" 0 "0" 0 "0" 0 "0". aria-valuemax = "100"> 80% </div> </div> <div> <div rol = "progressbar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100" style = "min-width: 2em;"> 2% </div> </div>
Чтобы достичь панели прогресса с эффектом анимации, используйте полосу прогресса, чтобы достичь эффекта анимации и добавить Active. Код выглядит следующим образом: больше нет снимков экрана
<!-Используйте Progress-Bar Stripped в классе полосы-> <div> <div rol = "progressbar" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"> <pan> 40% завершен </span> 100% </div> </div>
Вы также можете изменить цвет полос стержня в сочетании с цветом сцены.
8. Группа списка, компоненты входной группы
Давайте сначала посмотрим на группу списков, в основном используя класс группы списков, и, во-вторых, элементы списка написаны с помощью групп списков. Код заключается в следующем:
<!-Группа списков-> <ul> <li> <pan> 3 </span> 1111 </li> <li> <pan> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul> <! href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 55555 </a> </div> <!-Кнопка списка, кнопка «Использовать div и не может использовать класс». type = "Кнопка"> 2222 </button> <button Type = "button"> 3333 </button> <button Type = "Button"> 4444 </button> <!-Список группы группы-> <div> <a href = "#"> <h4> ЗАПИСЬ Группа </h4> <p> 11111 </p> </a> <a Href = "#"#> <h4> <p>. <p> 22222 </p> </a> </div>
Давайте посмотрим на группу ввода, используйте класс входной группы, чтобы обернуть компоненты вместе. Код заключается в следующем:
<!-Группа ввода-> <div>-Компоненты включены в inout-group <pran> <button type = "button"> go </button> </span> <input type = "text" aria-label = "text"> </div>
9. Встроенный контент в адаптивных функциях
Понять, что это значит и что такое встроенный контент? Как встроить это? Так как ответить?
Enced: то есть, используйте теги, такие как <iframe>, <embed>, <dive> и <object>, чтобы ввести внешний файл. Я считаю, что все знают новые атрибуты в HTML5. видео, радио и т. Д.
Ответ: автоматически создавать фиксированную шкалу на основе ширины внешнего контейнера, который встроен, что позволяет браузеру автоматически определять размер видео или контента и может масштабироваться на различных устройствах.
Если вы хотите, чтобы окончательный стиль соответствовал другим свойствам, вы также можете явно использовать полученный класс.
Код заключается в следующем:
<div> <iframe src = "..."> </iframe> </div> <div> <iframe src = "..."> </iframe> </div>
Давайте посмотрим на то, что означают ulced-responsive-16by9 и inced-responsive-4by3 соответственно.
Давайте посмотрим на консоли:
.embed-responsive-4by3 {--- 4 представляет горизонтальный, 3 представляет вертикальный, то есть соотношение масштабирования, то есть шкалу 4: 3, подкладки: 75%;} .. Embed-Responsive-16by9 {Padding-Bottom: 56,25%;}Сохраните соотношение сторон, если ширина рассчитывается на 100%, она составляет 100% * 3/4 = 75%. В настоящее время установите соотношение сторон, установив его накладку. Когда вы приближаетесь к браузеру,
Наконец, сохраните это соотношение масштабирования для масштабирования.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.