大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。
本节内容有动态显示效果，建议实际操作一下。
<!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>