如何在bootstrap中设置页脚设计？

我如何设计这种类型的布局。我已经设计，但当我改变我的笔记本电脑内容的分辨率在左侧时会发生某种问题。我是bootstrap的新手。我如何设计这种类型的布局。我已经设计，但当我改变我的笔记本电脑内容的分辨率在左侧时会发生某种问题。我是bootstrap的新手。我如何设计这种类型的布局。我已经设计，但当我改变我的笔记本电脑内容的分辨率在左侧时会发生某种问题。我是bootstrap的新手。如何在bootstrap中设置页脚设计？

这是页脚布局：

这是引导代码：

<!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>

来源

2016-04-21 Tausif Raut

你尝试过什么？请与我们分享相关的HTML/CSS/JS，这样我们可以引导您朝着正确的方向发展，因为这是SO的目的，而不是代码编写服务 – Simplicity

我想创建像给定图像的布局 –

就像在我的初始评论，请分享您已完成的相关HTML/CSS/JS，以便我们可以帮助您使用您的代码，因此不是代码编写服务。 – Simplicity

有一个在你的布局没有大的故障。但是，您只针对大型桌面设备的布局进行了定位col-lg-，如果您需要反映iPad和移动视口的更改，则需要包含引导程序类以定位这些视口。例如

。

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

如果你需要的目标更小的设备，你需要提及额外的自举类像这样，

<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>

这意味着更大的桌面设备，我们使用了两列将平均分成两6列（6 + 6 = 12）。但是，在中等桌面设备（Desktops 992px和Up）上查看时，同样的两列分为3 + 9 = 12。现在这些值可以根据您的要求明显改变。

这可能会帮助你好很多。

从这里拍摄 - https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

来源

2016-04-21 09:59:57

如何在bootstrap中设置页脚设计？

回答

相关问题