精华内容
下载资源
问答
  • bootstrap模板

    2016-09-25 23:34:35
    bootstrap模板
  • bootstrap 模板

    2020-08-15 14:22:34
    bootstrap 模板大全 包含3个模板 可以直接使用; 可以直接改css, js, html
  • Bootstrap模板

    2020-10-29 22:29:36
    个人常用的4个Bootstrap3后台管理模板,非常不错!
  • Bootstrap 模板

    2016-08-06 13:19:01
    BOOTSTRAP 黑色简约风格模板
  • Bootstrap模板 下载

    热门讨论 2017-05-22 14:52:33
    Bootstrap模板
  • BootStrap模板

    2019-04-10 22:47:00
    一、基础模板 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式,表示使用IE浏览器的最新模式--> <meta ...

    一、基础模板

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        
        <!--声明文档兼容模式,表示使用IE浏览器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值(理想宽度/可见宽度)-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- 引入Bootstrap核心样式文件 -->
        <link href="../../css/bootstrap.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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好,世界!</h1>
    
        <!-- 引入JQuery核心js文件 -->
        <script src="../../js/jquery-1.11.3.min.js"></script>
        <!-- 引入Bootstrap核心js文件 -->
        <script src="../../js/bootstrap.js"></script>
      </body>
    </html>
    

    1、viewport(视口)

    1.1、概念

    通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般 来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正 常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由 设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

     

    1.2、css中的1px并不等于设备中的1px

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css 中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理 像素是不同的。

    1.3、meta viewport属性

    meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。

    在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

    width

    设置layout viewport  的宽度,为一个正整数,或字符串"width-device"

    initial-scale

    设置页面的初始缩放值,为一个数字,可以带小数

    minimum-scale

    允许用户的最小缩放值,为一个数字,可以带小数

    maximum-scale

    允许用户的最大缩放值,为一个数字,可以带小数

    height

    设置layout viewport  的高度,这个属性对我们并不重要,很少使用

    user-scalable

    是否允许用户进行缩放,值为"no""yes", no 代表不允许,yes代表允许

    这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

    *红色字体的为最常使用的

    二、完整模板

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    	<head>
    		<meta charset="utf-8">
    		<!--声明文档兼容模式,表示使用IE浏览器的最新模式-->
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值<理想宽度/可见宽度>-->
    		<!--视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,会将页面缩放到设备这么大来展示-->	
    		<!--width 	设置layout viewport  的宽度,为一个正整数,或字符串"width-device"(表示采用设备的宽度)
    			initial-scale 	设置页面的初始缩放值,为一个数字,可以带小数
    			minimum-scale 	允许用户的最小缩放值,为一个数字,可以带小数
    			maximum-scale 	允许用户的最大缩放值,为一个数字,可以带小数
    			height 	设置layout viewport  的高度,这个属性对我们并不重要,很少使用
    			user-scalable 	是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
    			如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
    		-->
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    		<title>Bootstrap完整模板</title>
    
    		<!-- 引入Bootstrap核心样式文件 -->
    		<link href="../../css/bootstrap.min.css" rel="stylesheet">
    
    		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
          	<!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果,必须放置到web服务器中,暂时不必掌握 -->
          <!--[if lt IE 9]>
             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->
    	</head>
    
    	<body>
    		<!--正文从此处开始-->
    		<h1>你好,世界!</h1>
    
    		<!--前端开发建议:网站优化时,除了立即需要工作的js存放在head外,将大部分JS文件放在页面的末尾-->
    
    		<!-- 引入jQuery核心js文件,必须放置在bootStrap.js前面! -->
    		<script src="../../js/jquery-1.11.0.min.js"></script>
    		<!-- 引入BootStrap核心js文件 -->
    		<script src="../../js/bootstrap.min.js"></script>
    	</body>
    
    </html>
    

      

     

    转载于:https://www.cnblogs.com/sstw/p/10686754.html

    展开全文
  • 蛋糕食品网上店铺O2O在线商城bootstrap模板
  • 牙齿美容Bootstrap模板

    2020-08-24 00:54:14
    牙齿美容Bootstrap模板是一款牙科诊所HTML5网站模板下载。
  • 医药公司Bootstrap模板

    2020-08-23 21:36:27
    医药公司Bootstrap模板里面包含6个子页面,适合医学药品制作公司网站模板下载。
  • 绿色小清新宽屏bootstrap模板是一款绿色小清新宽屏响应式bootstrap模板下载。
  • 户外旅游bootstrap模板

    2019-11-23 06:51:13
    户外旅游bootstrap模板是一款大气简洁风格的旅行网站模板下载。
  • 培训教育类别Bootstrap模板是一款超棒免费的Bootstrap网站模板下载。
  • Zero响应式bootstrap模板

    2019-12-01 01:03:00
    Zero响应式bootstrap模板是一款橙色风格的bootstrap网站模板下载。
  • OA Bootstrap模板

    热门讨论 2014-09-10 09:43:49
    OA Bootstrap模板,好资源要多分享

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,647
精华内容 2,258
关键字:

bootstrap模板