响应式页面 (Responsive web page)2010 年提出, 是可以智能的根据用户使用的设备来选择排版布局和样式的页面的, 就是一套代码适用于多个设备, 特点是不会出现横向的滚动条. 响应式页面设计其实在实际的应用中并不是很广泛, 一般具有一定规模的网站都会有移动端, PC 端, pad 端等几套代码, 根据运行的设备来选择加载的代码. 但是响应式页面也存在一定的作用, 可以用作一些展示性的页面.
常规的网站, 大部分是 1200px, 缩小会出现横向滚动条, 布局, 样式全都不会改变.
响应式页面也存在了一些不足, 比如页面内容不宜过多, 只适合做一些展示类的网站不能有过于复杂的动画.
自适应页面就是有多套代码, 根据不同设备加载不同的代码.
Bootstrap 目前到第四版, 版本 2 主要做 PC 端已经逐步淘汰了, 主要用的是移动设备优先的 3,4 也是移动设备优先, 放弃了老版本的 IE, 看实际情况使用.
Bootstrap 共有五大块, 起步, 全局 CSS 样式, 组件, JavaScript 插件, 定制. 主要应用就是 classname 需要记住.
1. 响应式网站如何编写:
1) 必须声明 viewport(重点重点)
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2) 使用流式布局
float:left , display:inline-block
3) 文字, 图片, 容器... 使用相对尺寸 (70%,em,rem), 不要使用绝对尺寸 (px)
2.em 和 rem 的区别 (面试题)
em 是一个相对单位, 相对父元素
rem 是一个相对单位, 相对于页面的根元素, 即 html
4. 最重要的原则: 媒体查询技术 css3 中的内容 media query
写响应式的时候一般不需要去管高度, 高度让其自己去变化, 响应式肯定是不会有横向的滚动条, 纵向就不一定了
做响应式页面的代码的一般设置的步骤有:
1) 指定语言的类型 <HTML lang="zh-CN">
2) 设置 meta 标签, 为了兼容老版本的 IE <meta http-equiv="X-UA-Compatible" content="IE=edge">
3) 必须项, 设置视口 <meta name="viewport" content="width=device-width, initial-scale=1">
4) 引入 Bootstrap 的主文件 <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
5) 处理兼容性的 JS 文件, 用 cssHack 条件注释法
<!--[if lt IE 9]>
<script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
<![endif]-->
6) 引入 jQuery, 因为 Bootstrap 是依赖于 jQuery, 所以 jQuery 必须放在前面先加载, 最好使用 Bootstrap 自己带的 jQuery.
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
7) 引入 Bootstrap 中所需要用到的 JavaScript 插件.<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
模板是
- <!DOCTYPE HTML>
- <!-- 1. 指定语言的类型 -->
- <HTML lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <!-- 2. 设置 meta 标签, 为了兼容老版本的 IE -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <!-- 3. 必须项, 设置视口 -->
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Document</title>
- <!-- 4. 引入 bootstrap 的主文件 -->
- <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
- <!-- 5. 处理兼容性的 js 文件
- cssHack 条件注释法 -->
- <!--[if lt IE 9]>
- <script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
- <script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
- <![endif]-->
- </head>
- <body>
- <div class="container"> <!-- 最大的一个使用宽度为 970px -->
这个是 container 容器
- </div>
- <div class="container-fluid"> <!-- 使用宽度为 100% -->
这个是 container-fluid 容器
- </div>
- <!-- 6. 引入 jquery, 因为 bootstrap 是依赖于 jquery, 所以 jquery 必须放在前面先加载 -->
- <!-- 最好使用 bootstrap 自己带的 jquery -->
- <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
- <!-- 7. 引入 bootstrap 中所需要用到的 JavaScript 插件 -->
- <script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
- </body>
- </HTML>
2.Bootstrap 中提供了五种颜色, 分别是
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
3. 栅格系统
栅格系统是由 Bootstrap 提供的一套响应式, 移动设备优先的流式栅格系统, 随着屏幕尺寸把屏幕自动分成 12 列.
4.
超小屏幕 手机 (<768px)(总是水平排列) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面显示器 (≥992px) .col-md-
大屏幕 大桌面显示器 (≥1200px) .col-lg-
5.Bootstrap 提供的一些图标, Bootstrap 提供了二百多个图标, 可以用 span 标签来使用
- <h3 > 图标 </h3>
- <span class="glyphicon glyphicon-home"></span>
- <span class="glyphicon glyphicon-signal"></span>
- <span class="glyphicon glyphicon-cog"></span>
- <span class="glyphicon glyphicon-apple"></span>
- <span class="glyphicon glyphicon-trash"></span>
- <span class="glyphicon glyphicon-play-circle"></span>
- <span class="glyphicon glyphicon-headphones"></span>
6.Bootstrap 提供的一些按钮及其样式, 可以用 btn-lg,btn-sm 和 btn-xs 来调整按钮的大小.
- <h3 > 按钮 </h3>
- <button type="button" class="btn btn-default"> 按钮 </button>
- <button type="button" class="btn btn-primary">primary</button>
- <button type="button" class="btn btn-success">success</button>
- <button type="button" class="btn btn-info">info</button>
- <button type="button" class="btn btn-warning">warning</button>
- <button type="button" class="btn btn-danger">danger</button>
- <h3 > 按钮尺寸 </h3>
- <button type="button" class="btn btn-default"> 按钮 </button>
- <button type="button" class="btn btn-primary btn-lg">primary</button>
- <button type="button" class="btn btn-success btn-sm">success</button>
- <button type="button" class="btn btn-info btn-xs">info</button>
- <h3 > 把图标显示在按钮里 </h3>
- <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> 按钮 </button>
7. 下拉菜单
- <h3 > 下拉菜单 </h3>
- <div class="dropdown">
- <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
- Dropdown
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
- </ul>
- </div>
8. 输入框
- <h3 > 输入框 </h3>
- <div class="input-group">
- <span class="glyphicon glyphicon-user"></span>
- <input type="text" placeholder="username">
- </div>
- <div class="input-group">
- <span class="glyphicon glyphicon-lock"></span>
- <input type="password" placeholder="password">
- </div>
9. 导航栏
- <h3 > 导航栏 </h3>
- <nav class="navbar navbar-inverse navbar-fixed-top">
- <div id="navbar" class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="#contact">Contact</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
- <ul class="dropdown-menu" role="menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li class="divider"></li>
- <li class="dropdown-header">Nav header</li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!--/.nav-collapse -->
- </div>
- </nav>
10. 表单
- <h3 > 表单 </h3>
- <form>
- <div class="form-group">
- <span class="glyphicon glyphicon-user"></span>
- <input type="email" id="exampleInputEmail1" placeholder="Enter email">
- </div>
- <div class="form-group">
- <span class="glyphicon glyphicon-lock"></span>
- <input type="password" id="exampleInputPassword1" placeholder="Password">
- </div>
- <div class="form-group">
- <label for="exampleInputFile">File input</label>
- <input type="file" id="exampleInputFile">
- <p class="help-block">Example block-level help text here.</p>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Check me out
- </label>
- </div>
- <button type="submit" class="btn btn-default">Submit</button>
- </form>
11. 警告框
- <h3 > 警告框 </h3>
- <div class="alert alert-warning alert-dismissible" role="alert">
- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
- <strong>Warning!</strong> Better check yourself, you're not looking too good.
- </div>
- <div class="alert alert-success" role="alert">
- <a href="#" class="alert-link">success!</a>
- </div>
- <div class="alert alert-info" role="alert">
- <a href="#" class="alert-link">info!</a>
- </div>
- <div class="alert alert-warning" role="alert">
- <a href="#" class="alert-link">warning!</a>
- </div>
- <div class="alert alert-danger" role="alert">
- <a href="#" class="alert-link">danger!</a>
- </div>
12. 进度条
- <h3 > 进度条 </h3>
- <div class="progress">
- <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
- 70%
- </div>
- </div>
来源: http://www.bubuko.com/infodetail-3127845.html