Bootstrap

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

posted @   迷路之本  阅读(2)  评论(0)  编辑  收藏  举报
相关博文：
· CSS笔记
· webpack笔记
· Bootstrap框架
· BootStrap
· 6.5 Bootstrap
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛