footer design im bootstrap machen?

Wie kann ich Layout dieses Typs entwerfen. Ich habe entworfen, aber irgendeine Art Problem tritt auf, wenn ich Entschließung meines Laptopinhalts ändere, geht in linke Seite. Ich bin neu im Bootstrap. Wie kann ich Layout dieses Typs entwerfen. Ich habe entworfen, aber irgendeine Art Problem tritt auf, wenn ich Entschließung meines Laptopinhalts ändere, geht in linke Seite. Ich bin neu im Bootstrap. Wie kann ich Layout dieses Typs entwerfen. Ich habe entworfen, aber irgendeine Art Problem tritt auf, wenn ich Entschließung meines Laptopinhalts ändere, geht in linke Seite. Ich bin neu im Bootstrap.footer design im bootstrap machen?

Dies ist die Fußzeile Layout:

Dieser Bootstrap-Code ist:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <!--External Css--> 
     <link href="css/style.css" rel="stylesheet"> 
    <!--vertical slide--> 


    </head> 
<body> 


    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-6"> 
       <div class="row flt">    
      <img src="images/envelope.png"> 
      <p>San Isidro, Lopez Jaena St.<br> 
       Jaro Iloilo City, Philippines 5000<br>  
       Tell: 0927-338-2289<br> 
       Email: jennpereira13(at)gmail.com</p> 
      <img src="images/envelope.png"> 
       <p>San Isidro, Lopez Jaena St.<br> 
       Jaro Iloilo City, Philippines 5000<br>  
       Tell: 0927-338-2289<br> 
       Email: jennpereira13(at)gmail.com</p> 
      </div> 
     <div class="row flm"> 
      <h3>Secured Payment Trough:</h3> 
      <hr> 
      <img src="images/paypal.png" alt="paypal"> 
      <img src="images/master-card.png" alt="master card"> 
      <img src="images/google-checkout.png" alt="google-checkout"> 
      <img src="images/maestro.png" alt="maestro"> 
      <img src="images/ebay.png" alt="ebay"> 
      <img src="images/discover.png" alt="discover"> 
      <img src="images/cirrus.png" alt="cirrus"> 
      <img src="images/2checkout.png" alt="2checkout"> 
      <img src="images/visa-electron.png" alt="visa electron"> 
      <img src="images/direct-debit.png" alt="direct debit"> 
     </div> 
     <div class="row flb"> 
      <h3>Disclaimer:</h3> 
      <hr> 
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 

      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
     </div> 
      </div> 
      <div class="col-lg-6"> 
       <div class="row footer-right"> 
       <h1>INCREASE YOUR<br> ENGERGY LEVEL WITH</h1><h1 class="yellow">CUP OF TEA <span>EVERY</span>DAY</h1> 
       <form role="form"> 
        <h1><b><img src="images/cup.png">TRY IT TODAY</b></h1> 
        <div class="form-group"> 
        <input type="text" class="form-control" id="name" placeholder="Your Name"> 
        </div> 
        <div class="form-group"> 
        <input type="email" class="form-control" id="email" placeholder="Your Email"> 
        </div>  
        <button type="submit" class="btn">Order Now</button> 
        <div class="row form-bot"> 
         <div class="col-sm-2 lock"><img src="images/lock.png" id="lock"></div> 
         <div class="col-sm-10 lock-info" ><p>Don’t worry your email infomation is safe with us.<br> We hate spam as much as you hate. </p></div> 
        </div> 
       </form> 
      </div> 
      </div> 
     </div> 
    </div> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Quelle

2016-04-21 Tausif Raut

Was haben Sie versucht? Bitte teilen Sie uns das relevante HTML/CSS/JS mit, damit wir Sie in die richtige Richtung führen können, da dies SO ist, nicht für Code-Schreibdienste – Simplicity

Ich möchte Layout wie gegebenes Bild erstellen –

Wie in meinem ursprünglichen Kommentar gesagt Teilen Sie bitte das entsprechende HTML/CSS/JS, das Sie zu diesem Zweck erstellt haben, damit wir Ihnen helfen können, IHREN Code zu verwenden. SO ist kein Code-Schreibdienst. – Simplicity

Es gibt keine großen Fehler in Ihrem Layout. Aber Sie haben das Layout nur für größere Desktop-Geräte ausgerichtet , wenn Sie die Änderungen an iPad und Mobile Ansichtsfenster reflektieren müssen Sie die Bootstrap-Klassen enthalten, um diese Ansichtsfenster als auch.

zum Beispiel.

<div class="col-lg-6"></div> <!--Targets only Large Desktop devices--> 
<div class="col-lg-6"></div>

Wenn Sie kleinere Geräte zielen müssen, müssen Sie wie so zusätzliche Bootstrap-Klassen erwähnen,

<div class="col-md-3 col-lg-6"></div> <!--Targets both Medium and Large Desktop devices--> 
<div class="col-md-9 col-lg-6"></div>

Das bedeutet, auf größere Desktop-Geräte, die beiden Säulen wir verwendet wird zu gleichen Teilen in zwei Teile geteilt werden 6 Spalten (6 + 6 = 12). Aber wenn sie auf mittleren Desktop-Geräten (Desktops 992px und Up) angezeigt werden, sind die gleichen zwei Spalten in 3 + 9 = 12 unterteilt. Nun können diese Werte offensichtlich entsprechend Ihrer Anforderung geändert werden.

Dies könnte Ihnen viel besser helfen.

von hier genommen - https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

Quelle

2016-04-21 09:59:57

footer design im bootstrap machen?

Antwort

Verwandte Themen