文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在bootstrap中进行页脚设计？

问如何在bootstrap中进行页脚设计？
EN

Stack Overflow用户

提问于 2016-04-21 14:58:45

回答 1查看 121关注 0票数 0

如何设计这种类型的布局。我已经设计好了，但是当我改变笔记本电脑的分辨率时，出现了一些问题。我是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>

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2016-04-21 17:59:57

你的布局没有什么大问题。但是您的布局仅针对较大的桌面设备，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)。但是在中型桌面设备(桌面992px及以上)上查看时，相同的两列被划分为3+9= 12。现在，这些值可以根据您的需求进行明显的更改。

这可能会对你有更大的帮助。

取自此处- https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36761953

复制

相似问题

问如何在bootstrap中进行页脚设计？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在bootstrap中进行页脚设计？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在bootstrap中进行页脚设计？
EN