CSS组件
来源:互联网 发布:淘宝联盟论坛在哪里找 编辑:程序博客网 时间:2024/05/18 01:34
一、下拉菜单
<!--下拉菜单-->
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown">php课程<span class="caret"></span></button> <!-- 下拉菜单的三角形<span class="caret"></span>-->
<ul class="dropdown-menu">
<li><a>html</a></li>
<li><a>mysql</a></li>
<li><a>linux</a></li>
<li class="divider"></li> <!--分割线-->
<li><a>apache</a></li>
<li><a>redis</a></li>
<li><a>css</a></li>
</ul>
</div>
二、按钮组
<!--按钮组的应用-->
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default" data-toggle="dropdown">html</button>
<button type="button" class="btn btn-default" data-toggle="dropdown">mysql</button>
<button type="button" class="btn btn-default" data-toggle="dropdown">linux</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default" data-toggle="dropdown">apache</button>
<button type="button" class="btn btn-default" data-toggle="dropdown">redis</button>
<button type="button" class="btn btn-default" data-toggle="dropdown">css</button>
</div>
</div>
//按钮式的下拉菜单
<div class="btn-group btn-group-lg"> <!--按钮组已经有dropdown类,不用在自己添加-->
<button type="button" class="btn btn-default ">html <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button></button>
<ul class="dropdown-menu">
<li><a>html</a></li>
<li><a>mysql</a></li>
<li><a>linux</a></li>
<li class="divider"></li> <!--分割线-->
<li><a>apache</a></li>
<li><a>redis</a></li>
<li><a>css</a></li>
</ul>
</div>
//输入框组(只能用于input标签)
<h2 class="page-header">输入框组</h2>
<div class="input-group">
<span class="input-group-addon">用户名</span>
<input type="text" class="form-control" placeholder="请输入用户名" />
</div>
//标签页(选项卡效果)
<ul class="nav nav-tabs">
<li class="active"><a>active</a></li> <!--active是选中当前-->
<li><a>page</a></li>
<li><a>active</a></li>
<li><a>go stright</a></li>
</ul>
//缩略图
//分页
<div>
<ul class="pagination">
<li class="active"><a>«</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>»</a></li>
</ul>
</div>
//导航栏
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"><a href="#" class="navbar-brand">BOOTSTRAP</a><p class="navbar-text">欢迎光临</p></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">news</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索的关键词" />
<button type="button" class="btn btn-default">搜索</button>
</div>
</form>
</div>
</div>
</nav>
- CSS组件
- CSS组件
- 组件中使用css
- 圆角组件css
- [css]组件设计
- CSS组件-搜索框
- hover一个组件,另一个组件css效果
- CSS定位组件CSS定位方式
- CSS样式模块化组件化
- BootStrap--CSS组件--导航(nav)
- BootStrap--CSS组件--标签(label)
- BootStrap--CSS组件-- 徽章(badge)
- BootStrap--CSS组件--大屏幕展播
- Ionic学习--2.CSS组件
- CSS设置组件的位置
- CSS界面组件之表单
- mui组件通用CSS类
- Bootstrap CSS组件---小图标
- 定位相关工具类
- android 设置页面切换与返回均无动画效果
- 【FX】FX插件安装
- InfluxDB 入门详解-JAVA增删查
- 字符串操作:左旋转字符串,右旋转字符串,判断一个字符串是否是另一个字符串旋转所得
- CSS组件
- 后台系统无刷新页面记录当前操作位置方法
- plsql创建数据库表、表空间
- eclipse安装JAVA反编译插件
- 阅读笔记(文学)
- 8086/8088 CPU寄存器组
- Spring MVC中关于重定向的路径问题
- ObjectUtils(对象、流相互转换)
- 15.6. Class Scope under Inheritance