Как создать домашнюю страницу с помощью bootstrap 4? РЕШИТЬ - PullRequest
Новая
       0

Как создать домашнюю страницу с помощью bootstrap 4? РЕШИТЬ

0 голосов
/ 21 октября 2019

Я хочу создать адаптивный макет, такой как рисунок вниз, с начальной загрузкой 4 или другой поддержкой. (полный экран)

enter image description here

Это мой код: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <link href="~/Content/StyleSheet1.css" rel="stylesheet" />

</head>

<body>

    <div class="container">

        <div class="flex-row">
            <div class="col" style="background-color: blue;">Header</div>
        </div>

        <div class="flex-row">
            <div class="col-md-4" style="background-color: orange;">Left Nav</div>
            <div class="col" style="background-color: gray;">Content</div>
        </div>

        <div class="flex-row" style="background-color: green;">
            Footer
        </div>

    </div>

    @RenderBody()

</body>

</html>

.container 
{   height: 100%;
    width: 100%; }

Есть идеи для этого?

ps Я работаю с VS2019

В конце ... кому-то легче голосовать, чем предлагать решения !!

С уважением

РЕШЕНО !!!! : -)

Это код 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="~/Content/StyleSheet1.css" rel="stylesheet" />

</head>
<body>

    <div class="container-fluid">
        <!-- Control the column width, and how they should appear on different devices -->

        <div class="row" id="INTESTAZIONE">
            <div class="col-sm-12" >Header</div>
        </div>

        <div class="row" id="CORPO">
            <div class="col-sm-4" id="LATO_SX" >Left Navigation</div>
            <div class="col-sm-8" id="LATO_DX">Content</div>
        </div>

        <!-- Or let Bootstrap automatically handle the layout -->
        <div class="row" id="FINE">
            <div class="col-sm-12" >Footer</div>
        </div>

        <br>

    </div>

    @RenderBody()

</body>
</html>

И это таблица стилей 

#INTESTAZIONE {
    height: 15vh;
    background-color: deepskyblue;
}

#CORPO {
    height: 70vh;
}

#LATO_SX {
    background-color: orange;
}

#LATO_DX {
    background-color: grey;
}

#FINE {
    height: 15vh;
    background-color: lawngreen;
}

Для умных людей, которые проголосовали противЯ приветствую вас

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Попробуйте следующее, 

<div class="container-fluid">
    <div class="flex-row">
        <div class="col" style="background-color: #5B9BD5;">Header</div>
    </div>
    <div class="flex-row">
        <div class="col-md-4" style="background-color: #ED7D31;">Left Nav</div>
        <div class="col" style="background-color: #A5A5A5;">Content</div>
    </div>
    <div class="flex-row" style="background-color: #70AD47;">
        Footer
    </div>
</div>
0 голосов
/ 21 октября 2019

Я создал ваш дизайн с помощью начальной загрузки. Вы можете изменить высоту по своему усмотрению, но вы можете использовать этот макет для вашего проекта. Для получения дополнительной информации вы можете проверить: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

  
  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-12" style="background-color:yellow;height:200px">Header</div>
    </div>
    <br>
    <div class="row" style="height:450px">
      <div class="col-sm-4" style="background-color:yellow;">Left Navigation</div>
      <div class="col-sm-8" style="background-color:orange;">Content</div>
    </div>
    <br>
    <!-- Or let Bootstrap automatically handle the layout -->
    <div class="row">
      <div class="col-sm-12" style="background-color:yellow;height:225px">Footer</div>
    </div>
    <br>
    
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...