Bootstrap 学习笔记 一
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/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步