boostrap

简介

pink老师推荐文档网站:https://bootstrap.css88.com/,移动端优先,是通过浮动或者flex实现



安装

方法一:CDN文件引入(boostrap官网有)

CSS:https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css

JS:   https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js    同时还需要引入jq,因为是基于jq的

方法二:npm安装,具体百度


创建html骨架

使用

一、布局(栅格系统)

父容器类名:container,里面每一行用row类名包裹

boostrap实现每个盒子中间有间隔的方法:

每一列里面再套一个div来装内容,这个div宽度设置100%,然后div的父容器设置左右内边距就可以了

列嵌套

如果想要某一列中又分成X份,可以使用列嵌套,先写一个row行,里面的元素再分比例

列偏移——offset(移动)

offset实际上是给了外边距来实现移动(默认都是向右移动,因为都是从左开始)比如两个div一个要在左侧,一个在右侧,都是占3份,那右边的盒子就设置offset移动6份(12-(3+3)=6)就可以了

列排序——push(推)pull(拉)

想让两个元素排序调换,一个push往后推,一个pull往前拉,比如两个元素各占6份,左边的push-6,右边的pull-6就调换位置了


响应式工具——隐藏hidden&显示visible



其他功能请参考官方文档

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容