![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
riverrun_z
这个作者很懒,什么都没留下…
展开
-
[bootstrap]栅格布局与flex的区别以及栅格布局的响应式应用
栅格布局的特点以及与flex的区别HTML<body> <!-- 一行4个 --> <div class="container"> <div class="row"> <!-- 问题: 这样写会有一个问题,就是只要加一点外边距之类的\ 它就会有col块被挤到下一行 解决方法:利用方块自带天沟的特性原创 2022-04-25 11:45:56 · 966 阅读 · 0 评论 -
[bootstrap]文本居中居右居左/文本粗细/文本下划线应用
HTML<body> <div class="container"> <h1 class="text-light bg-danger text-md-center text-strat">文字部分</h1> <!-- fw指font-weight --> <p class="fw-bolder bg-danger">加粗体</p> <p clas原创 2022-04-25 09:58:58 · 2059 阅读 · 0 评论 -
[bootstrap]定位的应用
HTML<body> <div class="container"> <!-- 给子元素绝对定位 父元素相对定位 --> <div class="zdy_box position-relative"> <!-- top/botton/start/end 值:0%/50%/100% top-50 start-50 这个方式效果是让方块的原点居中原创 2022-04-24 22:24:08 · 641 阅读 · 0 评论 -
[bootstrap]左右浮动/清除浮动/md以下消失的响应式
HTML<body> <!-- 由于左右浮动导致高度坍台 要用clearfix清除父级的浮动 --> <div class="container bg-primary clearfix"> <!-- 让这两个各站一行的块左右浮动 --> <div class="zdy_h w-25 bg-danger float-start"></div> <!-- md以下的时候原创 2022-04-24 21:14:00 · 466 阅读 · 0 评论 -
bootstrap中display的响应式应用
HTML<body> <div class="container"> <div class="selfctrl"> <!-- 用display:block和宽度百分百消除img自带的白边 --> <img src="../img/p617533616.webp" alt="" class="d-block w-100" > </div> &原创 2022-04-24 20:37:53 · 178 阅读 · 0 评论 -
bootstrap中内外边距和响应式更改内外边距的应用
HTML<body> <div class="container bg-danger"> <!-- 有六个值 1-5和auto 值越大padding越大 --> <div class="p-3 bg-success ">给文字加内边距</div> <!-- 有六个值 1-5和auto 值越大margin越大 --> <div class="m-3 bg-pr原创 2022-04-24 19:13:50 · 1737 阅读 · 0 评论 -
bootstrap背景透明度/背景色渐变/宽高的应用
HTML<body> <div class="container rain-box bg-warning"> <!-- 这里的w-100指的是子级是父级的100% 只有25%/50%/75%/100%--> <!-- h-25/h-50/h-75/h-100指的是子元素是父元素的百分之几 使用h-25/75/50/100的前提是子元素的父元素必须要有高,没有高的话是没有效果的 但是由于h-2原创 2022-04-24 14:02:21 · 3408 阅读 · 0 评论 -
【无标题】
<body> <div class="container"> <!-- form-control的作用:加蓝边和蓝色阴影【变块/宽度变100%】 form-control的使用对象:表单类控件 form-lable 用来给标记标签添加margin-bottom=0.5rem的下外间距,加在label标签 --> <!-- label --> <label f原创 2022-04-24 13:14:37 · 35 阅读 · 0 评论 -
用bootstrap创建表格
<body> <!-- bootstrap的table类 table-primary 表格颜色也可以加在table/tr/thead/tbody/td table-strap条形纹 可以隔行变色,不受背景色影响 table-hover 鼠标悬停着重色 加在hover table-bordered 加边框 border-danger 加边框颜色 --> <原创 2022-04-24 10:35:14 · 3489 阅读 · 0 评论 -
bootstrap的标题和ul<li的应用
HTML<body> <div>div标题</div> <div class="h1 bg-success text-danger">H1</div> <div class="h2 bg-danger text-white-50">H2</div> <div class="h3 bg-danger text-white-50">H3</div> <div原创 2022-04-23 20:06:30 · 945 阅读 · 0 评论 -
bootstrap的简介和引入
简介什么是bootstrap:bootstrap是一个UI框架bootstrap的作用:可以快速搭建响应式网站怎么使用bootstrap:使用它提供的已经封装好的CSS样式,提前了解封装好的样式有什么功能,并按照它提供的文档应用就可以引入步骤点击下面网址下载bootstrap生产文件。bootstrap生产文件下载地址打开下载下来的文件,在项目文件里创建CSS文件夹,打开下载下来的bootstrap文件夹里的CSS文件夹,把里面的<bootstrap.css>文件拷贝到自己原创 2022-04-22 16:19:25 · 1635 阅读 · 1 评论