快捷搜索:

bootstrap下拉菜单,详解Bootstrap下拉菜单组件

2019-11-13 09:57栏目:关于澳门金莎
TAG:

下拉菜单,按钮组,搜索框,导航,列表组,分页,标签徽记,缩略图,面板,进度条

@*基本下拉菜单与按钮下拉菜单的样式完全一致。不过,基本的下拉菜单使用<div >包裹,所有要换行。而按钮式下拉菜单<div >按钮组包裹,属于内联样式,不换行。
分割的按钮下拉菜单多了一个<button></button>作为默认选项,另一个button的内容是<span >。 而<li ></li>
导航元素中的下拉菜单用链接替换了按钮,但,data-toggle="dropdown"仍然保留。导航栏中下拉菜单利用了导航元素的下拉菜单。
*@

BootStrap学习(2)_下拉菜单&按钮组,bootstrap下拉菜单

详解Bootstrap下拉菜单组件,bootstrap下拉菜单

bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件:

less 对应的源码文件为:dropdowns.less

sass对应的源码文件为:_dropdowns.scss

在使用bootstrap矿建的下拉菜单时,必须调用bootstrap框架提供的bootstrap.js文件。对于未编译版本,可以在js下找到一个名为dropdown.js的文件,也可以调用这个文件。也可以调用压缩好的文件bootstrap.min.js

由于bootstrap组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jQuery.min.js

官网上的示例:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

详解:

1、使用一个名为dropdown的容器包裹了整个下拉菜单元素

<div class="dropdown"></div>

2、使用了<button>按钮作为父菜单,并且定义类名dropdown-toggle和自定义data-toggle属性,且值必须和最外容器类名一致

data-toggle=“dropdown”

3、下拉菜单项使用了一个ul列表,并且定义一个类名为dropdown-menu

<ul class="dropdown-menu"></ul>

bootstrap中的下拉菜单项默认是隐藏的,dropdown-menu设置了display:none

.dropdown-menu {

  position

: absolute;/*设置绝对定位,相对于父元素div.dropdown*/

  top

: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/

  left

: 0;

  z-index

: 1000;/*让下拉菜单项不被其他元素遮盖住*/

  display

: none;/*默认隐藏下拉菜单项*/

  float

: left;

  min-width

: 160px;

  padding

: 5px 0;

  margin

: 2px 0 0;

  font-size

: 14px;

  list-style

: none;

  background-color

: #fff;

  background-clip

: padding-box;

  border

: 1px solid #ccc;

  border

: 1px solid rgba(0, 0, 0, .15);

  border-radius

: 4px;

  -webkit-box-shadow

: 0 6px 12px rgba(0, 0, 0, .175);

  box-shadow

: 0 6px 12px rgba(0, 0, 0, .175); }

当用户点击父级菜单时,下拉菜单会显示出来,再次点击时下拉菜单将继续隐藏

详解:

通过js给父级容器div.dropdown添加或一处open来控制下拉菜单显示或隐藏,也就是说,默认情况,div.dropdown没有类名open,当用户第一次点击时,div.dropdown会添加类名open,当用户再次点击时,div.dropdown容器中的类名会被移除

.open > .dropdown-menu {

  display

: block; }

下拉分隔线

假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个li添加类名.dividerl来实现添加下拉分隔线的功能

.dropdown-menu .divider {

  height

: 1px;

  margin

: 9px 0;

  overflow

: hidden;

  background-color

: #e5e5e5; }

菜单标题

为了让这个分组更明显,还可以给每个组添加一个头部标题。

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

<li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

css样式:

.dropdown-header {

  display

: block;

  padding

: 3px 20px;

  font-size

: 12px;

  line-height

: 1.42857143;

  color

: #999; }

 

bootstrap框架中下拉菜单默认是左对齐,如果要下拉菜单相对于父级容器右对齐,可以在dropdown-menu上添加一个类.dropdown-menu-right,注意,从v3.1.0版本开始,不再建议对下拉菜单使用.pull-right类

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

  下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">

</ul> </div> .dropdown-menu-right {

  right

: 0;

  left

: auto; }

.dropdown

{

  float

: left; }

 

菜单项状态

下拉菜单的默认状态有悬浮状态:hover和焦点状态:focus

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

  color

: #262626;

  text-decoration

: none;

  background-color

: #f5f5f5; }

下拉菜单还有当前状态和禁用状态,这两种状态使用方法只需要在对应的菜单项上添加对应的类名

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

  下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

    ….

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

CSS:

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {

  color

: #fff;

  text-decoration

: none;

  background-color

: #428bca;

  outline

: 0; }

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 

{

  color

: #999; }

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 

{

  text-decoration

: none;

  cursor

: not-allowed;

  background-color

: transparent;

  background-image

: none;

  filter

: progid:DXImageTransform.Microsoft.gradient(enabled = false); }

 

bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的...

1. 下拉菜单

基本的下拉菜单 下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。

一、下拉菜单

  按钮和下拉选择都包裹在<div ></div>中

<div >
<button type="button" data-toggle="dropdown" id="dropdownMenu1">
主题
<span ></span>
</button>
<ul role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" >下拉菜单标题</li>
<li role="presentation">
<a role="menuitem">Java</a>
</li>
<li role="presentation">
<a role="menuitem">数据挖掘</a>
</li>
<li role="presentation" ></li>
<li role="presentation">
<a role="menuitem">分离的链接</a>
</li>
</ul>
</div>

1.基本下拉菜单

如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="dropdown">
   <button type="button" class="btn dropdown-toggle"  
      data-toggle="dropdown">
      二手家电

   </button>
   <ul class="dropdown-menu">
      <li>
         <a href="#">冰箱</a>
      </li>
      <li>
         <a href="#">洗衣机</a>
      </li>
      <li>
         <a href="#">
            电视
         </a>
      </li>
      <li class="divider"></li>
      <li>
         <a href="#">热水器</a>
      </li>
   </ul>
</div>
</body>
</html>

 

效果图:

图片 1

  按钮必须添加 data-toggle="dropdown" 触发器

 2、按钮下拉菜单       如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span ></span> 来指示按钮作为下拉菜单。

2.标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="dropdown">
   <button type="button" class="btn dropdown-toggle"
      data-toggle="dropdown">
      58二手市场

   </button>
   <ul class="dropdown-menu" >
      <li class="dropdown-header">二手电器(下拉菜单标题)</li>
        <li>
         <a   href="#">冰箱</a>
      </li>
      <li>
         <a href="#">洗衣机</a>
      </li>
      <li>
         <a href="#">
            电视
         </a>
      </li>
      <li class="divider"></li>
       <li class="dropdown-header">二手家私(下拉菜单标题)</li>
      <li>
         <a href="#">沙发</a>
      </li>
       <li>
         <a href="#">电脑桌</a>
      </li>
       <li>
         <a href="#">床</a>
      </li>
   </ul>
</div>
</body>
</html>

 

效果图:

图片 2

  放置下拉选项的无序列表需要添加 .dropdown-menu 类

<div >
<button type="button" data-toggle="dropdown">
主题
<span ></span>
</button>
<ul role="menu">
<li >下拉菜单标题</li>
<li><a >功能</a></li>
<li><a >另一个功能</a></li>
<li><a >其他</a></li>
<li ></li>
<li><a >分离的链接</a></li>
</ul>
</div>

 二、按钮组

 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:

图片 3

  添加一个空洞 <li ></li> 标签来分割列表项

3、分割的按钮下拉菜单

1.基本的按钮组

图片 4<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="" rel="stylesheet"/> <script src="; <script src="; </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div> </body> </html> View Code

效果:

图片 5

  <head>
    <script src=";
    <script src=";
    <link rel="stylesheet">
  </head>
  <body >
    <div >
      <button type="button" id="dropdownMenu1" data-toggle="dropdown">

<div >
<button type="button" >默认</button>
<button type="button" data-toggle="dropdown" >
<span ></span>
<span >切换下拉菜单</span>
</button>
<ul role="menu">
<li >下拉菜单标题</li>
<li><a >功能</a></li>
<li><a >另一个功能</a></li>
<li><a >其他</a></li>
<li ></li>
<li><a >分离的链接</a></li>
</ul>
</div>

2.按钮工具栏

 class .btn-toolbar 的使用

图片 6<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="" rel="stylesheet"/> <script src="; <script src="; </head> <body> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 4</button> <button type="button" class="btn btn-default">按钮 5</button> <button type="button" class="btn btn-default">按钮 6</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 7</button> <button type="button" class="btn btn-default">按钮 8</button> <button type="button" class="btn btn-default">按钮 9</button> </div> </div> </body> </html> View Code

效果:

图片 7

      下拉菜单

4、导航元素中的下拉菜单

3.嵌套

在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时,就会用到这个。

图片 8<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="" rel="stylesheet" /> <script src="; <script src="; </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 二手家电 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">冰箱</a></li> <li><a href="#">洗衣机</a></li> </ul> </div> </div> </body> </html> View Code

效果:

图片 9

      <span ></span>  //向下箭头
      </button>
      <ul class="dropdown-menu">
        <li><a >新闻</a></li>
        <li ></li>      //分割列表线
        <li><a >娱乐</a></li>
        <li ></li>
        <li><a >时事</a></li>
        <li ></li>
        <li><a >军事</a></li>
      </ul>
    </div>
  </body>

<ul >
<li ><a >Home</a></li>
<li><a >SVN</a></li>
<li><a >iOS</a></li>
<li><a >VB.Net</a></li>
<li >
<a data-toggle="dropdown" > //用链接替换了按钮
Java <span ></span>
</a>
<ul >
<li><a >Swing</a></li>
<li><a >jMeter</a></li>
<li><a >EJB</a></li>
<li ></li>
<li><a >分离的链接</a></li>
</ul>
</li>
<li><a >PHP</a></li>
</ul>

4.垂直的按钮组

class .btn-group-vertical 的使用

图片 10<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="" rel="stylesheet" /> <script src="; <script src="; </head> <body> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <div class="btn-group-vertical"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 二手家电 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">冰箱</a></li> <li><a href="#">洗衣机</a></li> </ul> </div> </div> </body> </html> View Code

效果:

图片 11

2. 按钮组   

5、在导航栏内的下拉菜单

5.分割的按钮下拉菜单

 分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式,但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能,右边是显示下拉菜单的切换。

图片 12<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="" rel="stylesheet" /> <script src="; <script src="; </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能1</a></li> <li><a href="#">功能2</a></li> <li><a href="#">其他功能</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">原始</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能1</a></li> <li><a href="#">功能2</a></li> <li><a href="#">其他功能</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> </body> </html> View Code

 

效果:

图片 13

  <div >     //默认水平按钮组
    <button type="button" >顶</button>
    <button type="button" >中立</button>
    <button type="button" >踩</button>
  </div>
  <div > //垂直方向按钮组
    <button >顶</button>
    <button >中立</button>
    <button >踩</button>
  </div>
  <div > //拉伸100%宽度,水平按钮组,只适用于  a  标签
    <a >顶</a>
    <a >中立</a>
    <a >踩</a>
  </div>
  <div >     //嵌套按钮组
    <button type="button" >顶</button>
    <button type="button" >踩</button>
    <div >
      <button type="button" data-toggle="dropdown">
      Dropdown
      <span ></span>
      </button>
      <ul >
        <li><a >新闻</a></li>
        <li ></li>
        <li><a >时事</a></li>
        <li ></li>
        <li><a >体育</a></li>
      </ul>
    </div>
  </div>

<nav role="navigation">
<div >
<a >W3Cschool</a>
</div>
<div>
<ul >
<li ><a >iOS</a></li>
<li><a >SVN</a></li>
<li >
<a data-toggle="dropdown"> //用链接替换了按钮
Java
<b ></b>
</a>
<ul >
<li><a >jmeter</a></li>
<li><a >EJB</a></li>
<li><a >Jasper Report</a></li>
<li ></li>
<li><a >分离的链接</a></li>
<li ></li>
<li><a >另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>

6.按钮上拉菜单

菜单也可以往上拉伸的,只需要简单地向父 .btn-group 容器添加 .dropup 即可。

图片 14<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="" rel="stylesheet" /> <script src="; <script src="; </head> <body style="margin-top:200px;"> <div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能1</a></li> <li><a href="#">功能2</a></li> <li><a href="#">其他功能</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-primary">原始</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能1</a></li> <li><a href="#">功能2</a></li> <li><a href="#">其他功能</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> </body> </html> View Code

效果:

图片 15

 

一、下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即...

3.input控件组   

 

   带按钮的搜索框


  <div >     
    <input type="text" placeholder="搜索">
    <span >
      <button type="button">
      Search
      </button>
    </span>
  </div>

  带下拉的搜索框
  <div >
    <input type="text" placeholder="搜索">
    <span >
      <div >
        <button type="button" data-toggle="dropdown">
          Dropdown
          <span ></span>
        </button>
        <ul >
          <li><a >新闻</a></li>
          <li ></li>
          <li><a >时事</a></li>
          <li ></li>
          <li><a >体育</a></li>
        </ul>
      </div>
    </span>
  </div>

  不带按钮的搜索框
  <div >
    <input type="text" placeholder="搜索">
    <span >
      输入完后回车
    </span>
  </div>

4.导航

  胶囊导航水平方向 

  <ul >
    <li ><a >首页</a></li>
    <li><a >简介</a></li>
    <li><a >详情</a></li>
  </ul>

  垂直方向
  <ul ></ul>

  

  面包屑导航

  <ol >
    <li><a >首页</a></li>
    <li><a >资料库</a></li>
    <li >数据</li>
  </ol>

  头部导航 

  <nav >

    <div >
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span >Toggle navigation</span>
        <span ></span>
        <span ></span>
        <span ></span>
      </button>
      <a >网站Logo</a>
    </div>

    <div id="bs-example-navbar-collapse-1">
      <ul >
        <li ><a >链接</a></li>
        <li><a >链接</a></li>
        <li >
          <a data-toggle="dropdown">

            下拉菜单

            <b ></b>

          </a>
          <ul >
            <li><a >新闻</a></li>
            <li><a >时事</a></li>
            <li><a >娱乐</a></li>
            <li ></li>
            <li><a >其他</a></li>
            <li ></li>
            <li><a >其他</a></li>
          </ul>
        </li>
      </ul>
      <form role="search">
        <div >
          <input type="text" >
        </div>
        <button type="submit" >搜索</button>
      </form>
      <ul >
        <li><a >链接</a></li>
        <li >
          <a data-toggle="dropdown">下拉菜单<b ></b></a>
          <ul >
            <li><a >新闻</a></li>
            <li><a >时事</a></li>
            <li><a >娱乐</a></li>
            <li ></li>
            <li><a >其他</a></li>
            <li ></li>
            <li><a >其他</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>

5.列表组

  

  <ul >
    <li ><a >新闻</a></li>
    <li ><a >时事</a></li>
    <li ><a >娱乐</a></li>
    <li ><a >其他</a></li>
  </ul>

  制作新闻页面

  <div >
    <a >
      <h4>习大大会见中国国民党主席朱立伦</h4>
      <p>据新华社北京4日电 中共中央总书记习大大4日上午在北京会见了朱立伦主席率领的中国国民党大陆访问团。</p>
    </a>
    <a >
      <h4>习大大会见中国国民党主席朱立伦</h4>
      <p>习大大对朱立伦率团来大陆访问表示欢迎。习大大强调,两岸关系和平发展成果来之不易,经验弥足珍贵。概括地说,就是要坚持走两岸关系和平发展道路,坚       持“九二共识”、反对“台独”的政治基础,坚持开展两岸协商谈判、推进各领域交流合作,坚持为两岸民众谋福祉</p>
    </a>
    <a >
      <h4>习大大会见中国国民党主席朱立伦</h4>
      <p>朱立伦表示,两岸和平发展已取得很多成果,希望在“九二共识”基础上,两岸在区域和平、环保、经济整合等方面携手合作,让两岸关系发展成果更多惠及基层民      众、中小企业和青年群体,持续推动两岸关系和平发展。</p>
    </a>
  </div>

  为列表组添加徽章
  <ul >
      <li >
        <span >30</span>        

        <a >中国队金牌</a>

      </li>

      <li >
        <span >30</span>        

        <a >中国队金牌</a>

*      *</li>

       <li >
        <span >30</span>        

*        <a >中国队金牌</a>*

*      *</li>

*  </ul>*

6.分页*** ***

  <ul >
    <li ><a >«</a></li>
    <li ><a >1</a></li>
    <li><a >2</a></li>
    <li><a >3</a></li>
    <li><a >4</a></li>
    <li><a >5</a></li>
    <li><a >»</a></li>
  </ul>

  <ul >   大号

  <ul > 小号

  上下页 
  <ul >
    <li><a >上一页</a></li>
    <li><a >下一页</a></li>
  </ul>

7.标签***  ***

  <span >默认</span>
  <span >主要</span>
  <span >成功</span>
  <span >消息</span>
  <span >警告</span>
  <span >危险操作</span>

  徽章

  <button type="button">
    未读消息
    <span >5</span>
  </button>

8.缩略图

  配合栅格系统构建带链接的缩略图,且支持响应*** ***

  <div class="row">
    <div class="col-xs-2">
      <a >  //添加边框样式并调节图片距离
        <img src="xx.png" alt="">
      </a>
    </div>
    <div >
      <a >
        <img src="xx.png" alt="">
      </a>
    </div>
    <div >
      <a >
        <img src="xx.png" alt="">
      </a>
    </div>
  </div>

  追加内容

  <div >
    <div >
      <div  >
        <img src="xx.png" alt="">
        <div >
          <p>图片看不见?</p>
          <p>
            <a >查看详情</a>
          </p>

        </div>
       </div>
    </div>
  </div>

9.面板***  ***

  <div >
    <div >面板页头</div>
    <div >面板主体</div>
    <div >面板页脚</div>
  </div>
  <div >
    <div >面板页头</div>
    <div >面板主体</div>
    <div >面板页脚</div>
  </div>
  <div >
    <div >面板页头</div>
    <div >面板主体</div>
    <div >面板页脚</div>
  </div>
  <div >
    <div >面板页头</div>
    <div >面板主体</div>
    <div >面板页脚</div>
  </div>
  <div >
    <div >面板页头</div>
    <div >面板主体</div>
    <div >面板页脚</div>
  </div>

10.进度条 

  <div >
    <div ></div> //另有其他4种颜色,进度条依靠服务端
  </div>
  <div >     //带条纹
    <div ></div>
  </div>
  <div >  //动态 条纹
    <div ></div>
  </div>

 


版权声明:本文由澳门金莎娱乐发布于关于澳门金莎,转载请注明出处:bootstrap下拉菜单,详解Bootstrap下拉菜单组件