您的位置：首页 > Web前端 > BootStrap

Bootstrap环境及屏幕适配-（一）

2015-07-03 16:19 651 查看

一、环境搭建

1.目录结构



需要引用的文件有， jquery.js[/b]、bootstrap.min.js[/b] 和 bootstrap.min.css[/b] 文件，下面看下在线的文档Hello Word
<!DOCTYPE html>

<html>

<head>

<title>在线尝试 Bootstrap 实例</title>

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>


<h1>Hello, world!</h1>


</body>

</html>

[/code]结果:


2.屏幕适配
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name="viewport" content="width=device-width,initial-scale=1.0">

[/code]width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width,

initial-scale=1.0,

maximum-scale=1.0,

user-scalable=no">

[/code]

来自为知笔记(Wiz)
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航