Bootstrap 组件_nb模组的 bootstrap-CSDN博客

本文链接：https://blog.csdn.net/wulinbanxia/article/details/72827559

本文详细介绍了Bootstrap的各种组件，包括字体图标、按钮组、下拉菜单、输入框、导航元素、导航栏、标签、徽章等，展示了如何创建和自定义这些组件，帮助开发者更好地理解和使用Bootstrap构建响应式网页。

摘要由CSDN通过智能技术生成

Bootstrap 组件

1.字体图标

Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。

可以使用<i>或<span>标签来配合使用，具体如下：

//使用小图标

//也可以结合按钮

</button>

注：可以对字体图标设置字体尺寸font-size、颜色color和应用文本阴影text-shadow。

2.按钮组

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式

</div>

//将多个按钮组整合起来便于管理

</div>

</div>

//设置按钮组大小

3.下拉菜单

.dropdown { position:relatie; }

.dropdown-menu { position:absolute; top:100%; ... }

.dropdown-toggle 出现点击效果

data-toggle="dropdown" JS选择器用

使用：保证下拉菜单与触发(button或nav)在同一父元素下。

3.1按钮的下拉菜单

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

//设置向上触发

//菜单项居右对齐，默认值是dropdown-menu-left

//设置菜单的标题，不要加超链接

//设置菜单的分割线

//设置菜单的禁用项

//让菜单默认显示

3.2按钮组的下拉菜单

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

注：没有class="dropdown"，因为.btn-group有定位{ position:relatie; }

//分裂式按钮下拉菜单

</button>

</ul>

</div>

3.3导航栏的下拉菜单

Java <span class="caret"></span>

</a>

<li><a href="#">Swing</a></li>

<li><a href="#">jMeter</a></li>

</ul>

</li>

</ul>

4.输入框

·向 <form> 元素添加 role="form"。

·把标签和控件放在一个带有 class .form-group 的<div> 中。这是获取最佳间距所必需的。

·向所有的文本元素 <input>、<textarea>和 <select>添加 class ="form-control" (焦点事件)

·<div class="input-group-addon">￥</div>或<span class="input-group-addon">￥</span>放置额外内容，二者是完全等效的。

4.1向input输入框添加文本或单复选框

//添加文本

<div class="input-group"> //为input添加边距

</div>

//添加复选框

</span>

</div>

4.2向input输入框添加按钮与下拉菜单

用 .input-group-btn代替 .input-group-addon

//添加按钮

</span>

</div>

//添加下拉菜单

<li> <a href="#">另一个功能</a> </li>

</ul>

</span>

</div>

4.3输入框组的大小

您可以通过向 .input-group 添加相对表单大小的class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

5.导航元素

5.1基本

对ul添加.nav .nav-tabs或.nav-pills

//标签式的导航菜单

<li class="active"><a href="#"