bootstrap笔记

Posted 2020-06-21 五艺

响应式布局 为不同的终端提供适合的网页布局，给用户更好的体验。一个网站能够兼容多
个终端。适应不同分辨率屏幕。

移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">

initial-scale指令指定用户是否可以缩放视区，即缩放Web页面的视图。

用的是Normalize.css 重置样式库

栅格系统

行（row）”必须包含在 .container
通过“行（row）”在水平方向创建一组“列（column）
内容应当放置于“列（column）”内
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）
在第一列和最后一列设置负值margin 从而消除padding的印象
栅格系统中的列是通过指定1到12的值来表示其跨越的范围

排版的样式和列表的样式

table的优化

 

js插件

data 属性
html5shiv 解决ie支持HTML5
respond.min 支持媒体查询
respond.js是为让IE8支持media query属性, 需要引入respond.js，而response.js必须部
署在webserver域名下面，否则会出现跨域问题。
IE9以下浏览器兼容，需要引入respond.js

响应式设计的原则

移动优先

渐进增强

用js解决hack

如何实现响应式布局

1、css3 media Query

2、借助原生javascript

3、第三方开源框架

CSS3 Media Query 常见属性:
device-width，device-height--屏幕宽高（物理上的）
width，height--渲染窗口宽高（实际窗口宽高）
orientation 设备方向（横屏竖屏）
resolution 设备分辨率

<link type="text/css" rel="stylesheet" href="link.css" media="only screen and
(max-width: )"/>