bootstrap公共样式(学习笔记)

最新推荐文章于 2024-08-28 13:33:06 发布

cat and cats

最新推荐文章于 2024-08-28 13:33:06 发布

阅读量870

点赞数 2

文章标签： bootstrap 学习 html

本文链接：https://blog.csdn.net/qq_56508310/article/details/124914106

版权

边框和颜色

一.边框样式

1.边框颜色

在这里插入图片描述

<img src="../img/a3.jpg" alt="" class="border border-danger">

使用.border 给元素增加相应的边框，默认是淡灰色；
.border-*，包含：primary、secondary、success、danger、warning
info、light、dark 和white；

2.缩略图样式 (在图片周围添加一圈灰色的边框)

在这里插入图片描述

<img src="../img/a3.jpg" alt="" class="border border-success img-thumbnail">

3.上下左右各边的边框

在这里插入图片描述

		<img src="../img/a3.jpg" alt="边框" class="border-success border">
        <img src="../img/a3.jpg" alt="边框" class="border-success border-top">
        <img src="../img/a3.jpg" alt="边框" class="border-success border-bottom">

消除四周边框

使用.border-0 消减四周的边框，或使用.border-*-0 消减某一边的边框；
全部:border border-0
顶部：border border-top-0
底部：border border-bottom-0
左：border border-left-0 ；右：border border-right-0

4.圆角

在这里插入图片描述

     <img src="../img/a3.jpg" alt="边框" class="border-success border rounded">
        <img src="../img/a3.jpg" alt="边框" class="border-success border-top rounded-top">
        <img src="../img/a3.jpg" alt="边框" class="border-success border-bottom rounded-bottom">
        <img src="../img/a3.jpg" alt="边框" class="border-danger border-left rounded-pill">
        <img src="../img/a3.jpg" alt="边框" class="border-success border-right rounded-circle">

使用.rounded-sm 和.rounded-lg 实现圆角半径大小；
如:
img src=“img/img2.png” alt=“圆角” class=“rounded-sm”
img src=“img/img2.png” alt=“圆角” class=“rounded-lg”

二.颜色样式

1.文本颜色

在这里插入图片描述

<span class="text-primary">text-primary</span>
<span class="text-secondary">text-secondary</span>
<span class="text-success">text-success</span>
<span class="text-danger">text-danger</span>
<span class="text-warning">text-warning</span>
<span class="text-info">text-info</span>
<span class="text-dark">text-dark</span>

<span class="text-body">text-body</span>
<span class="text-muted">text-muted</span>
<span class="text-light bg-dark">text-light bg-dark</span>
<span class="text-white bg-dark">text-white bg-dark</span>
<span class="text-black-50">text-black-50</span>
<span class="text-white-50 bg-dark">text-white-50 bg-dark</span>

2.悬停和焦点的超链接样式

在这里插入图片描述

<a href=# class="text-primary">Bootstrap</a>
<a href=# class="text-secondary">Bootstrap</a>
<a href=# class="text-success">Bootstrap</a>
<a href=# class="text-danger">Bootstrap</a>
<a href=# class="text-warning">Bootstrap</a>
<a href=# class="text-info">Bootstrap</a>
<a href=# class="text-dark">Bootstrap</a>
<a href=# class="text-body">Bootstrap(no)</a>
<a href=# class="text-muted">Bootstrap(no)</a>
<a href=# class="text-light bg-dark">Bootstrap</a>
<a href=# class="text-white bg-dark">Bootstrap(no)</a>
<a href=# class="text-black-50">Bootstrap</a>
<a href=# class="text-white-50 bg-dark">Bootstrap</a>

3.背景颜色

在这里插入图片描述

<div class="p-2 mb-2 bg-primary">p-2 mb-2 bg-primary</div>
<div class="p-2 mb-2 bg-secondary">p-2 mb-2 bg-secondary</div>
<div class="p-2 mb-2 bg-success">p-2 mb-2 bg-success</div>
<div class="p-2 mb-2 bg-danger">p-2 mb-2 bg-danger</div>
<div class="p-2 mb-2 bg-warning">p-2 mb-2 bg-warning</div>
<div class="p-2 mb-2 bg-info">mb-2 bg-info</div>
<div class="p-2 mb-2 bg-light">p-2 mb-2 bg-light</div>
<div class="p-2 mb-2 bg-dark">p-2 mb-2 bg-dark</div>
<div class="p-2 mb-2 bg-white">p-2 mb-2 bg-white</div>
<div class="p-2 mb-2 bg-transparent">p-2 mb-2 bg-transparent</div>

浮动

1.使用.float-left、.float-right、.float-none 实现浮动效果；

<style type="text/css">
   .c{
   width:200px;
   height:200px;
   }        
</style>

<div class="c float-left border border-success"></div>
<div class="c float-right border border-success"></div>

2.使用.clearfix 给浮动的区域的父元素添加，实现清理浮动的功能

<div class="clearfix">
   <div class="c float-left border border-success"></div>
   <div class="c float-right border border-success"></div>
</div>
<div class="c border border-warning">both</div>

3.使用.float-*-left 等来实现不同屏幕的浮动效果

<div class="c float-md-left border border-success">left</div>
<div class="c float-md-right border border-success">right</div>

4.使用.text-hide 来隐藏元素标签内容，但本身还存在保持SEO 优化；
<h1 class="text-hide">Bootstrap4</h1>

5.设置区域显示方式。使用.overflow-auto 溢出有滚动条和.overflow-hidden 溢出缩略

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

6.使用.visible 和.invisible 来设置内容可见或不可见

<div class="visible">visible</div>
<div class="invisible">invisible</div>

7.使用.align-*来设置内容文本的对齐方式；

<span class="align-baseline">baseline 基准</span>
<span class="align-text-top">text-top 文本顶部</span>
<span class="align-top">top 顶部</span>
<span class="align-middle">middle 垂直居中</span>
<span class="align-bottom">bottom 底部</span>
<span class="align-text-bottom">text-bottom 文本底部</span>

内外边距

1.使用.p-*来设置

在这里插入图片描述

 <span class="p-5">Bootstrap4.x</span>
        
 <span class="m-5">Bootstrap4.x</span>

2.边缘距离

使用.pt-*或mt-*设置边缘的距离，这里的t 可以是top；
其它的还有b(bottom)、l(left)、r(right)等；

如：

<span class="pt-5">Bootstrap4.x</span>
<span class="mt-5">Bootstrap4.x</span>

3.使用.w-*设置元素的长度

在这里插入图片描述

<div class="p-3 w-25 bg-info">25%</div>
<div class="p-3 w-50 bg-info">50%</div>
<div class="p-3 w-75 bg-info">75%</div>
<div class="p-3 w-100 bg-info">100%</div>
<div class="p-3 w-auto bg-info">auto</div>

4.使用.h-*设置元素的高度


        <div class="border border-success">
            <div class="p-3 h-25 bg-info d-inline-block">25%</div>
            <div class="p-3 h-50 bg-info d-inline-block">50%</div>
            <div class="p-3 h-75 bg-info d-inline-block">75%</div>
            <div class="p-3 h-100 bg-info d-inline-block">100%</div>
            <div class="p-3 h-auto bg-info d-inline-block">auto</div>
            </div>

5.max,vn,shadow

1.使用.mw-*和.mh-*设置max-width 和max-height；

在这里插入图片描述

<div class="p-3 mw-100 mh-100 bg-info">max-100%</div>

2.使用.vw-*和.vh-*设置相对于窗口的大小；

在这里插入图片描述

 <div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>

3.使用.shadow-*实现元素的阴影效果；

在这里插入图片描述

			<div class="shadow-none mb-5">Bootstrap4.x</div>
        <div class="shadow-sm mb-5">Bootstrap4.x</div>
        <div class="shadow mb-5">Bootstrap4.x</div>
        <div class="shadow-lg mb-5">Bootstrap4.x</div>

样式

使用.d-*来设置元素的display 模式，比如inline、block 等；
none、inline、inline-block、block、table、table-row
flex、inline-flex 这些常用的均为display 可以设置的模式；

<div class="p-2 bg-info d-inline">Bootstrap4.x</div>

2.通过.d-md-*中的md 设置响应式的媒体查询效果；
<div class="p-2 bg-info d-md-none">Bootstrap4.x</div>

3.使用.embed-responsive 实现嵌入响应式，比如iframe、embed等；
再使用.embed-responsive-16by9 实现响应式比例，还可以21:9，4:3，1:1；

<div class="embed-responsive embed-responsive-21by9">
<iframe src="http://www.baidu.com"></iframe>
</div>

在这里插入图片描述

4.使用.text-*设置文本的对齐方式，有left、center、right；
也可以设置.text-md-*实现响应式的媒体查询效果；
<div class="p-2 text-center">Bootstrap4.x</div>

5.使用.text-wrap 和.text-nowrap 实现文本溢出时是否换行；
<div class="p-2 text-nowrap text-center"style="width: 6rem;">Bootstrap 4.x</div>
使用.text-break 对于很长的字符串，且中间没有空格实现换行；
<div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>

6.使用.text-lowercase 设置小写，.text-uppercase 设置大写，以及
.text-capitalize 设置首字母大写；

<div class="p-2 text-lowercase">the bootstrap4.x</div>
<div class="p-2 text-uppercase">the bootstrap4.x</div>
<div class="p-2 text-capitalize">the bootstrap4.x</div>

在这里插入图片描述

使用.font-weight-bold 加粗、.font-weight-normal 正常、
.font-weight-light 纤细、.font-italic 倾斜；

<div class="p-2 font-weight-bold">Bootstrap4.x</div>
<div class="p-2 font-weight-normal">Bootstrap4.x</div>
<div class="p-2 font-weight-light">Bootstrap4.x</div>
<div class="p-2 font-italic">Bootstrap4.x</div>

8.使用.text-monospace 设置等宽字体；
<div class="p-2 text-monospace">Bootstrap 4.x</div>

9.使用.text-reset 实现字体颜色的重置；

<div class="text-muted">
Bootstrap 最新版本： <a href="#" class="text-reset">V4.3</a>
</div>

在这里插入图片描述

10.使用.text-decoration-none 删除超链接下划线；
<a href="#" class="text-decoration-none">V4.3</a>

cat and cats

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫