Блог

Главная - Вопросы по программированию - Как создать дизайн шаблона с помощью bootstrap 4?

Как создать дизайн шаблона с помощью bootstrap 4?

#html #css

#HTML #css

Вопрос:

Я хочу создать такой шаблон, используя bootstrap 4.

введите описание изображения здесь

Не могли бы вы, ребята, дать мне несколько советов, как сделать подобный шаблон, пожалуйста?

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
<div class="container-fluid text center">
    div class="row">
        <h3>Company Name</h3>
         <small>email,phone</small>
         <small>address:</small>
    </div>
   
</div>
</body>
</html>

Комментарии:

1. Ваш рисунок не настолько понятен, не могли бы вы, пожалуйста, опубликовать изображение дизайна, который вы хотите? (figma.com или canva.com и т.д.)

2. @Nikasmusicandgaming я обновил свою картинку/

Ответ №1:

Это то, что вы хотите сделать?

 <div class="container">
    <div class="row">
       <div class="col-12" style="border: 5px solid">
           <div class="col-4" style="float: left;">
               <img src="" alt=""> <!-- LOGO -->
              
           </div>
           <div class="col-4" style="float: left;">
               <ul style="list-style-type:none; text-align: center;">
                   <li><h1>Lorem, ipsum.</h1></li>
                   <li><p>Lorem, ipsum.</p></li>       <!-- Company, Address, Phone -->
                   <li><p>Lorem, ipsum.</p></li>
                   <li><p>Lorem, ipsum.</p></li>
                   
               </ul>
           </div>
           <div class="col-4" style="float: left;">
            <img src="" alt=""> <!-- IMAGE -->
           </div>
       </div>
       <div class="col-12 mt-1" style="border: 5px solid">
        <h3 style="float: left;">CODE:123</h3>
        <img src="" alt="" style="float: left;"> <!-- STATUS -->
    </div>
    <div class="col-12 mt-1" style="border: 5px solid;height: 200px;">
      
    </div>
    <div class="col-12 mt-1" style="border: 5px solid;height: 200px;">
      
    </div>
    </div>
   
</div>