3.Bootstrap组件

最新推荐文章于 2024-07-24 23:00:08 发布

静待花开A

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.5k

点赞数 4

分类专栏： Bootstrap 文章标签： bootstrap 前端 javascript css

本文链接：https://blog.csdn.net/wxhua420701325/article/details/127508083

版权

一、小图标

图标icon是一个优秀网站不可缺少的一组元素，小图标的点缀可以使网站瞬间提升一个档次。Bootstrap提供了250多种小图标，给网页增加更多活力。

包括200个来自Glyphicon Halflings的字体图标GlyphiconsHalflings 一般不允许免费使用，但是他们的作者允许Bootstrap免费使用

1. 小图标
```
	搜索  <span class="glyphicon glyphicon-search"></span>
	主页  <span class="glyphicon glyphicon-home"></span>
```
项目中需要加入fonts文件夹，才能显示图标。

所有的icon图标都是以glyphicon- 开头的，因为这些小图标都是http://glyphicons.com/ 网站提供的，使用的时候必须同时使用两个样式，即以.glyphicon和 .glyphicon-*开头的样式。
使用图标注意点：

2. 小图标应用场景

二、下拉菜单

网页中经常出现上下文菜单或隐藏/显示菜单项，Bootstrap默认提供了通用的菜单显示效果，而且各种交互状态下的菜单展示需要和JavaScript的dropdown插件配合才能使用。

1. 基本下拉菜单

效果图：

代码：

	<div class="dropdown">
			<!-- 按钮 -->
			<button class="btn btn-primary" type="button" data-toggle="dropdown">
	    			Dropdown
	    			<span class="caret"></span>
	  	      </button>  
	                <!-- 菜单 -->
	  	      <ul class="dropdown-menu">
				    <li><a href="#">Action</a></li>
				    <li   class="disabled"><a href="#">Another action</a></li>
				    <li><a href="#">Something else here</a></li>
				    <li class="divider"></li>
				    <li><a href="#">Separated link</a></li>
			 </ul>
	</div>

说明：

1）下拉菜单包括按钮和下拉菜单。

2）它们被包裹在一个.dropdown的容器里。关键是 data-toggle="dropdown"，实现点击显示和隐藏，它是和JavaScript插件交接的接口，封装了单击按钮弹出下拉菜单项的功能。所以引入jQuery和Bootstrap.js。

3）.caret 实现按钮上的向下小三角。

4）下拉菜单项 必须包含在 dropdown-menu 容器中。

5）<li class="divider"></li> 分割线

6）dropdown换成 dropdown open 默认菜单是显示的。

2. 超链接下拉菜单

效果图：

代码：

	<div class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
				更多栏目
	               <span class="caret"></span>
	           </a>
	
			<ul  class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li class="disabled"><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
	</div>

3. 分离式下拉菜单

普通下拉菜单不管单击箭头还是按钮，都会触发事件，如果需要按钮和箭头分离的功能，怎么办？

效果：

代码：

<div class="btn-group">
	<button type="button" class="btn btn-danger">更多栏目</button>
	<button type="button" class="btn btn-danger dropdown-toggle" datatoggle="dropdown">
		    <span class="caret"></span>
	</button>
	<ul  class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li class="disabled"><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

btn-group 把两个按钮的空白去掉。data-toggle="dropdown"给向下三角事件。

三、输入框

1. 基本用法

输入框，文字和按钮，小icon组合一起使用（称为addon）。只需要在容器上应用.input-group样式，然后对需要在input前后显示的个性元素上应用.input-group-addon样式即可。

             <div class="input-group">
				  <span class="input-group-addon">@</span>
				  <input type="text" class="form-control" placeholder="Username