Как сделать цветные коробки из bootstrap - PullRequest
Новая
       10

Как сделать цветные коробки из bootstrap

1 голос
/ 12 июля 2020

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

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Я хочу, чтобы текст располагался рядом с окном. Заранее спасибо

Ответы [ 3 ]

1 голос
/ 12 июля 2020

Ваша структура неверна. Вы можете разместить цвет рядом с текстом с тем же div.

Он должен выглядеть примерно так: 

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>


<div class="row"> <!-- Sometimes bootstrap override display -->
      <div class="col text-black">
       .bg-primary
      </div>
      <div class="col bg-primary">
       <div style="padding: 50px;"></div> <!-- For demonstration -->
      </div>
    </div>
1 голос
/ 12 июля 2020

Вы должны использовать два разных div / spans внутри div, если хотите получить поле с текстом рядом с ним. Итак, вы можете сделать это, используя сетку bootstrap следующим образом - 

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
  <div class="col-6 p-3 mb-2 bg-primary text-white"></div><span class="p-3 mb-2"> => .bg-primary</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-secondary text-white"></div><span class="p-3 mb-2"> => .bg-secondary</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-success text-white"></div><span class="p-3 mb-2"> => .bg-success</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-danger text-white"></div><span class="p-3 mb-2"> => .bg-danger</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-warning text-white"></div><span class="p-3 mb-2"> => .bg-warning</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-info text-white"></div><span class="p-3 mb-2"> => .bg-info</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-light text-white"></div><span class="p-3 mb-2"> => .bg-light</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-dark text-white"></div><span class="p-3 mb-2"> => .bg-dark</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-white text-white"></div><span class="p-3 mb-2"> => .bg-white</span>
</div>

Если вы хотите, чтобы блоки были квадратными, вы можете использовать следующий код - 

.row>* {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
  <div class="bg-primary text-white"></div><span> => .bg-primary</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-secondary text-white"></div><span> => .bg-secondary</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-success text-white"></div><span> => .bg-success</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-danger text-white"></div><span> => .bg-danger</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-warning text-white"></div><span> => .bg-warning</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-info text-white"></div><span> => .bg-info</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-light text-white"></div><span> => .bg-light</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-dark text-white"></div>
  <spa> => .bg-dark</spa>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-white text-white"></div><span> => .bg-white</span>
</div>

Подробнее о сетке bootstrap можно узнать здесь .

1 голос
/ 12 июля 2020

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

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row">
<div class="col-2 p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="col-2 p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="col-2 p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="col-2 p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="col-2 p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="col-2 p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="col-2 p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="col-2 p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="col-2 p-3 mb-2 bg-white text-dark">.bg-white</div>
</div>

А для использования блоков в виде квадратов используйте следующее - 

.row{
  display:flex;
  justify-content:center;
}

.row>*{
  display:flex;
  height:200px ;
  width:200px ;
  justify-content:center;
  align-items:center;
  border: 1px solid black;
  margin: 10px;
}

*{
  background-color: CornSilk;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
</div>

Если вы искали что-то другое, дайте мне знать. Надеюсь, это поможет!

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

Нет похожих вопросов

...