BootStrap常用组件及响应式开发
2017-11-22 15:39
411 查看
BootStrap常用组件
PS:所有的代码必须写在<class="container/container-fluid">容器当中
常用组件包含内容:
- 字体图标
- 下拉菜单
- 按钮组
- 输入框俎
- 导航
- 分页
- 标签和徽章
- 页头
- 缩率图
- 进度条
进度条示例:
var $d1 = $("#d1"); var width = 0; var theID = setInterval(setValue, 200); function setValue() { if (width === 100) { clearInterval(theID); } else { width++; $d1.css("width", width+"%").text(width+"%"); } }
响应式开发
为什么要进行响应式开发?
随着移动设备的流行,网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发。
什么是响应式?
利用媒体查询,让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。
用到的技术:
CSS3@media查询
用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性:
- device-width, device-height 屏幕宽、高
- width,height 渲染窗口宽、高
- orientation 设备方向
- resolution 设备分辨率
语法:
@media mediatype and|not|only (media feature) { CSS-Code; }
不同的媒体使用不同的stylesheet
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
viewport
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
- width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
Bootstrap的栅格系统
- container
- row
- column
注意事项: 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
JavaScript插件
Bootstrap实例精选:
- 封面图
- Carousel
- 博客页面
- 控制台
- 登录页
- Offcanvas
课后习题:
- 后台管理页面(修改Dashbord)
- 常用组件练习
相关文章推荐
- Flume开发中常用组件source,channel,sink等配置
- linux c/c++ 后台开发常用组件之:高性能阻塞队列
- 借鉴bootstrap的方法,快速实现响应式开发
- 常用Android开发组件之图像类组件
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
- Bootstrap常用组件学习(整理)
- .NET平台常用的开发组件
- Bootstrap之辅助类样式,响应式工具和小图标组件
- 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具
- BootStrap 响应式嵌入组件
- android游戏开发中常用组件有哪些
- .net开发中常用的第三方组件
- Bootstrap Multiselect 常用组件实现代码
- iPhone开发【二十三】常用IOS开源组件【第1篇】
- 30组常用前端开发组件库,前端组件收集整理列表
- 7 个 Bootstrap 在线编辑器用于快速开发响应式网站
- iOS 开发一周速成 -- 常用第三组件
- [置顶] 使用BootStrap开发一个响应式的页面
- 使用Bootstrap 3开发响应式网站实践02,轮播
- Bootstrap响应式开发与开发实例