rounded 图片圆角
rounded-circle 椭圆角
img-thumbnail 缩略图效果（有边框）
float-left float-right 图片对齐方式
img-fluID 响应式图片
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>demo1</name="vIEwport" content="wIDth=device-wIDth,initial-scale=1,shrink-to-fit=no"link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/CSS/bootstrap.min.CSS"script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.Js"></script="https://cdn.staticfile.org/popper.Js/1.15.0/umd/popper.min.Js"="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/Js/bootstrap.min.Js"bodydiv class="jumbotron text-center"> h1>my first bootstrap pagep>i am learning bootstrapdiv> ="container-fluID"="row"> ="col-sm-12" style="background:lavender;"> img ="img/boot.jpg" class="rounded"="rounded-circle"="img-thumbnail"="float-right"="img-fluID"HTML>@H_502_131@
bootstrap4 Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
>@H_502_131@
没有圆角效果的全屏幕
="jumbotron jumbotron-fluID">@H_502_131@
bootstrap4 信息提示框
alert
alert-primary
alert-info
alert-warning
alert-success
alert-danger
alert-secondary
alert-light
alert-dark
="alert">提示啦="alert-primary"="alert-info"="alert-warning"="alert-success"="alert-danger"="alert-light"="alert-dark"="alert-secondary">@H_502_131@
提示框中添加链接，使用alert-link
a href="#"="alert-link">链接a>@H_502_131@
都是黑色的，有点丑
在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 和 data-dismiss="alert" 类来设置提示框的关闭 *** 作
="alert alert-info alert-dismissible"button type="button"="close" data-dismiss>×button> 这是提示信息，重要！ >@H_502_131@
× (×) 是 HTML 实体字符，来表示关闭 *** 作，而不是字母 "x"
fade show 设置提示框关闭时的淡入淡出效果
="alert alert-info alert-dismissible fade show">@H_502_131@
bootstrap4 按钮
="btn">btn="btn btn-primary"="btn btn-info"="btn btn-warning"="btn btn-success"="btn btn-danger"="btn btn-light"="btn btn-dark"="btn btn-link"="btn btn-secondary">@H_502_131@
按钮类可用于 <a>, <button>,或 <input> 元素上
input value="按钮"="submit"="提交按钮" role>链接按钮>@H_502_131@
按钮设置边框
="btn btn-outline-primary"="btn btn-outline-info"="btn btn-outline-success"="btn btn-outline-warning"="btn btn-outline-danger">@H_502_131@
@H_302_419@
按钮大小 btn-lg btn-sm
="btn btn-outline-primary btn-lg">lg btn="btn btn-outline-info btn-sm">sm btn>@H_502_131@
设置块级按钮
="btn btn-outline-success btn-block">btn block>@H_502_131@
激活和禁用的按钮
="btn btn-outline-warning active">active btn="btn btn-outline-danger" Disabled>Disabled btn>@H_502_131@
总结
以上是内存溢出为你收集整理的Bootstrap4 图像形状+Jumbotron+信息提示框+按钮全部内容，希望文章能够帮你解决Bootstrap4 图像形状+Jumbotron+信息提示框+按钮所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）