警告框
<style>body{padding-bottom: 5000px;}</style><body><div class="container"><div class="alert alert-primary">alert-primary</div><div class="alert alert-secondary">alert-secondary</div><div class="alert alert-success">alert-success</div><div class="alert alert-danger">alert-danger</div><div class="alert alert-warning">alert-warning</div><div class="alert alert-info">alert-info</div><div class="alert alert-light">alert-light</div><div class="alert alert-dark">alert-dark</div><div class="alert alert-primary">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-secondary">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-success">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-danger">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-warning">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-info">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-light">这是一个<a href="#" class="alert-link">链接</a></div><div class="alert alert-dark">这是一个<a href="#" class="alert-link">链接</a></div><!-- 在警告框里添加额外的内容 --><div class="alert alert-success"><h4 class="alert-heading">这是一个标题</h4>就是继承了父级的一个颜色可以不用给<p>这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容</p><hr><p>下面还可以添加一个说明</p></div><!-- 可以关闭的警告框 -->alert-dismissible这个是定位关闭按钮的位置<div class="alert alert-warning alert-dismissible fade show">fade show 就是渐隐渐现的效果这是一个可以关闭的警告框，但是需要想入jquery与bottstar.js<button class="close" data-dismiss='alert'>×</button>data-dismiss='alert';这个写好然后点击警告框的按钮是可以关闭的，这个是和js是进行交互的；这里的close是用来设置按钮身上的一些样式，添加了父级上的alert-dismissible这个和close结合使用,也就是先者给后者添加了一个absolute定位；如果不添加alert-dismissible就是那个close一个浮动的效果</div><div class="alert alert-danger fade show myAlert">通过按钮关闭警告框</div><button class="closeBtn">关闭警告框</button></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><script>//方法$('.closeBtn').click(function(){$('.myAlert').alert('close');});//事件 当点击关闭按钮的时候，然后就是会alert事件，就会出现小弹框，然后就点击关闭之后就优惠触发关闭的事件，我们就可以在关闭的事件里面写我们想要在关闭弹框之后的内容。$('.myAlert').on('close.bs.alert',function(){alert('close方法被调用了');});$('.myAlert').on('closed.bs.alert',function(){alert('警告框关闭了');});</script>
徽章
<style>
.first {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">徽章里面的字体大小取得是父级的元素
<div class="row first">
<span class="badge">徽章</span>
<span class="badge badge-primary">有颜色的徽章</span>
<span class="badge badge-secondary">有颜色的徽章</span>
<span class="badge badge-success">有颜色的徽章</span>
<span class="badge badge-danger">有颜色的徽章</span>
<span class="badge badge-warning">有颜色的徽章</span>
<span class="badge badge-info">有颜色的徽章</span>
<span class="badge badge-light">有颜色的徽章</span>
<span class="badge badge-dark">有颜色的徽章</span>
</div>
<div class="row mt-5">这里每一个徽章的前面就会继承父级的字体大小
<h1><span class="badge badge-primary">有颜色的徽章</span></h1>
<h2><span class="badge badge-secondary">有颜色的徽章</span></h2>
<h3><span class="badge badge-success">有颜色的徽章</span></h3>
<h4><span class="badge badge-danger">有颜色的徽章</span></h4>
<h5><span class="badge badge-warning">有颜色的徽章</span></h5>
<h6><span class="badge badge-info">有颜色的徽章</span></h6>
<h6><span class="badge badge-light">有颜色的徽章</span></h6>
<h6><span class="badge badge-dark">有颜色的徽章</span></h6>
</div>
<div class="row mt-5">
<button class="btn btn-primary">在按钮里使用徽章<span class="badge badge-light">5</span></button>
</div>
<div class="row mt-5 first">
<span class="badge">徽章</span>其实也就是给了大一点的圆角
<span class="badge badge-pill badge-primary">胶囊徽章</span>
<span class="badge badge-pill badge-secondary">胶囊徽章</span>
<span class="badge badge-pill badge-success">胶囊徽章</span>
<span class="badge badge-pill badge-danger">胶囊徽章</span>
<span class="badge badge-pill badge-warning">胶囊徽章</span>
<span class="badge badge-pill badge-info">胶囊徽章</span>
<span class="badge badge-pill badge-light">胶囊徽章</span>
<span class="badge badge-pill badge-dark">胶囊徽章</span>
</div>
<div class="row mt-5 first"> 这个是鼠标放上去的时候有些许变化 像hover
<a href="#" class="badge badge-pill badge-primary">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-secondary">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-success">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-danger">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-warning">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-info">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-light">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-dark">胶囊徽章</a>
</div>
</div>
</body>
面包屑
<body>
<div class="container">
<div class="row d-block">如果不添加b-block就是一个弹性布局
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">关于我们</a></li>
<li class="breadcrumb-item active">联系我们</li>
</ol>
</nav>
</div>
</div>
</body>
按钮
<div class="container">
<div class="row d-block mt-5">按钮颜色
<button class="btn btn-primary">按钮</button>
<button class="btn btn-secondary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-light">按钮</button>
<button class="btn btn-dark">按钮</button>
<button class="btn btn-link">按钮</button>
</div>
<!-- 其它类型的按钮 -->
<div class="row mt-5 d-block">
<a href="#" class="btn btn-primary">a标签按钮</a>
<button type="submit" class="btn btn-secondary">button标签按钮</button>
<input type="button" value="input标签" class="btn btn-success">
<input type="submit" value="input标签" class="btn btn-danger">
<input type="reset" value="input标签" class="btn btn-warning">
</div>
<!-- 带边框的按钮 -->
<div class="row d-block mt-5">没有背景色 但是加上了边框 然后hover的效果还是存在的
<button class="btn btn-outline-primary">按钮</button>
<button class="btn btn-outline-secondary">按钮</button>
<button class="btn btn-outline-success">按钮</button>
<button class="btn btn-outline-danger">按钮</button>
<button class="btn btn-outline-warning">按钮</button>
<button class="btn btn-outline-info">按钮</button>
<button class="btn btn-outline-light">按钮</button>
<button class="btn btn-outline-dark">按钮</button>
</div>
<!-- 大小不同的按钮 -->
<div class="row d-block mt-5">
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-secondary">正常按钮</button>
<button class="btn btn-success btn-sm">小按钮</button>
</div>
<!-- block类型的按钮 -->占满一行的按钮
<div class="row d-block mt-5">
<button class="btn btn-primary btn-lg btn-block">块级按钮</button>
<button class="btn btn-secondary btn-block">块级按钮</button>
</div>
<!-- 启用与停用状态的按钮 -->
<div class="row d-block mt-5">
<button class="btn btn-primary active">启用状态</button>
<a href="#" class="btn btn-secondary active">启用状态</a>
<button class="btn btn-primary" disabled>停用状态</button>
<a href="#" class="btn btn-secondary disabled">停用状态</a>
</div>
<!-- 切换按钮的active状态 -->
<div class="row d-block mt-5">
<button class="btn btn-primary active" data-toggle='button'>点击切换状态</button>
</div>
<!-- 选项卡的效果 -->
<div class="row mt-5">
btn-group 按钮组，变成了inline-block；就是把按钮挨在一起，他们之间的圆角也就爱合起来了，也看不见了融为了一题
btn-group-toggle就是把复选框的前面的样式去掉了
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" checked>Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options">Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options">Active
</label>
</div>
</div>
<!-- 切换按钮的active状态 -->
<div class="row d-block mt-5">
<button id="btn" class="btn btn-primary">点击切换状态</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$('#btn').button('toggle');当你的按钮是个激活的状态那么这条代码就等于不激活
如果你的按钮是不激活的状态 那么这条代码就是等于把这个按钮激活了
</script>
按钮组
<div class="container">
<div class="row mt-5 d-block">
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<div class="row mt-5 btn-toolbar">
btn-toolbar：按钮工具列把各个组可以放在一起
<div class="btn-group mr-2">
<button class="btn btn-success">1</button>
<button class="btn btn-success">2</button>
<button class="btn btn-success">3</button>
</div>
<div class="btn-group mr-2">
<button class="btn btn-success">5</button>
<button class="btn btn-success">6</button>
<button class="btn btn-success">7</button>
</div>
<div class="btn-group">
<button class="btn btn-success">9</button>
</div>
</div>
<div class="row btn-toolbar mt-5">
<div class="btn-group mr-2">
<button class="btn btn-secondary">1</button>
<button class="btn btn-secondary">2</button>
<button class="btn btn-secondary">3</button>
<button class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">为了让自己和input严丝合缝结合起来
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example">
</div>
</div>
<!-- 缩放 -->
<div class="row mt-5">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<div class="row mt-1">
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<div class="row mt-1 ">
<div class="btn-group btn-group-sm">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<!-- 下拉菜单 -->
<div class="row mt-5">
<div class="btn-group">
<button class="btn btn-danger">1</button>
<button class="btn btn-danger">2</button>
<div class="btn-group">下拉菜单
<button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button>
dropdown-toggle：这是下拉的小三角，需要通过js进行交互，就是用了data-toggle
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
</div>
</div>
</div>
</div>
<!-- 垂直排列 -->
<div class="row mt-5">
<div class="btn-group-vertical">
<button class="btn btn-warning">北京</button>
<button class="btn btn-warning">上海</button>
<button class="btn btn-warning">广州</button>
</div>
</div>
</div>
若有收获，就点个赞吧
0 人点赞
