bootstrap基础学习一篇
2016-02-26 13:39
513 查看
官网:http://www.bootcss.com/
这里,主要讲解bootstrap3。关于他的介绍就不用复述了。
1.示例
a.先要下载,对应版本的bootstrap文件。
b.<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
c.正确引用,css,js文件。
2.响应式图片
老版本:我们必须定义图片的width,height等。
我们现在看看 class=“img-responsive”的样式
3.容器(container)
看看class="container"的css样式
这里,主要讲解bootstrap3。关于他的介绍就不用复述了。
1.示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <title>bootstrap-1</title> <link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap-theme.css"> <link rel="stylesheet" href="../css/bootstrap-theme.min.css"> </head> <body> <h1>你好,世界!</h1> <script src="../js/bootstrap.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
a.先要下载,对应版本的bootstrap文件。
b.<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
c.正确引用,css,js文件。
2.响应式图片
<img src="../img/a.jpg" class="img-responsive" alt="响应式图像" />
老版本:我们必须定义图片的width,height等。
我们现在看看 class=“img-responsive”的样式
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
3.容器(container)
<div class="container"> ... </div>
看看class="container"的css样式
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
相关文章推荐
- 有了bootstrap,为什么还要做amaze ui
- bootstrapValidator 自定验证方法写法
- 50 个 Bootstrap 插件
- Bootstrap之轮播图
- wex5的组件简介
- bootstrap datepicker 在bootstrap modal中不显示问题
- bootstrap 字体图标
- 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构
- bootstrap 响应式工具
- bootstrap学习笔记
- bootstrap轮播 2016.02.25回顾
- 使用了最新的bootstrap框架,结果在IIS6上无法显示图标
- 初学bootstrap ---栅格系统
- Web前端学习笔记:Bootstrap框架
- bootstrapValidator不触发校验
- 常见的响应式表格
- bootstrap web前端框架
- bootstrap-datepicker限定可选时间范围
- bootstrap 头部 使得ios 系统 input 固定
- 【Bootstrap基础学习】05 Bootstrap学习总结