bootstrap组件
2017-08-22 13:02
411 查看
输入框组
添加一个span,设置类为
不光是可以添加文字,还能在span中添加多选框单选框什么的;但如果想要添加额外元素的按钮就要使用
导航部分
bootstrap所有的导航组件都依赖同一个
标签页:
nav-tabs
nav-pills
nav-stacked
我们呢可以在这三种里面添加下拉菜单
首先,我们需要给nav设置
固定在顶部和底部 bootstrap提供了
导航条的反色:
路径导航:
分页组件
默认分页类
翻页类:
添加一个span,设置类为
input-group-addon
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Write down your fucking Username" aria-describedby="basic-addon1"> </div> //password部分 <div class="input-group"> <input type="text" class="form-control" placeholder="Write down your fucking Password" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">Password</span> </div>
不光是可以添加文字,还能在span中添加多选框单选框什么的;但如果想要添加额外元素的按钮就要使用
input-group-btn类;
<div class="input-group"> <input type="text" class="form-control" placeholder="Write down your fucking Username" aria-describedby="basic-addon1"> <span class="input-group-btn" id="basic-addon1"> <button class="btn btn-default" type="button">开始哲↑学</button> </span> </div>
导航部分
bootstrap所有的导航组件都依赖同一个
nav类,状态类也是共用的
标签页:
nav-tabs
nav-pills
nav-stacked类,
nav-tabs
nav-pills
nav-stacked
我们呢可以在这三种里面添加下拉菜单
<ul class="nav nav-tabs"> <li><a href="#">首页</a></li> <li class="dropdown"> <a class="drop-toggle" data-toggle="dropdown"> 点击试试 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li>你看见了吗</li> </ul> </li> </ul>
导航条属性navbar
v3中文文档中给出了一个navbar的例子<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
首先,我们需要给nav设置
navbar navbar-default类,将导航设置为默认,b并加上
role="navigation"属性兼容,之后建立一个div,设置
container-fluid将导航条width=100%,之后导航分为了四个部分
nav-header
nav-collapse
nav-left
nav-right分别设置导航条中四个部分的内容
固定在顶部和底部 bootstrap提供了
navbar-fixed-top
navbar-fixed-bottom让导航条固定在顶部或底部
导航条的反色:
navbar-inverse类
路径导航:
breadcrumb类
<ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ul>
分页组件
默认分页类
pagination类 可以加上
pagination-lg/sm来设置尺寸
<ul class="pagination"> <li> <a href="#"> <span>«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li> <a href="#"> <span>»</span> </a> </li> </ul>
翻页类:
pager类会变成翻页图标 加上
previous
next会两端对齐
相关文章推荐
- zTree 树形组件结合bootstrap的使用
- bootstrap——滚动监听组件
- 【Bootstrap框架】——组件(Component)
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查
- Bootstrap文件上传组件:bootstrap fileinput
- Bootstrap框架---krajee插件fileinput--最好用的文件上传组件----单多张图片上传交互方式三(推荐)
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- Bootstrap组件之导航条
- 转:Bootstrap的常用类(CSS和布局组件)的总结
- 使用 Bootstrap Typeahead 组件 二
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
- Bootstrap简单认识之Collapse组件
- BootStrap插件,组件使用注意事项
- bootStrap分页组件bootStrapPager
- JS组件系列——两种bootstrap multiselect组件大比拼
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
- bootstrap multiselect两大组件
- Bootstrap fileinput.js,最好用的文件上传组件
- JavaScript插件 Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”
- Bootstrap巨幕页头缩略图和警告框组件