当前位置：首页 > news >正文

BootStrap4：组件

news 2025/8/2 22:19:40

一、按钮

1.1、普通按钮

Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
样式效果：
在这里插入图片描述

源代码：

<body class="container"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button>
</body>

1.2、轮廓按钮

.btn 在引用中，实现轮廓按钮可以用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。

样式效果：

在这里插入图片描述

源代码：

<body class="container"><button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-light">Light</button><button type="button" class="btn btn-outline-dark">Dark</button>
</body>

1.3、按钮组

1.3.1、水平按钮组

使用按钮组合，可以把一系列按钮编组在一行里，将一系列的 .btn 包裹在.btn-group内。

样式效果：

在这里插入图片描述

源代码：

<body class="container"><div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Left</button><button type="button" class="btn btn-secondary">Middle</button><button type="button" class="btn btn-secondary">Right</button></div>
</body>

1.3.2、垂直按钮组

添加.btn-group-vertical 将一组按钮垂直排列。

样式效果：
在这里插入图片描述

源代码：

<body class="container"><div class="btn-group-vertical" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Top</button><button type="button" class="btn btn-secondary">Middle</button><button type="button" class="btn btn-secondary">Bottom</button></div>
</body>

二、卡片

2.1、普通卡片

.card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

.card-body：可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它
.card-title和 <h*>组合：添加卡片标题
.card-link 与结合：可以方便添加平行的链接
.card-subtitle 和 <h*> 结合：可以添加副标题
.card-img-top：定义一张图片在卡片的顶部。

Ps：如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。

card-body效果
在这里插入图片描述

card-body源代码

<div class="card"> <div class="card-body"> This is some text within a card body. </div> 
</div>

card-title与card-link效果：
在这里插入图片描述

card-title与card-link源代码：

<body class="container"><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div></div>
</body>

card-img-top效果：
在这里插入图片描述

源代码：

<body class="container"><div class="card" style="width: 18rem;"><img class="card-img-top" src="..." alt="Card image cap"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make upthe bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div></div>
</body>

2.2、列表组卡片

样式效果：
在这里插入图片描述

源代码：

<body class="container"><div class="card" style="width: 18rem;"><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Vestibulum at eros</li></ul></div>
</body>

2.3、带页眉页脚的卡片

.card-header：页眉
.card-footer：页脚

样式效果：
在这里插入图片描述

源代码：

<body class="container"><div class="card"><div class="card-header"> Featured </div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p></div><div class="card-footer"><a href="#" class="btn btn-primary">Go somewhere</a></div></div>
</body>

三、表单组件

文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

3.1、复选框和单选按钮

.form-check：格式化复选框和单选框按钮
form-check-inline：强制水平布局

垂直布局样式效果：
在这里插入图片描述

垂直布局源代码：

<body class="container"><div class="form-check"><input class="form-check-input"  type="checkbox" value="" id="defaultCheck1"><label class="form-check-label"  for="defaultCheck1">Option one is this and that—be sure to include why it's great</label></div><div class="form-check"><input class="form-check-input"  type="checkbox" value="" id="defaultCheck2"><label class="form-check-label"  for="defaultCheck2">Option one is this and that—be sure to include why it's great</label></div>
</body>

水平布局样式：
在这里插入图片描述

水平布局源代码：

<body class="container"><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"><label class="form-check-label" for="inlineCheckbox1">拿铁</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"><label class="form-check-label" for="inlineCheckbox2">摩卡</label></div>
</body>

3.2、表单组

.form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，可以在<fieldset>、 <div>或任何其它元素中使用它。

样式效果：
在这里插入图片描述

源代码：

<body class="container"><div class="form-group"><label for="formGroupExampleInput">Example label</label><input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"></div><div class="form-group"><label for="formGroupExampleInput2">Another label</label><input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"></div>
</body>

3.3、内联式表单

使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。

效果：
在这里插入图片描述

源代码：

<form class="form-inline"> <label class="sr-only" for="inlineFormInputName2">Name</label><input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"><label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> ……
</form>

3.4、表单下方帮助提示文本

可以使用…form-text t创建表单中的块级帮助文本。

样式效果：
在这里插入图片描述

源代码：

<body class="container"><label for="inputPassword5">Password</label><input type="password" id="inputPassword5" class="form-control" aria-escribedby="passwordHelpBlock"><small id="passwordHelpBlock" class="form-text text-muted">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</body>

内联式效果：
在这里插入图片描述

源代码：

<body class="container">
<form class="form-inline"><div class="form-group"><label for="inputPassword6">Password</label><input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"><small id="passwordHelpInline" class="text-muted"> Must be 8-20 characters long.</small></div>
</form>
</body>

四、列表与导航

4.1、状态指示列表组

添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。

样式效果：
在这里插入图片描述

源代码：

<body class="container"><ul class="list-group"><li class="list-group-item active">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>
</body>

4.2、无边框的列表

加入.list-group-flush选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组

样式效果：
在这里插入图片描述

源代码：

<body class="container"><ul class="list-group list-group-flush"><li class="list-group-item  ">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>
</body>

4.3、通用导航

Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态

.justify-content-center：可以让导航水平居中显示
.justify-content-end：右对齐
.flex-column：导航垂直排列

水平排列样式效果：
在这里插入图片描述

水平排列源代码：

<body class="container"><ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>

垂直排列样式效果：
在这里插入图片描述

垂直排列源代码：

<body class="container"><ul class="nav flex-column"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>

4.4、选项卡样式导航

nav-tabs：选项卡样式导航

样式效果：
在这里插入图片描述

源代码：

<body class="container"><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>

4.5、胶囊样式导航

nav-pills：胶囊样式导航

样式效果：
在这里插入图片描述

源代码：

<body class="container"><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>

4.6、等比导航

使用.nav-fill会将 .nav-item按照比例分配空间

样式效果：
在这里插入图片描述

源代码：

<body class="container"><ul class="nav nav-pills nav-fill"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>

4.7、带标题的导航

.navbar-brand：为您的公司，产品或项目名称。
.justify-content-end ：设置导航在右侧

样式效果：
在这里插入图片描述

源代码：

<body class="container"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class=“container”><a class="navbar-brand" href="#">BEN的博客</a><div><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></nav>
</body>

样式效果：
在这里插入图片描述

源代码：

<body class="container"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">BEN的博客</a><div class="justify-content-end"><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></nav>
</body>

4.8、定位导航栏

. fixed-top：固定在顶部
. fixed-bottom：固定在底部

固定在顶部的样式效果：
在这里插入图片描述

固定在顶部的源代码：

<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">BEN的博客</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navList"><span class="navbar-toggler-icon"></span></button><div class="justify-content-end collapse navbar-collapse" id="navList" ><div class="justify-content-end collapse navbar-collapse"><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></div>
</nav>
</body>

固定在底部的样式：
在这里插入图片描述

固定在底部的源代码：

<body>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">BEN的博客</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navList"><span class="navbar-toggler-icon"></span></button><div class="justify-content-end collapse navbar-collapse" id="navList" ><div class="justify-content-end collapse navbar-collapse"><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></div>
</nav>
</body>