Href button: How do I create an HTML button that acts like a link?

Leave a Comment / Разное / By /

Ссылка на кнопку Bootstrap

Введение

Функции кнопок в сочетании с заключенными в них URL-адресами, возможно, являются одним из наиболее важных элементов, позволяющих пользователям взаимодействовать с веб-страницами, перемещаться и выполнять различные действия с одной веб-страницу на другую. Особенно в наши дни в мире мобильных устройств, когда как минимум половина веб-страниц просматривается с небольших устройств с сенсорным экраном, большие удобные прямоугольные области на экране дисплея, которые легко найти глазами и коснуться пальцем, имеют более важное значение. чем когда-либо. Именно поэтому новый фреймворк Bootstrap 4 развился, обеспечив еще более удобный опыт, отказавшись от очень маленького размера кнопки и добавив больше свободного пространства вокруг субтитров кнопки, чтобы сделать их еще более легкими и разборчивыми для работы. Небольшое прикосновение, делающее внешний вид нового примера кнопок Bootstrap более дружелюбным, — это в то же время чуть более закругленные углы, которые вместе с большим свободным пространством вокруг помогают сделать кнопки еще более приятными для глаз.

Семантические классы кнопок Bootstrap Href

Для этой версии, которые имеют такое же количество удивительных и простых в использовании семантических стилей, предоставляющих возможность передавать определение кнопкам, которые мы используем, просто добавляя специальный класс.

Количество семантических классов такое же, как и в последней версии, с другой стороны, с некоторыми улучшениями — редко используемые по умолчанию кнопки Bootstrap Href, обычно не имеющие смысла, были заменены гораздо более интуитивными и тонкий стиль вторичной кнопки, так что теперь семантические классы:

Primary .btn-primary — окрашен в голубой цвет;

Info .btn-info — чуть светлее и дружелюбнее синий;

Success .btn-success старый добрый зеленый;

Предупреждение .btn-warning окрашено в оранжевый цвет;

Danger .btn-danger становится красным;

И ссылка .btn-link , которая используется для стилизации кнопки как элемента URL по умолчанию;

Просто убедитесь, что вы сначала включили основные . btn класса непосредственно перед их применением.

Теги кнопок

Классы .btn созданы для использования с <кнопка> элемент. Вы также можете использовать эти классы для элементов или (хотя некоторые браузеры могут применять несколько иное отображение). При использовании классов кнопок в элементах , которые используются для выполнения функций на странице (таких как свертывание контента), вместо подключения к новым веб-страницам или разделам на существующей странице, этим веб-ссылкам должна быть предоставлена ​​роль

= «кнопка» , чтобы эффективно передать свое назначение вспомогательным технологиям, таким как программы чтения с экрана.

 Ссылка

<тип ввода="кнопка" значение="Ввод">

Это, однако, половина практических условий, с помощью которых вы можете улучшить свои кнопки в Bootstrap 4 благодаря тому, что новая версия фреймворка дополнительно дает нам бренд новый тонкий и привлекательный способ дизайна наших кнопок, сохраняющий семантику, которую мы только что получили — процесс контура.

Процесс контура

Сплошной фон без границ удаляется и заменяется контуром вместе с текстом соответствующей окраски. Уточнить классы действительно очень просто — просто добавьте

контур непосредственно перед назначением правильной семантики, например:

Outlined Primary кнопка становится .btn-outline-primary

Outlineed Secondary — .btn-outline -вторичный и так далее.

Важно отметить, что на самом деле не существует такой вещи, как выделенная кнопка гиперссылки, поэтому выделенных кнопок на самом деле шесть, а не семь.

Замените классы модификаторов по умолчанию на .btn-outline-* , чтобы избавиться от всех фоновых рисунков и цветов на кнопках любого типа.

Больше текста

Несмотря на то, что семантические классы кнопок и внешний вид действительно превосходны, очень важно помнить, что некоторые гости страницы, вероятно, не смогут просматривать их таким образом, если у вас есть какое-то более специальное сообщение, которое вы бы хотели. любите добавлять в свои кнопки — убедитесь, что наряду с эстетическими решениями вы также добавляете несколько слов, идентифицирующих это, для программ чтения с экрана, скрывающих их от веб-страницы с помощью . ср-только класс, так что наверняка у кого-то может сложиться впечатление, что вы ищете.

Размер кнопок

Напишите кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-block .

Активный режим

Кнопки могут казаться нажатыми (с более темным фоном, более темной рамкой и вложенной тенью), когда они активны. Нет абсолютно никакой необходимости добавлять класс к

Отключенные кнопки, использующие элемент , действуют немного иначе:

— -s не поддерживают атрибут disabled, так что вам нужно будет добавить в .disabled класс, чтобы он визуально казался отключенным.

— Некоторые ориентированные на будущее стили позволяют отключить все события указателя на якорных кнопках. В веб-браузерах, поддерживающих это свойство, вы вообще не заметите отключенную стрелку.

— Кнопки Disabled должны включать атрибут aria-disabled="true"

, чтобы указать состояние компонента вспомогательным технологиям.

 Основная ссылка
Ссылка

Предупреждение об эффективности ссылки

Кроме того, даже в браузерах, которые поддерживают события указателя: нет, навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки.

Компонент переключения

Дополнительные кнопки: флажок плюс радио

Отмеченное состояние для этих кнопок обновляется только при нажатии на кнопку.

Имейте в виду, что кнопки с предварительной отметкой требуют, чтобы вы вручную включили класс .active во вход .

 

  <метка>
     Флажок 1 (предварительно установлен)
  
  <метка>
     Флажок 2
  
  <метка>
     Флажок 3
  
 
 

  <метка>
    
 
 
 Радио 1 (предварительно выбрано)
  
  <метка>
     Радио 2
  
  <метка>
     Радио 3

Методы

$(). button('toggle') — переключает статус отправки. Придает кнопке вид, что она включена.

Заключительные мысли

В общем, в новой версии самого известного мобильного фреймворка кнопки продвинулись вперед, чтобы в конечном итоге стать более разборчивыми, гораздо более простыми и удобными для работы на экране меньшего размера и намного более эффективными в выразительные варианты с новым очерченным состоянием. Теперь все, что им нужно, это разместить на вашей следующей замечательной странице.

Посмотрите несколько обучающих видеороликов на YouTube, посвященных кнопкам Bootstrap

Связанные темы:

Кнопки Bootstrap формальные документы

W3schools:Учебник по кнопкам Bootstrap

Кнопка переключения Bootstrap

Свернуть · Bootstrap

Переключите видимость контента в вашем проекте с помощью нескольких классов и наших подключаемых модулей JavaScript.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменения класса:

  • .свернуть скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.show показывает содержимое

Можно использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется

data-toggle="collapse" .

Ссылка с href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.

 <р>

Несколько целей

<дел> <дел> <дел> <дел> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.