Заставка

Программирование на старых и современных языках, а так-же дизайн

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Кнопки чII Bootstrap v5.2

Сообщений 1 страница 2 из 2

1

Кнопки чII:

Код:
<button type="button" class="btn btn-primary">Кнопка синия</button>
<button type="button" class="btn btn-secondary">Кнопка серая</button>
<button type="button" class="btn btn-success">Успешно</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-light">Светлая</button>
<button type="button" class="btn btn-dark">Тёмная</button>
<button type="button" class="btn btn-link">Ссылка</button>

Пример index.html:

Код:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.104.2">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <title>Пример с кнопками :: Bootstrap v5.2</title>
  </head>
  <body>
   <main class="container">
      <div class="container">
        <br><br>
        <button type="button" class="btn btn-primary">Кнопка 1</button>
        <button type="button" class="btn btn-secondary">Кнопка 2</button>
        <button type="button" class="btn btn-success">Успешно</button>
        <button type="button" class="btn btn-danger">Опасность</button>
        <button type="button" class="btn btn-warning">Предупреждение</button>
        <button type="button" class="btn btn-info">Информация</button>
        <button type="button" class="btn btn-light">Светлая</button>
        <button type="button" class="btn btn-dark">Тёмная</button>
        <button type="button" class="btn btn-link">Ссылка</button>
      </div>
    </main>
    <script src="./js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Результат:
https://i.ibb.co/t8YQ1Xg/bootstrap-5-button-01-01-04-03-02-2023-min.jpg

0

2

Большие и маленькие кнопки:
Большая кнопка:

Код:
<button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>

Маленькая кнопка:

Код:
<button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>

Полный пример index.html:

Код:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.104.2">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <title>Пример с кнопками :: Bootstrap v5.2</title>
  </head>
  <body>
   <main class="container">
      <div class="container">
        <br><br>
        <button type="button" class="btn btn-primary btn-lg">Большая синия кнопка</button>
        <button type="button" class="btn btn-secondary btn-lg">Большая серая кнопка</button>
        <br><br>
        <button type="button" class="btn btn-primary btn-sm">Маленькая синия кнопка</button>
        <button type="button" class="btn btn-secondary btn-sm">Маленькая серая кнопка</button>
      </div>
    </main>
    <script src="./js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Результат:
https://i.ibb.co/kHw4TqN/bootstrap-5-button-02-01-30-03-02-2023-min.jpg

0