关于bootspart学习笔记,常用标签及作用

Bootstrap 是目前最流行的前端框架,所以这是必须要掌握的技术。

在网页的 head 之中添加 viewport meta 标签,

<meta name="viewport" content="width=device-width, initial-scale=1.0">
将width设置为 device-width  可以确保它能正确呈现在不同设备上, initial-scale=1.0  确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。通常情况下,

maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

但要根据自身情况使用。

Bootstrap的网格系统,默认最多12列,工作原理不细说,画个三个相等的列,下面代码也是网格结构的基本结构,举例子:

<div class = "container ">

<div class = "row">

<div class = "col-xs-4"></div>

<div class = "col-xs-4"></div>

<divclass = "col-xs-4"></div>

</div>

</div>



关于使用

class=“img-responsive” 使图像按比例缩放。


class=“container ” 页面内容容器,一般放在最外层


关于class="col-xx-xx" 的使用, 第一个xx,是根据适用设备的分辨率设置的 1、超小设备<768px 使用col-xs-xx 2、小型设备≥768px使用col-sm-xx px

3、中型设备≥992px 使用col-md-xx 4、大型设备≥1200px 使用col-lg-xx 最后一个xx则根据需要划分的列进行自定义,最小1,最大12。


class=" col-md-offset-* "     使列偏移,通过调整左外边距实现偏移,*代表偏移量,范围1-11.


.col-md-push-*和.col-md-pull-*      可通过这两个class进行顺序排列,其原理是col-md-push-*距离左边的距离调整,col-md-pull-*   距离右边的距离调整,

(即right : xx%;) 其中 * 范围是从 1 到 11。


未完待续。。。



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值