【心得总结】Bootstrap模板及一点心得总结

【心得总结】Bootstrap模板及一点心得总结

使用Boot栅格布局体系,里面的内容自己定义

 

boot2主要针对pc端,对PCIE6-8兼容较好,但是Boot2每个栅格之间有很大的间隙,没法去除可能还没研究透

 

Boot3, 我主要研究了Boot3,boot3对不同宽度屏幕使用了不用的栅格类.col-lg-大屏   .col-md-中等屏  .col-sm-PAD屏幕  .col-xs-手机屏幕

但是我新发现一个问题,就是在IE8以下就算你引入了responsive.js仍然栅格体系调用的是手机最小屏幕的

解决方法以下几种方式

1、单独给IE8及以下写一种CSS引入

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
  <script src=”http://static.utan.com/theme/default/utan/js/common/html5.js”></script>
  <script src=”js/respond.min.js”></script>
  <link rel=”stylesheet” type=”text/css” href=”css/styleIE8.css” />
<![endif]–>

其实主要几点就是:

写个给定的宽度,如中度屏幕的宽度屏幕或者1000,

其二就是在小屏幕下的栅格体系不一样的话用固定布局调整

2、使用Boot2

总结:

我觉得PC和手机用一套好像不是很靠谱,首先PC端的图片很大很多等。。。不适用于手机端。用一套。。

解决方法是手机PC布局可以大致一样,但是单独引入一个CSS以及单独引入一个html做调整此html只写col-xs-一种

 

 

以下是模板,我的建议是栅格体系的paddingmargin值重置为0,自己在栅格体系里面加一个div来控制Marginpadding值
<!DOCTYPE html>
<html lang=”zh-CN”>

<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    <title>bootgulp</title>

    <meta name=”description” content=”Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript(或者 CoffeeScript )源码来实现的。”>
    <meta name=”keywords” content=”Gulp.js,Gulp,Node.js,Node,JavaScript,CoffeeScript,Grunt,Gruntjs,Stream,流,自动化,Make”>
    <meta name=”author” content=”gulp.js 中文网”>
    <link rel=”icon” href=”favicon.ico”>

    <!– Bootstrap core CSS –>
    <link rel=”stylesheet” href=”http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css”>
    <link rel=”stylesheet” href=”http://cdn.bootcss.com/highlight.js/8.4/styles/monokai_sublime.min.css”>

    <!– Custom styles for this template –>
    <link rel=”stylesheet” href=”css/style.css”>

    <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
    <!–[if lt IE 9]>
      <script src=”http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”></script>
      <script src=”http://cdn.bootcss.com/respond/1.4.2/respond.min.js”></script>
      <link rel=”stylesheet” type=”text/css” href=”css/iestyle.css” />
    <![endif]–>
    <style>
        [class*=”col-“],.container{

        padding-left:0;
        padding-right:0;
    }
    .row{

        margin-left:0;
        margin-right:0;
    }

    </style>
</head>

<body>
<div class=”container”>
    <div class=”sectionone”>
        <div class=”row”>
            <div class=”col-md-6″>
                <h2>易于使用</h2>
                <p>通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。</p>
            </div>
            <div class=”col-md-6″>
                <h2>构建快速</h2>
                <p>利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。</p>
            </div>
        </div>
    </div>
    <div class=”sectionfour”>
        <div class=”row”>
            <div class=”col-md-3″>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
            <div class=”col-md-3″>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
            <div class=”col-md-3″>呵呵呵呵呵额鹅鹅鹅呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</div>
            <div class=”col-md-3″>呵呵呵呵呵额鹅鹅鹅呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</div>
        </div>
    </div>
</div>
    <!– IE10 viewport hack for Surface/desktop Windows 8 bug –>
    <script src=”js/ie10-viewport-bug-workaround.js”></script>
    <script src=”http://cdn.bootcss.com/highlight.js/8.4/highlight.min.js”></script>
    <script src=”http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”></script>
    <script src=”http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
    <script src=”js/site.js”></script>
</body>
</html>

一般手机端用rem做适配。大屏中屏幕小屏幕用Boot,如果用boot3则 给IE8及以下写固定宽度调整样式,电脑端的界面可以不用写col-xs-则每行都会掉下来,掉下来后给每个栅格按比例给百分比宽以及浮动。这样兼容IE7也好点。因为如果写了最小栅格在PC  IE8可做调整,但是IE7就不好调整了

.container{width:1000px;margin:0 auto;}
.sectionone [class*=”col-“]{

    float:left;
    width:50%;
}
.sectionfour [class*=”col-“]{

    float:left;
    width:25%;
}

转载于:https://www.cnblogs.com/zhp404/articles/4752777.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109362.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 电商仓库erp软件_电商交易系统和订单系统

    电商仓库erp软件_电商交易系统和订单系统1、系统独立部署、永久使用,自行管理绑定和授权店铺账号,所有数据都保存在自己的数据库中,多账号使用不关联。2、支持前端的自定义开发和后端功能定制。3、零售、分销、批发、营销方式全面支持,支持兰亭、DX等批量发货、定期对账结算。4、ERP、商品、库存、订单、list售价、list库存实时同步。5、灵活的商品注册:支持多款式、组合品、商品图片6、将从平台下载的订单自动快速导入、自动派单、分配库存。7、具备每天300…

  • Postman下载与安装操作步骤【超详细】

    Postman下载与安装操作步骤【超详细】工欲善其事必先利其器,一套超详细清晰的下载安装postman教程,让小伙伴们轻轻松松安装好postman,快来试一试吧!!!

  • SSH实现远程控制

    SSH(SecureShell)是一种能够提供安全远程登录会话的协议,使用ssh可以在远程linux中执行命令。sshd服务提供两种安全验证的方法:(1)基于口令的安全验证:经过验证帐号与密码即

    2021年12月28日
  • c语言进销存系统设计代码,web版进销存系统 – WEB源码|源代码 – 源码中国[通俗易懂]

    c语言进销存系统设计代码,web版进销存系统 – WEB源码|源代码 – 源码中国[通俗易懂]压缩包:webjxc.rar列表mrEMS\DB_51aspx\db_CMS_Data.MDFmrEMS\DB_51aspx\db_CMS_Log.LDFmrEMS\EMS\001.icomrEMS\EMS\BaseClass\BaseInfo.csmrEMS\EMS\BaseClass\BaseInfo.cs.bakmrEMS\EMS\BaseClass\DataBase.csmrEMS\…

  • ES6 模板字符串用法

    ES6 模板字符串用法解决字符串拼接问题使用模板字符串,可以省去‘+’拼接的操作,反引号“之间的视为一个整体view:<pv-html=”getHtml()”></p>method:getHtml(){leth1=`<h1>这是一个h1元素内容</h1>`returnh1}结果:通过表达式拼接对象属性使用${}表达式可以直接拼接对象属性的值:letuser={

  • Samba服务器配置(什么情况下需要服务器)

    一、简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,SMB(ServerMessageBlock)服务器消息块  Samba最大的功能是可以用于Linux与windows系统直接的文件共享和打印共享,既可以用于Windows与linux之间的文件共享也可以用于linux与linux之间的资源共享  基于客户机/服务器的协议,因而一台S…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号