Bootstrap输入框和导航组件
来源:互联网 发布:淘宝女装退货率在多少 编辑:程序博客网 时间:2024/06/10 23:01
输入框组件
文本输入框就是可以在input元素前后加上文字或按钮,可以实现对表单控件的扩展
<!--在左侧添加文字--><div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"></div>
<!--在右侧添加文字--><div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon"></span></div>
<!--在两侧添加文字--><div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span></div>
<!--设置尺寸,另外三种分别是默认、xs、sm--><div class="input-group input-group-lg">
<!--左侧使用复选框和单选框--><div class="input-group"> <span class="input-group-addon"><input type="checkbox"></span> <input type="text" class="form-control"></div><div class="input-group"> <span class="input-group-addon"><input type="radio"></span> <input type="text" class="form-control"></div>
<!--左侧使用按钮--><div class="input-group"> <span> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </span> <input type="text" class="form-control"></div>
导航组件
Bootstrap提供了一组导航组件,用于实现Web页面的栏目操作
<!--基本导航栏标签页--><ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li></ul>
<!--胶囊式导航--><ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li></ul>
<!--垂直胶囊式导航--><ul class="nav nav-pills nav-stacked"><!--导航两端对齐--><ul class="nav nav-tabs nav-justified"><!--禁用导航中的项目--><li class="disabled"><a href="#">关于</a></li>
<!--带下拉菜单的导航--><ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> </ul> </li> <li><a href="#">关于</a></li></ul>
导航条组件
作为导航页头的响应式基本组件
<!--基本格式--><nav class="navbar navbar-default"> ...</nav><!--反色调导航--><nav class="navbar navbar-inverse"> ...</nav>
<!-- 基本导航条,包含标题和列表 --><nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul> </div></nav>
<!-- 导航条中使用表单 --><nav class="navbar navbar-default"> <div class="container"></div> <div class="navbar-header"> <a href="#" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul> <form action="" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default" type="submit">提交</button> </div> </div> </form> <!-- 导航中使用按钮 --> <button class="btn btn-default navbar-btn navbar-left">按钮</button> <!-- 导航中使用对齐方式,left和right --> <button class="btn btn-default navbar-btn navbar-right">按钮</button> <!-- 导航中使用一段文本 --> <p class="navbar-text">我是一段文本</p> <!-- 非导航链接,一般需要置入文本区域内 --> <p class="navbar-text"><a href="#" class="navbar-link">非导航链接</a></p> </div>
<!-- 导航固定在顶部,下面的内容会自动上移 --><nav class="navbar navbar-default navbar-fixed-top"><!-- 导航补丁在底部 --><nav class="navbar navbar-default navbar-fixed-bottom"><!-- 静态导航,和页面等宽的导航条,去掉了圆角 --><nav class="navbar navbar-default navbar-static-top">
阅读全文
0 0
- Bootstrap输入框和导航组件
- bootstrap输入框和导航组件
- Bootstrap输入框和导航组件
- Bootstrap输入框和导航组件
- bootstrap输入框导航组件input,nav
- 输入框和导航组件
- bootstrap-输入框/导航
- 输入行和导航组件
- Bootstrap组件学习之导航和导航条
- 第八章.输入框和导航栏组件
- 第8 章输入框和导航组件
- Bootstrap组件之导航
- BootStrap的导航组件
- BootStrap 导航条组件
- BootStrap 附加导航组件
- Bootstrap导航组件
- Bootstrap-导航栏组件
- Bootstrap组件之输入框组
- 【Unity】Object.Instantiate
- PAT (Advanced Level) Practise 1060 Are They Equal (25)
- 【USACO】横幅
- html:元素总结
- struts2中jsp页面传值到action方式总结
- Bootstrap输入框和导航组件
- SQL中on和where的区别
- Android_代码监听来电显示,为黑名单时挂断
- 【HNOI2008】bzoj1007 水平可见直线
- javaweb中过滤器与拦截器的使用
- 嵌入式开发必备SPI、IIC,高手带你理解SPI中的极性CPOL和相位CPHA
- BOOST TCP 同步 网络通信
- python 图像二值化
- gdb调试