首页 > 其他 > 详细

Bootstrap 学习笔记 一

时间:2014-03-25 20:17:03      阅读:544      评论:0      收藏:0      [点我收藏+]

Bootstrap是什么:

简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。

HTML5文档格式

<!DOCTYPE html>
<html lang=‘zh-cn‘>

</html>

Bootstarp是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

响应式图片

通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

Containers

.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width,用以匹配栅格系统。

注意,由于设置了padding 和 固定宽度,.container不能嵌套。

<div class="container">
  ...
</div>

 

 

 

本文参考:http://v3.bootcss.com/css/

Bootstrap 学习笔记 一,布布扣,bubuko.com

Bootstrap 学习笔记 一

原文:http://www.cnblogs.com/ElvinLong/p/3622814.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!