MathType

Уеб дизайн /примери, шаблони/

Двуколонен лейаут с заглавна част и футър 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
    crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Вмъкваме container-fluid, който ще стане широк колкото целия viewport на браузъра,
         който от своя страна е направен да бъде точно широк колкото прозореца на браузъра. -->
    <div class="container-fluid">
       <!-- В контейнерите се вмъкват редове -->
       <!-- Това е ред 1 на нашия лейаут -->
       <div class="row" style="background-color:yellow">
            <!-- Този ред има само една колона, която е широка колото целия контейнер (12/12-ти от него) -->
            <div class="col-md-12">
                <h2>Заглавие....</h2>
            </div>  
       </div>

       <!-- Това е ред 2 на нашия лейаут -->
       <div class="row">
            <!-- Това е колона 1 на ред 2. Ширина 3/12-ти -->
            <div class="col-md-3" style="background-color:red"> 
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
            </div>
            <!-- Това е колона 2 на ред 2. Ширина 3/12-ти -->
            <div class="col-md-9" style="background-color:blue">
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
                Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
            </div>
       </div>

       <!-- Това е ред 3 на нашия лейаут -->
       <div class="row">
            <!-- Този ред има само една колона, която е широка колото целия контейнер (12/12-ти от него) -->
            <div class="col-md-6"  style="background-color:magenta">
                <small>Contact info. Contact info. Contact info. 
                       Contact info. Contact info. Contact info. 
                       Contact info. Contact info. Contact info. 
                       Contact info. Contact info. Contact info. 
                       Contact info. Contact info. 
                </small>
            </div>
            <div class="col-md-6" style="background-color:pink">
            </div>
       </div>
    </div> 
  
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous">
    </script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
    integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
    crossorigin="anonymous">
    </script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
    integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
    crossorigin="anonymous">
    </script>
  </body>
</html>

Няма коментари:

Публикуване на коментар

Абонамент за: Публикации (Atom)