标签：列表 orm 面包屑 Fix 标签 NPU control bad opd
Bootstrap04概述
一.输入框组
1.左侧添加文字
<div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control" type="text" name="" id="" value="" /> </div>
2.右侧添加文字
<div class="input-group"> <input class="form-control" type="text" name="" id="" value="" /> <span class="input-group-addon">@qq.com</span> </div>
3.两侧添加文字
<div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control" type="text" name="" id="" value="" /> <span class="input-group-addon">.00</span> </div>
3.左侧使用复选框+单选框(注意:实现单选框效果,需要添加name属性)
<div class="input-group"> <span class="input-group-addon"> <input type="checkbox" name="" id="" value="" /> </span> <input class="form-control" type="text" name="" id="" value="" /> </div> <div class="input-group"> <span class="input-group-addon"> <input type="radio" name="sex" id="" value="" /> </span> <input class="form-control" type="text" name="" id="" value="" /> </div> <div class="input-group"> <span class="input-group-addon"> <input type="radio" name="sex" id="" value="" /> </span> <input class="form-control" type="text" name="" id="" value="" /> </div>
4.右侧使用按钮
<div class="input-group"> <input class="form-control" type="text" name="" id="" val..ue="" /> <div class="input-group-btn"> <button class="btn btn-primary">提交</button> </div> </div>
5.左侧使用下拉菜单
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-warning" data-toggle="dropdown">搜索??</button> <ul class="dropdown-menu"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <input class="form-control" type="text" name="" id="" value="" /> </div>
二.导航
1.基本导航
<ul class="nav"> <li><a>洗发水</a></li> <li><a>沐浴露</a></li> <li><a>香皂</a></li> </ul>
2.水平导航
<ul class="nav nav-tabs"> <li><a>洗发水</a></li> <li><a>沐浴露</a></li> <li><a>香皂</a></li> </ul>
3.垂直胶囊导航
<ul class="nav nav-pills"> <li><a>洗发水</a></li> <li><a>沐浴露</a></li> <li><a>香皂</a></li> </ul>
4.水平胶囊导航
<ul class="nav nav-tabs nav-pills"> <li><a>洗发水</a></li> <li><a>沐浴露</a></li> <li><a>香皂</a></li> </ul>
5.两端对齐导航
<ul class="nav nav-justified nav-pills"> <li><a>洗发水</a></li> <li><a>沐浴露</a></li> <li><a>香皂</a></li> </ul>
6.带下拉菜单的导航
<ul class="nav nav-justified nav-pills"> <li><a>洗发水</a></li> <li><a>沐浴露</a></li> <li class="dropdown" ><a data-toggle="dropdown">香皂</a> <ul class="dropdown-menu"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul>
三.导航条
1.标题+列表
<nav class="navbar navbar-default"> <div class="navbar-header"> <div class="navbar-brand"> 淘宝 </div> </div> <ul class="nav navbar-nav"> <li><a>烟酒</a></li> <li><a>啤酒</a></li> <li><a>红酒</a></li> </ul> </nav>
2.表单
<nav class="navbar navbar-inverse"> <form class="navbar navbar-form"> <div class="input-group"> <input class="form-control" type="text" name="" id="" value="" /> <span class="input-group-btn"> <button class="btn btn-warning">提交</button> </span> </div> </form> </nav>
3.添加文本+超链接+按钮+对齐方式
<nav class="navbar navbar-default"> <form class="navbar navbar-form navbar-right"> <div class="input-group"> <input class="form-control" type="text" name="" id="" value="" /> <span class="input-group-btn"> <button class="btn btn-warning">提交</button> </span> </div> </form> <button class="btn btn-info">搜索??</button> <a>超链接</a> <p>添加文本</p> </nav>
4.置顶+底部
<nav class="navbar navbar-inverse navbar-fixed-top"> <form class="navbar navbar-form"> <div class="input-group"> <input class="form-control" type="text" name="" id="" value="" /> <span class="input-group-btn"> <button class="btn btn-warning">提交</button> </span> </div> </form> </nav>
四.面包屑------路径导航
<ul class="breadcrumb"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
五.标签样式
label-default 默认白
label-danger 危险红
label-warning 警告黄
label-info 天空蓝
label-primary 海军蓝
label-success 成功绿
<span class="label label-danger">标签样式</span><br> <span class="label label-warning">标签样式</span><br> <span class="label label-info">标签样式</span><br> <span class="label label-primary">标签样式</span><br> <span class="label label-danger">标签样式</span><br> <span class="label label-default">标签样式</span><br>
六.分页
1.默认分页
<ul class="pagination"> <li><a>«</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>»</a></li> </ul>
2.翻页效果+尺寸+禁用与选中
<ul class="pager pagination-lg"> <li class="previous"><a>«</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>12</a></li> <li class="next"><a>»</a></li> </ul> <ul class="pager pagination-sm"> <li><a>«</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>12</a></li> <li><a>»</a></li> </ul>
七.徽章 badge
<a> 未读消息<span class="badge">99+</span> </a> <button class="btn btn-info"> 未读消息<span class="badge">99+</span> </button>
标签：列表 orm 面包屑 Fix 标签 NPU control bad opd
原文地址：https://www.cnblogs.com/meizi-ajj/p/10446263.html
