новичок в использовании bootstrap и установке фона из 2 цветов - PullRequest
0 голосов
/ 05 мая 2020

Я новичок в изучении веб-разработки и использую bootstrap, у меня есть базовый макет c для моей веб-страницы, и я хочу установить цвет фона моего раздела div на 2 цвета в формировании строки и задаюсь вопросом как бы я go об этом.

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

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

здесь ваша цель может быть достигнута 2 способами.

Первый метод: Вы можете использовать bootstrap для этого, например, следующий фрагмент кода

  <div class="bg-success">
    This changes the background-color to green
</div>

Вы также можете использовать другие цвета, такие как основной для синего, опасность для красного эт c. Чтобы узнать больше о цветах, перейдите по этой ссылке https://getbootstrap.com/docs/4.0/utilities/colors/

Второй метод, который вы можете использовать: CSS

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

ЭТО ВСТРОЕННЫЙ СТИЛЬ:

    <div style="background-color: yellow;">
This div has a background-color of yellow
</div>

Вы также можете использовать таблицу стилей:

Это HTML

<div class="colors">
This div has an orange color
</div>

Это CSS

div.colors{
background-color: orange
}

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

0 голосов
/ 05 мая 2020

Вы должны быть немного более конкретными c и добавить код к своему вопросу.

Исходя из того, что я понял, это то, что вы ищете (оригинальный Codepen для другого Bootstrap решение): CodePen

.row {
  background: linear-gradient(90deg, green 50%, red 50%);
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

  <div class="container-fluid"> <!-- can also use .container -->
    <div class="row">
      <div class="col-12">
        <h1>Hello</h1>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

Вы также можете использовать CSS и назначить класс / идентификатор для div, а затем добавить background-color, как и для всего остального

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...