526互联

Bootstrap

发布时间 2023-06-06 09:16:07作者: 迷路之本

Bootstrap

功能极其强大的组件库

简介

image-20220510175944150

image-20220510180255650

image-20220510180324724bootstrap使用

创建文件夹结构

image-20220510180525906

创建html骨架结构，设置对IE浏览器的兼容性

image-20220510180818477

引入css样式文件

image-20220510181033717

image-20220510181321251

布局容器

咱就是说，牛！

container类-响应式开发

image-20220510183714864

container-fluid类-移动端开发

image-20220510184003973

栅格系统

容器用上面的布局容器类名container和container-fluid二选一！！！

然后定义行就用类名row包裹

定义列就用类名column包裹

image-20220510205412758

image-20220510205653139

注意！每列都有默认的padding15px，只要嵌套一个row就可以消除这个padding

image-20220510210312346

image-20220510210225469

列嵌套

注意！每列都有默认的padding15px，只要嵌套一个row就可以消除这个padding

image-20220510211510241

image-20220510211557399

列偏移

指定的盒子加上偏移类名。就可以向右偏移指定的份数

image-20220510220008314

列排序

通过设置类名实现列的排序

image-20220510220518227

其他特殊功能的类名

image-20220510220822958