移动设备优先是 Bootstrap 3 的最显著的变化。

基础的页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉IE浏览器用最新的引擎-->

    <meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式布局-->

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /><!--bootstrap样式-->

    <title></title>

</head>

<body>

    <div class="container">

        <h1 class="page-header">主体</h1>

        <p>Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p>

    </div>

    <script src="Script/jquery-1.8.3.js"></script><!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边-->

    <script src="bootstrap/js/bootstrap.min.js"></script><!--Bootstrap 的所有 JavaScript 插件-->

</body>

</html>


viewport meta 标签堆移动设备友好~


*width=device-width  确保网站能够正确呈现在不同设备上。


*initial-scale=1  确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放.


*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">




响应式图像




<img src="..." class="img-responsive" alt="响应式图像">




css代码：




.img-responsive {

  display: block;

  height: auto;

  max-width: 100%;

}




* .img-responsive 类的图片水平居中，请使用 .center-block 类


媒体查询 （基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。）




@media (min-width: 768px) {

   .container {

      width: 750px;

}




Bootstrap 浏览器/设备支持


Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。


下表为 Bootstrap 支持最新版本的浏览器和平台：






 
Chrome
Firefox
IE
Opera
Safari




Android
YES
YES
不适用
不适用
不适用




iOS
YES
不适用
不适用
不适用
YES




Mac OS X
YES
YES
不适用
YES
YES




Windows
YES
YES
YES*
YES
不适用




												


											
Bootstrap3基础教程 01 概述的更多相关文章
	

    
								
  1. Java基础教程(1)--概述
		
    一.什么是Java语言   Java是于1996年由Sun公司发布的一种极富创造力的面向对象的程序设计语言.它不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java ...
    
		
    2. 
						
  2. Bootstrap3基础教程 02 网格布局
		
    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多列. 网页设计中的网格布局作用:组织内容,让网站易于浏览,并降低用户端 ...
    
		
    3. 
						
  3. ActiveMQ基础教程JMS概述
		
    什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消息 ...
    
		
    4. 
						
  4. GStreamer基础教程01 - Hello World
		
    摘要 在面对一个新的软件库时,第一步通常实现一个“hello world”程序,来了解库的用法.对于GStreamer,我们可以实现一个极简的播放器,来了解GStreamer的使用. 环境配置 为了快 ...
    
		
    5. 
						
  5. 【GStreamer开发】GStreamer基础教程01——Hello World
		
    目标 对于一个软件库来说,没有比在屏幕上打印出Hello World更近直观的第一印象了.因为我们是在和一个多媒体的framework打交道,所以我们准备播放一段视频来代替Hello World.不要 ...
    
		
    6. 
						
  6. Bootstrap3基础教程 03 导航栏
		
    Bootstrap导航栏 创建一个默认的导航栏的步骤如下: 1.向 <nav> 标签添加 class .navbar..navbar-default. 2.向上面的元素添加 role=&q ...
    
		
    7. 
						
  7. mysql基础教程(一)-----概述、安装、查询
		
    概述 好处 •实现数据持久化 •使用完整的管理系统统一管理,易于查询 概念 DB 数据库(database):存储数据的“仓库”.它保存了一系列有组织的数据. DBMS 数据库管理系统(Databas ...
    
		
    8. 
						
  8. GStreamer基础教程02 - 基本概念
		
    摘要 在 Gstreamer基础教程01 - Hello World中,我们介绍了如何快速的通过一个字符串创建一个简单的pipeline.为了能够更好的控制pipline中的element,我们需要单 ...
    
		
    9. 
						
  9. 【GStreamer开发】GStreamer基础教程10——GStreamer工具
		
    目标 GStreamer提供了一系列方便使用的工具.这篇教程里不牵涉任何代码,但还是会讲一些有用的内容: 如何在命令行下建立一个pipeline--完全不使用C 如何找出一个element的Capab ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 20175227张雪莹 2018-2019-2 《Java程序设计》第十周学习总结
			
    20175227张雪莹 2018-2019-2 <Java程序设计>第十周学习总结 教材学习内容总结 第十二章 Java多线程机制 进程与线程 线程是比进程更小的执行单位,一个进程在其执行 ...
    
			
    2. 
						
  2. 【软件工程】Alpha事后诸葛亮
			
    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 参考邹欣老师的问题模板进行总结思考 一.设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的 ...
    
			
    3. 
						
  3. IDEA Method definition shorthands are not supported by current JavaScript version
			
    sentinel-dashboard前端用到了AngularJS v1.4.8,在IDEA里修改js,触发js验证时有一些js文件会出现红色波浪线. 在代码行里鼠标一上去提示信息:Method def ...
    
			
    4. 
						
  4. DeepLearningBook（中文版）书PDF
			
    介绍深度学历基础理论.模型和应用.(738页). 第一部分 应用数学与机器学习基础,包括深度学习需要用到的线性代数.概率与信息论.数值计算.机器学习等内容. 第二部分 深度网络:现代实践,包括深度前馈 ...
    
			
    5. 
						
  5. 信息学竞赛一本通提高版AC题解—例题1.1活动安排
			
    书中代码有误.书中为sort(a+1,a+n+1,Cmp). // // Created by yuxi on 19-1-13. // /* * * <信息学竞赛一本通-提高版>全部AC解 ...
    
			
    6. 
						
  6. LC 781. Rabbits in Forest
			
    In a forest, each rabbit has some color. Some subset of rabbits (possibly all of them) tell you how  ...
    
			
    7. 
						
  7. Android：通过systrace进行性能分析
			
    一.Systrace 简介 Systrace 允许您在系统级别(如SurfaceFlinger.WindowManagerService等Framework部分关键模块.服务.View系统等)收集和检 ...
    
			
    8. 
						
  8. 加载大图片的OOM异常
			
    * 原因:系统分配给应用程序的堆内存 < 图片的大小* 解决方案:缩放图片显示* OOM:OutOfMemoryError * 图片的宽高 * 宽 2400 * 高 3200 * 手机屏幕的宽高 ...
    
			
    9. 
						
  9. Nginx URL重写（rewrite）配置及信息详解
			
    URL重写有利于网站首选域的确定,对于同一资源页面多条路径的301重定向有助于URL权重的集中 Nginx URL重写(rewrite)介绍 和apache等web服务软件一样,rewrite的组要功 ...
    
			
    10. 
						
  10. 小D课堂 - 新版本微服务springcloud+Docker教程_4-04 高级篇幅之服务间调用之负载均衡策略调整实战
			
    笔记 4.高级篇幅之服务间调用之负载均衡策略调整实战     简介:实战调整默认负载均衡策略实战 自定义负载均衡策略:http://cloud.spring.io/spring-cloud-stati ...
    
			
    11.