bootstrap学习（四）输入框、导航

输入框组：

基本用法：


//form-control 占满
//input-group:输入框组
//input-group-addon：输入框前加入一个前缀<div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control"><span class="input-group-addon">@</span></div>

加入小图标：

 <div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-plus "></span></span><input type="text" class="form-control"></div>

加入按钮：

    <div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default btn-danger">按钮</button></span><input type="text" class="form-control"></input></div>

    <ul class="nav nav-tabs nav-justified"><li class="active"><a href="">首页1</a></li><li><a href="" class="dropdown-toggle" data-toggle="dropdown">首页2<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li><li><a href="">item3</a></li></ul></li><li><a href="">首页3</a></li><li><a href="">首页4</a></li></ul>

导航条：

基础导航： navbar-brand：字体稍微大点 navbar-header：导航头信息

    <nav class="navbar navbar-default"><div class="navbar-header"><a href="" class="navbar-brand">导航</a><ul class="nav navbar-nav"><li class="active"><a href="">item1</a></li><li class="active"><a href="">item2</a></li><li class="active"><a href="">item3</a></li></ul></div></nav>

导航中加入表单：

    <nav class="navbar navbar-default"><div class="navbar-header"><a href="" class="navbar-brand">导航</a><ul class="nav navbar-nav"><li class="active"><a href="">item1</a></li><li><a href="">item2</a></li><li><a href="">item3</a></li></ul></div><form action="" class="navbar-form"><input type="text" class="form-control"><button type="button" class="btn btn-default">按钮</button></form></nav>

面包屑导航：

breadcrumb：面包屑样式

    <ul class="breadcrumb"><li>首页</li><li>首页2</li><li>首页3</li></ul>

分页导航：可以给li设置 .active设置激活状态

    <ul class="pagination"><li><a href="">&laquo;</a></li><li><a href="">1</a></li><li><a href="">1</a></li><li><a href="">1</a></li><li><a href="">&raquo;</a></li></ul>

    <ul class="pager"><li><a href="">上一页</a></li><li><a href="">下一页</a></li></ul>

官方：https://v3.bootcss.com/components/#input-groups

posted @ 2019-04-30 15:07 巡山小妖N 阅读(...) 评论(...) 编辑收藏

bootstrap学习（四）输入框、导航相关推荐

bootstrap学习（四）表格
bootstrap学习(四)表格基础样式: 自适应沾满浏览器 <table class="table"><tr><th>序号</th&g ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
Bootstrap学习文档（三）
Bootstrap 注意下面的组件,很多是需要用到 js 的,所以要引入 Bootstrap 的 js 文件和 jquery 文件在示例代码中,我只是没有写,注意加上哦. 字体图标 Bootstrap ...
bootstrap学习(一)-CSS
bootstrap学习(一)-CSS 一.概览二.网格系统三.排版四.代码五.表格六.表单七.按钮八.图片九.辅助类十.响应式实用工具一.概览 1.移动设备优先 bootstrap ...
Bootstrap学习 (一)
Bootstrap学习(一) 准备 1.需要下载的资源 2.参考资源 1. HBuilder快捷键设置 2. Bootstrap的使用 2.1 01-BootStrap的页面模板代码 2.2 参考A ...
Bootstrap学习（三）——Bootstrap 插件
Bootstrap学习(三)--Bootstrap 插件 Bootstrap 插件 Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动. 站点引用 Boots ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式做请求get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数get请求acce ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

bootstrap学习（四）输入框、导航

bootstrap学习（四）输入框、导航

输入框组：

导航

标签页：

胶囊标签页：nav-pills active默认选中

竖胶囊：nav-stacked

禁用的标签： .disable 不可选

自适应标签页：nav-justfified 标签页自动占满一行

二级导航：.caret 向下的箭头

导航条：

导航中加入表单：

面包屑导航：

分页导航：可以给li设置 .active设置激活状态

bootstrap学习（四）输入框、导航相关推荐

最新文章

热门文章