指引网

当前位置: 主页 > 网页制作 > HTML >

Bootstrap下拉菜单样式的实现方法

来源:网络 作者:佚名 点击: 时间:2017-07-06 20:54
[摘要]  小编推荐的这篇文章介绍了Bootstrap下拉菜单样式的实现方法,非常实用,有兴趣的同学快来看看吧。

 

 代码如下 复制代码

<!doctype html>

<html>

<head>

  <metacharset="utf-8">

  <metahttp-equiv="X-UA-Compatible"content="IE=edge">

  <metaname="viewport"content="width=device-width, initial-scale=1">

  <title>Bootstrap</title>

  <linkrel="stylesheet"href="css/bootstrap.css"/>

</head>

<!--第1步:添加一个dropdown父级;

第2步:给button添加一个data-toggle="dropdown"属性;

第3步:给ul添加一个class="dropdown-menu&rdquo;.

 最好再给button添加一个dropdown-toggle的class属性

-->

<body>

  <divclass="container"style="margin-top:5px">

    <divclass="row">

      <divclass="dropdown">

        <buttonclass="btn btn-default dropdown-toggle"data-toggle="dropdown">学院课程 <spanclass="caret"></span></button><!--btn-default默认颜色-->

        <ulclass="dropdown-menu">

          <li><ahref="#">html</a></li>

          <li><ahref="#">css</a></li>

          <li><ahref="#">javascript</a></li>

          <li><ahref="#">less</a></li>

          <li><ahref="#">bootstrap</a></li>

        </ul> 

      </div>

 

    </div>

  </div>

  <scriptsrc="js/jquery-2.1.0.js"></script>

  <scriptsrc="js/bootstrap.js"></script>

</body>

</html>

 

效果图:

Bootstrap下拉菜单的样式:

 

 代码如下 复制代码

<!doctype html>

<html>

<head>

 <metacharset="utf-8">

 <metahttp-equiv="X-UA-Compatible"content="IE=edge">

 <metaname="viewport"content="width=device-width, initial-scale=1">

 <title>Bootstrap</title>

 <linkrel="stylesheet"href="css/bootstrap.css"rel="external nofollow"/>

</head>

<body>

 <divclass="container"style="margin-top:5px">

 <divclass="row">

  <divclass="col-lg-4">

  <divclass="dropdown"><!--在dropdown后面加上open使下拉列表默认展开;而pull-right使其右浮动并右对齐,改为dropup使箭头朝上并向上展开-->

   <buttonclass="btn btn-default dropdown-toggle btn-block"data-toggle="dropdown">学院课程 <spanclass="caret"></span></button><!--btn-block使按钮撑满整个父级-->

   <ulclass="dropdown-menu">

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">html</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">css</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">javascript</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">less</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">bootstrap</a></li>

   </ul>

  </div>

  </div>

  <divclass="col-lg-4">

  <divclass="dropdown">

   <buttonclass="btn btn-default dropdown-toggle"data-toggle="dropdown">学院课程 <spanclass="caret"></span></button>

   <ulclass="dropdown-menu">

   <liclass="dropdown-header"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">前端</a></li><!--dropdown-header是菜单里的标题,给li添加-->

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">html</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">css</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">javascript</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">less</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">bootstrap</a></li>

   <liclass="divider"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">html</a></li><!--divider是分隔线,给li添加-->

   <liclass="dropdown-header text-center"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">后端</a></li><!--text-center让内容居中-->

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">php</a></li>

   <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">java</a></li>

   <liclass="disabled"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">.net</a></li><!--disabled使菜单不可选-->

   </ul>

  </div>

  </div>

 </div>

 </div>

 <scriptsrc="js/jquery-2.1.0.js"></script>

 <scriptsrc="js/bootstrap.js"></script>

</body>

</html>

 

效果图:

------分隔线----------------------------