Bootstrap CSS概览
HTML5文档类型(<!DOCTYPE html>)
Bootstrap前端框架使用了HTML5和CSS属性,为了让这些能正常工作,您需要使用HTML5文档类型(<!DOCTYPE html>),如果您在使用Bootstrap前端框架创建网页时没有使用HTML5文档类型时,您可能会面临浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,以致于您的代码不能通过 W3C 标准的验证。
移动设备优先
移动设备优先是Bootstrap是显著的特点,为了让Bootstrap开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head标签处加入以下代码:
<meta name="viewport" content="width=device-width,initial-scale=1" />
width属性控制设备的宽度,假如您的网站将被带有不同屏幕分辨率的设备浏览,那么将width属性设置为width=decive-width可以确保它能正确在不同的设备上显示 。
initial-scale=1确保网页加载时是按1:1的比例显示,不会进行缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 响应式图像
<img src="" class="img-responsive" alt="响应式图像"/>
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下面的代码中,可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。
设置 height:auto,相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
这一单元没有写好,下次补充。。
最新文章
- 安卓学习-- RecyclerView简单入门
- SQL2043N 与 linux的randomize_va_space特性
- Bootstrap_按钮工具栏
- centos设置服务开机启动
- Entity Framework 6.x Code Frist For Oracle 实践与注意点
- 提高PHP开发质量的36个方法(精品)
- [原创]PostgreSQL Plus Advince Server在 HA环境中一对多的Stream Replication配置(一)
- /var子目录
- (一)Eclipse 快捷键
- GUI对话框
- oracle数据库事务相关【weber出品必属精品】
- pcap文件格式解析
- linux_vim_最佳快捷键
- C# 读书笔记之类与结构体
- Windows环境下安装scikit-learn
- 通过SDK和API获取阿里云RDS的监控数据
- alfs学习笔记-安装和使用blfs工具
- Windows Community Toolkit 4.0 - DataGrid - Overview
- ASP.NET MVC和Web API中的Angular2 - 第1部分
- Vue -自定义指令&;钩子函数