2025年Bootstrap中CSS组件总结（上）

大家好，我是讯享网，很高兴认识大家。

正确使用CSS组件

因为Bootstrap使用的某些HTML和CSS需要的文档类型为HTML5 doctype，所以要创建html5文档，以确保CSS组件能够正确使用。然后在<head>里引入jquery.js、bootstrap.js、bootstrap.css文件。接下来总结一下Bootstrap的一些常用组件及其使用方法：

一、下拉菜单

定义：下拉菜单组件必须包含在dropdown类容器中，该容器包括下拉菜单的触发元素和下拉菜单的内容，下拉菜单内容必须包含在dropdown-menu容器中。

基本结构：

<div class="dropdown"> <a href="#" data-toggle="dropdown">触发元素<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div>

讯享网

class="dropdown"：声明下拉菜单组件；

data-toggle="dropdown"：激活下拉菜单；

class="dropdown-menu"：定义下拉菜单内容（作为下拉菜单标准结构，一般建议使用列表结构，并为每个列表定义超链接）；

class="caret"：定义下三角；

注意：

为.dropdown-menu添加pull-left或pull-right可以让菜单项实现左对齐或右对齐
为li添加disabled类可以禁用菜单项中的链接
在dropdown-menu容器中添加<li class="divider“></li>标签，即可为下拉菜单插入一条分隔线
在dropdown-menu容器中添加<li class="dropdown-header“></li>标签，即可为下拉菜单定义分组标题

二、按钮组

1、定义按钮组

定义：使用btn-group类和一系列的<a>或<button>标签，可以生成一个按钮组或者按钮工具条。

基本结构：

讯享网<div class="btn-group"> <p class="btn btn-info">按钮1</p> <a class="btn btn-info">按钮2</a> <li class="btn btn-info">按钮3</li> <span class="btn btn-info">按钮4</span> </div>

注意：

在单一按钮组里不要混用<a>和<button>标签，仅使用其中一个；
同一按钮组最好使用单色；
使用btn-group-vertical类可以设计垂直分布的按钮组；
使用btn-group-justified可以设计按钮组两端对齐排列，让一组按钮拉长为相同的尺寸，适应父元素的宽度（不能应用于button标签）；
给btn-group添加btn-group-lg、btn-group-sm、btn-group-xs可以设计整个按钮组大小，而不是给其中的每个按钮应用大小；

2、定义按钮导航条

定义：将多个按钮组包含在一个btn-toolbar类中，可以定义按钮工具条。

基本结构：

<div class="btn-toolbar"> <div class="btn-group"> <i class="btn btn-default"><i class="glyphicon glyphicon-fast-backward"></i></i> <i class="btn btn-default"><i class="glyphicon glyphicon-fast-backward"></i></i> </div> <div class="btn-group"> <i class="btn btn-default">1</i> <i class="btn btn-default">2</i> <i class="btn btn-default">...</i> <i class="btn btn-default">3</i> <i class="btn btn-default">4</i> </div> <div class="btn-group"> <i class="btn btn-default"><i class="glyphicon glyphicon-fast-forward"></i></i> <i class="btn btn-default"><i class="glyphicon glyphicon-fast-forward"></i></i> </div> </div>

注意：按钮btn必须放在btn-group中，然后才能放入btn-toolbar中，这样才能保证正确渲染整个按钮导航条。

三、按钮式下拉菜单

定义：把按钮组和下拉菜单捆绑起来，可以形成按钮式下拉菜单。

基本结构：

讯享网<div class="btn-group"> <a href="#" class="btn btn-default" data-toggle="dropdown">按钮式下拉菜单<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> <a href="#" class="btn btn-default">按钮</a> </div>

注意：只需为按钮式下拉菜单包含框添加dropup类即可实现向上向上弹出式菜单，也就是说为dropdown-menu的直接父节点添加dropup类

四、导航

定义：以列表结构为基础进行导航组件设计，并使用nav类定义基础的导航效果，导航组件包括标签页、pills、导航列表标签。

1、标签页

定义：为导航结构添加nav-tabs类即可设计标签页

基本结构：

<ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> <li><a href="#">导航标题2</a></li> </ul>

2、pills胶囊导航

定义：为导航结构添加nav-pills类即可设计胶囊导航。

基本结构：

讯享网<ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> <li><a href="#">导航标题2</a></li> </ul>

注意：

在导航结构中，使用pull-left和pull-right可以左对齐或右对齐导航链接；
在大于768px的屏幕上使用nav-justified类可以设计标签页和胶囊导航呈现同等宽度；在小屏幕上呈现堆叠样式；
在导航项上使用disabled类可以定义不可用状态的样式效果（不能控制点击行为）；
在导航结构中，使用nav-stacked类可以设计堆叠样式；

3、导航绑定下拉菜单

基本结构：

<ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">微课</a> <li class="dropdown"> <a href="#" data-toggle="dropdown">微博<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">退出</a></li> </ul> </li> </ul>

4、激活标签页

定义：即让标签页每个tab项能自由切换，并能控制tab项对应内容框的显示与隐藏。

基本结构：

讯享网<div> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">首页</a></li> <li><a href="#tab2" data-toggle="tab">微客</a></li> <li><a href="#tab3" data-toggle="tab">微博</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1">首页内容框</div> <div class="tab-pane" id="tab2">微客内容框</div> <div class="tab-pane" id="tab3">微博内容框</div> </div> </div>

class="tab-content"：定义包含框为tab标签页的内容显示框；

class="tab-pane"：为内容框中的每个子内容显示框添加tab-pane类；

data-toggle="tab"：为每个标签页超链接添加该属性，激活标签页交互行为；

为每个内容框定义id值，并在标签列表项中为每个超链接绑定锚链接；

五、导航条

定义：导航条是一条长条形区块，其中可以包含导航或按钮，用navbar类定义基础导航条包含框。

基础结构：

<div class="navbar navbar-default"> <a class="navbar-brand" href="#">网站名称</a> <ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航项1</a></li> <li><a href="#">导航项2</a></li> </ul> </div>

.navbar-default：定义导航条的背景样式；

.navbar-brand：定义项目名称；

1、包裹表单

定义：若在导航条中放置一个表单，需要为表单框添加navbar-form类样式，同时设置对齐方式（如navbar-left或navbar-right）。

基本结构：

讯享网<div class="navbar navbar-default"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="关键字"> </div> <button class="btn btn-default" type="submit">提交</button> </form> </div>

2、包裹下拉菜单

定义：在导航条中包裹下拉菜单，在下拉菜单的外包含框中添加navbar-nav类，以确保下拉菜单和导航条更好的融合。

基本结构：

<div class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">微博<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">退出</a></li> </ul> </li> <li><a href="#">微客</a></li> </ul> </div>

3、包裹按钮

定义：对于不包含在form中的按钮对象，应该给其加上navbar-btn类，以确保其在导航条中垂直居中。

基本结构：

讯享网<div class="navbar navbar-default"> <button type="button" class="btn btn-default navbar-btn">按钮</button> </div>

4、包裹文本

定义：当在导航条放置文本时，应把文本包裹在navbar-text类中，以便设置正确的行距和颜色，普通文本通常使用<p>标签。

基本结构：

<div class="navbar navbar-default"> <p class="navbar-text">普通段落文本</p> </div>

5、包裹链接

定义：当在导航条中放置链接时，应把链接包裹在navbar-link类中，以便设置正确的默认颜色和反色。

基本结构：

讯享网<div class="navbar navbar-default"> <p class="navbar-text">普通段落文本<a href="#" class="navbar-link"> 链接</a></p> </div>

注意：

为导航条外包含框添加navbar-fixed-top类，让导航条置顶显示；
为导航条外包含框添加navbar-fixed-bottom类，让导航条置底显示；
为导航条外包含框添加navbar-inverse类，可以设计反色效果的导航条；

6、设计响应式导航条

定义：能够根据窗口宽度自动调整导航条的显示状态。

基本结构：

<div class="navbar navbar-default navbar-static-top"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#a"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav collapse navbar-collapse" id="a"> <li class="active"><a href="#">首页</a></li> <li><a href="#">微博</a></li> <li><a href="#">微信</a></li> </ul> </div>

宽屏下效果：

窄屏下效果：

2025年Bootstrap中CSS组件总结（上）

正确使用CSS组件

一、下拉菜单

二、按钮组

1、定义按钮组

2、定义按钮导航条

三、按钮式下拉菜单

四、导航

1、标签页

2、pills胶囊导航

3、导航绑定下拉菜单

4、激活标签页

五、导航条

1、包裹表单

2、包裹下拉菜单

3、包裹按钮

4、包裹文本

5、包裹链接

6、设计响应式导航条

相关推荐