专业编程基础技术教程

网站首页 > 基础教程 正文

bootstrap基础快速入门-10 dropdown下拉框

ccvgpt 2024-11-11 11:26:04 基础教程 19 ℃

大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。

bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。

bootstrap基础快速入门-10 dropdown下拉框

本节内容有动态显示效果，建议实际操作一下。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="bootstrap.css" rel="stylesheet">
 <style>
 .aui-ul li {
 margin-left: 10px;
 }
 .aui-ul-lg li:before {
 color: #ff50d7;
 }
 .aui-ul-md li:before {
 color: #1c15ff;
 }
 .aui-ul-sm li:before {
 color: #ff0f2e;
 }
 .aui-ul li:before {
 content: "\f8ff";
 margin-right: 15px;
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
 @media (min-width: 992px) and (max-width: 1199px) {
 .aui-ul li:before {
 color: #ff50d7;
 }
 }
 @media (min-width: 767px) and (max-width: 992px) {
 .aui-ul li:before {
 color: #8e36e8;
 }
 }
 @media (min-width: 767px) {
 .aui-ul li:before {
 color: #2f25e8;
 }
 }
 </style>
</head>
<body>
<pre>
 实现下拉框需要依赖bootstrap的css和js,js引入前引入jquery.
 整个div是:dropdown ,按钮是:dropdown-toggle ,按钮还必须加bootstrap自定义属性data-toggle为"dropdown",列表用dropdown-menu.
 li前面放置icon字体:
 before伪元素
 .aui-ul li:before {
 content: "\f8ff";
 margin-right: 15px;
 color: red;
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
</pre>
<div class="container">
 <div class="row">
 <div class="col-md-2 ">
 下拉框
 </div>
 <div class="col-md-10 ">
 <div class="dropdown">
 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">选择 <span class="glyphicon glyphicon-hand-down"></span></button>
 <ul class="dropdown-menu aui-ul">
 <li class="text-left ali visible-lg" style="">lg 1</li>
 <li class="text-left ali visible-md" style="">md 1</li>
 <li class="text-left ali visible-sm" style="">sm 1</li>
 <li class="text-left ali visible-xs" style="">xs 1</li>
 <li class="text-left ali">2</li>
 <li class="text-left ali">3</li>
 </ul>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-2 ">
 下拉框
 </div>
 <div class="col-md-10 ">
 <div class="dropdown">
 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">选择 <span class="glyphicon glyphicon-hand-down"></span></button>
 <ul class="dropdown-menu aui-ul ">
 <li class="text-left ali " style=""> 1</li>
 <li class="text-left ali">2</li>
 <li class="text-left ali">3</li>
 </ul>
 </div>
 </div>
 </div>
</div>
</body>
<!--先引入jquery-->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</html>

Tags：

猜你喜欢

最近发表
标签列表