一、环境搭建

1.目录结构


需要引用的文件有， jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，下面看下在线的文档Hello Word

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.    <title>在线尝试 Bootstrap 实例</title>
    5. 

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

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

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

  8. </head>
    9. 

  9. <body>
    10. 

    11. 

  11.       <h1>Hello, world!</h1>
    12. 

    13. 

  13. </body>
    14. 

  14. </html>
结果:

2.屏幕适配

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

  2.                                      initial-scale=1.0, 
    3. 

  3.                                      maximum-scale=1.0, 
    4. 

  4.                                      user-scalable=no">





Bootstrap环境及屏幕适配-（一）的更多相关文章

  1. Android适配（屏幕适配、国际化适配）-转

    首先来说一下Android的屏幕适配: 关于Android屏幕的一些基本概念知识,自行充电..在此只介绍实际开发过程中的使用 1.说到Android的屏幕适配,首当其冲的就是图片的适配 图片适配遵循两 ...

  2. （转）android屏幕适配

    声明:eoe文章著作权属于作者,受法律保护,转载时请务必以超链接形式附带如下信息 原文作者: zhuangyujia 原文地址: http://my.eoe.cn/zhuangyujia/archiv ...

  3. Cocos2d-x——Cocos2d-x 屏幕适配新解【转载】

    Cocos2d-x 屏幕适配新解 本文出自[无间落叶](转载请保留出处):http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各 ...

  4. cocos2d-x 屏幕适配新解

    转自:http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 cocos2d-x(当前稳定版:2 ...

  5. 【转】iOS屏幕适配

    一.iOS屏幕适配发展历程 设备 适配技术 4及以前(iPad未出) 直接用代码计算 有了iPad autoResizing 有不同屏幕的iPhone后 autoLayout 有更多不同屏幕的iPho ...

  6. android屏幕适配详解

    android屏幕适配详解 官方地址:http://developer.android.com/guide/practices/screens_support.html 一.关于布局适配建议 1.不要 ...

  7. android 屏幕适配1 ——dimens.xml的适配

    1.如果是才开始做项目,已经有设计图:720*1280 1).默认values文件夹:1dp=1px values/dimens_x.xml: name: x1~x720   value:1px~72 ...

  8. Android 关于屏幕适配

    android屏幕适配详解 官方地址:http://developer.android.com/guide/practices/screens_support.html 转自:http://www.c ...

  9. Cocos2D-X屏幕适配新解

    ”   阅读器 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 Cocos2D-X(当前稳定版:2.0.4) 中,提供了相应的解决方案,以方便我们在设计游戏时,能够更好的适应不同的环境.   而 ...

随机推荐

  1. JSP基础语法--跳转指令 jsp:forward page

    带参数的跳转指令: <jsp:forward page="{路径|<%=表达式%>}"/> <jsp:param name="参数名称&qu ...

  2. invalid stream header: 31323334

    记录一下,都配置好了之后,用java客户端设置key-value,在服务器get没有问题,然后再服务器端设置一个key-value,java客户端获取出错 转载一下网上同样问题的描述,以及解决方案 严 ...

  3. ubuntu 设置vpn

    百度了资料 http://jingyan.baidu.com/article/fa4125aca7f1b628ad709271.html 1. 设置 VPN CONNECTION 2.configur ...

  4. Win32 SDK Combo Box

    如下图所示,显示了三种不同风格的Combo Box样式.当然,现在这样看不出第一种与第三种之间的区别,但是第二种与其他两种的区别是明显的,第二种的列表框始终是出于现实状态的. Combo Box: 一 ...

  5. Git本地项目上传 & SourceTree & GitHub 简单使用

    Git(分布式版本控制系统) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理 ...

  6. (转)Unity3D移动平台动态读取外部文件全解析

    Unity3D移动平台动态读取外部文件全解析 c#语言规范 阅读目录 前言: 假如我想在editor里动态读取文件 移动平台的资源路径问题 移动平台读取外部文件的方法 补充: 回到目录 前言: 一直有 ...

  7. cocos2d-x 3.10 显示Box2d 调试视图

    1.将cocos2d-x-3.10\tests\cpp-tests\Classes\Box2DTestBed目录下的GLES-Render.h和GLES-Render.cpp拷贝到当前项目的Class ...

  8. android 去掉listview之间的黑线

    方法1:listView.setDividerHeight(0);方法2:this.getListView().setDivider(null);方法3:android:divider="@ ...

  9. ListView random IndexOutOfBoundsException on Froyo

    http://stackoverflow.com/questions/8431342/listview-random-indexoutofboundsexception-on-froyo 今天遇到个 ...

  10. 十二月总结-and-2016年终总结

    回顾 今天是2016的最后一天了,所以今天来做一个年终总结是最好不过的了.各种期末考试随着而来,也就意味着在工大的第一个学期马上结束了.回顾一下这一年所获得或者失去的一些东西: 2月份在家焦虑的等待着 ...