PLANTILLA BASICA BOOTSTRAP 4 Y FLEX BOX.(Menu horiz.y Login)


Mostramos una plantilla basica hecha con bootstrap 4 y flex-box con sus 3 estados basicos.




<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container1 align-items-center">
    <header class="row header text-center p-3 bg-info d-flex justify-content-center">
      <img src="logo.jpg" class="rounded2 mr-3" alt="ad"  width="52" height="52">
   
      <h1 class="ml-3"> BOOTSTRAP-FLEXBOX</h1>
    </header>
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav mr-auto text-center">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">Disabled</a>
          </div>
            <div class="navbar-nav mr-3" >
               <a class="nav-item nav-link" href="#">LOGIN</a>
            </div> 
        </div>
      </nav>

  </div>

  <div class="container">
          <div class="row">
      <div class="col-sm-8 text-center p-2">
              <div class="container">
                <div class="row">
                 <div class="col-md-6 text-center p-2">
                   <h1>COLUMNA 1</h1>
                  <img src="Download.jpg" class="rounded " alt="ad" width="100%" >
                  Der Konflikt um den Osten von der Ukraine dauert schon mehrere Jahre. Es gibt eigentlich eine Waffen-Ruhe. Aber trotzdem kämpfen die Aufständischen weiter gegen die Armee von der Regierung. Die Aufständischen wollen, dass das Kriegs-Gebiet nicht mehr zur Ukraine
                 </div>

                    <div class="col-md-6 text-center p-2">
                       <h1>COLUMNA 2</h1>
                      Der Konflikt um den Osten von der Ukraine dauert schon mehrere Jahre. Es gibt eigentlich eine Waffen-Ruhe. Aber trotzdem kämpfen die Aufständischen weiter gegen die Armee von der Regierung. Die Aufständischen wollen, dass das Kriegs-Gebiet nicht mehr zur Ukraine
                     </div>
                </div>
              </div>

        <h1>COLUMNA 3</h1>
        <img src="Download.jpg" class="rounded float-left" alt="anonymous">
        Die Aufständischen haben 73 Menschen freigelassen. Die Ukraine hat 233 Menschen freigelassen. Viele Gefangene waren Soldaten.

Der Austausch war schon lange geplant. Er steht im Vertrag von Minsk. Das ist ein Friedens-Vertrag. Minsk ist die Haupt-Stadt von dem Land Weiß-Russland. Dort haben Politiker über den Vertrag verhandelt.

Der Konflikt um den Osten von der Ukraine dauert schon mehrere Jahre. Es gibt eigentlich eine Waffen-Ruhe. Aber trotzdem kämpfen die Aufständischen weiter gegen die Armee von der Regierung. Die Aufständischen wollen, dass das Kriegs-Gebiet nicht mehr zur Ukraine gehört. Russland unterstützt die Aufständischen. Die Regierung von der Ukraine will aber verhindern, dass der Osten ein eigenes Land wird.
        One of three columns
      </div>
      <div class="col-sm-4 p-3">
         <h1>COLUMNA 4</h1>
        Die Aufständischen haben 73 Menschen freigelassen. Die Ukraine hat 233 Menschen freigelassen. Viele Gefangene waren Soldaten.

Der Austausch war schon lange geplant. Er steht im Vertrag von Minsk. Das ist ein Friedens-Vertrag. Minsk ist die Haupt-Stadt von dem Land Weiß-Russland. Dort haben Politiker über den Vertrag verhandelt.

Der Konflikt um den Osten von der Ukraine dauert schon mehrere Jahre. Es gibt eigentlich eine Waffen-Ruhe. Aber trotzdem kämpfen die Aufständischen weiter gegen die Armee von der Regierung. Die Aufständischen wollen, dass das Kriegs-Gebiet nicht mehr zur Ukraine gehört. Russland unterstützt die Aufständischen. Die Regierung von der Ukraine will aber verhindern, dass der Osten ein eigenes Land wird.
        One of three columns
      </div>
   
  </div>



  </div>

   <footer class="footer text-center p-2 bg-info">
      <P> (c) JOSE PEREZ</P>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>
</html>

Comentarios