What is Bootstrap
• Bootstrap, based on HTML, CSS, JAVASCRIPT of the front frame (semi-finished). Its predefined set of CSS styles and jQuery code corresponding with the style, we only need to provide a fixed HTML structure, adding a fixed class style, you can complete to achieve the effect.
• Bootstrap jQuery basic work in, can be understood Bootstrap is a jQuery plug-ins.
• Bootstrap makes Web development faster and more elegant code is nice.
• Work by Twitter's designer Mark Otto and Jacob Thornton development.
• Bootstrap Basics are built using CSS style, advanced development requires the use of HTML5, CSS3, Less dynamic CSS language custom development, when JavaEE learning course "Basics."
• mobile developers more familiar with some of the domestic framework, such as WeX5 front-end open source frameworks, but also optimized for performance from source code based on Bootstrap
• Chinese official website: http: //www.bootcss.com/
https://baike.baidu.com/item/Bootstrap/8301528?fr=aladdin
What is a responsive layout
• responsive layout: a site compatible with a plurality of terminals (mobile phones, iPad, etc.), without having to make a special version for each terminal. This concept is to solve the mobile Internet browsing born.
• responsive layout can provide a more comfortable interface and better user experience for users of different terminals, and with the current popularity of large-screen mobile devices, with "trend" to describe is not an exaggeration. As more and more designers preclude the use of this technology, we not only see a lot of innovation, but also saw some shaped pattern.
• Bootstrap responsive layout is the most successful implementation for compatibility with different browsers preclude the use of jQuery, adapting to different terminals using CSS3 Media Query (media inquiries)
Download
Chinese official website address: HTTP: //cl.bootcss.eom/bootstrap-3.3.5.zip
GIT address: https: //github.eom/twbs/bootstrap/archive/v3.3.6.zip
Viewport concept
Popular speaking on mobile devices viewport is on the screen of the device can be used to show that an area of our website , in particular the point that the browser ( possibly a app in webview) used to display web pages that part of the area, but the viewport is not bound by the size of the visible area of the browser, it may be larger than the visible area of the browser, it may be less than the viewable area of the browser. By default, in general, on mobile devices viewport is larger than the viewable area of the browser, which is relatively small considering that the resolution of mobile devices with desktop computers, so in order to move normal display device on those sites as traditional desktop browser design, the browser on mobile devices to their default viewport set to 980px or 1024px (may be other values, this is determined by the device's own), but with the consequence is that the browser to horizontal scroll bar will appear, because the browser is the visual width of the area than this default viewport smaller widths. The map shows some of the default browser on the device viewport width.
css is 1px does not mean that the device 1px
In the css we generally use px as a unit, css in the desktop browser, a pixel often corresponds to a physical pixel computer screen, which may cause us an illusion that the pixel is the device css physical pixels. But the reality is not so, css just an abstract of the pixel units in different devices or in different environments, equipment 1px physical pixel represented css is different. In the web browser designed for the desktop, we do not need to care about this Jinjin, but on a mobile device, you must understand this point. In earlier mobile device, relatively low screen density, such as iphone3, its resolution is 320x480, on iphone3, a pixel css is indeed equal to one screen of physical pixels. Later, with the development of technology, the screen pixel density of mobile devices more and more, from the beginning iphone4, Apple has launched a so-called Retina screen, doubling the resolution into 640x960, but the screen size did not change, This means that on the same screen size, pixel has more than doubled, this time, a css pixel is equal to two physical pixels. Other brands of mobile devices is the truth. Andrews apparatus according to the example can be divided into screen density ldpi, mdpi, hdpi, xhdpi other different levels, the resolution is varied, the number of physical screen pixels on a pixel css Android device equivalent, or different types of equipment, not a conclusion.
Another factor can also cause changes in the css px, that is, the user zooms. For example, when the user double page magnification, then the physical pixel represents the css 1px also doubled; otherwise narrow the double page, physical pixel represents the css 1px will be reduced doubled.
The use of meta tags viewport controls
We in the development of the site for mobile devices, one of the most common action is to copy the following things to our head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The meta The tag is to allow the current viewport width equal to the width of the device, while not allowing the user to manually zoom. Do not allow the user zooms different sites have different requirements, but let viewport width equal to the width of the device, this should be the results we all want, if you do not like this set, then it will use the aspect ratio of the screen the default viewport , that is to say there will be horizontal scroll bar.
meta viewport tag was introduced in its first safari browser by Apple, the purpose is to solve the problem viewport mobile devices. Later Andrews and major browser vendors have followed suit, introducing support for meta viewport, and also proved that this thing is still very useful.
Apple's specifications, Meta viewport has six attributes (for the time being those things is called a content and attribute values), as follows:
| width |
Set layout viewport width is a positive integer, or string "width-device" |
| initial-scale |
The initial value of the scaling of pages, a number that can be decimals |
| minimum-scale |
The minimum scaling value allows the user, a number that can be decimals |
| maximum-scale |
Allowing the user maximum scaling value for a number, it may be decimals |
| height |
设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable |
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
总结:
第一，必须设置 meta viewport 标签
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
第二、设置浏览器视口宽度为设备理想宽度
每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的 所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device- width这个特殊值就行了
<meta name="viewport" content="width=device-width, initial-scale=1">
BookStrap模板
<!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>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
https://v3.bootcss.com/css/#grid
