本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件。

一.输入框组件

文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩

展。

//在左侧添加文字

<divclass="input-group">

<spanclass="input-group-addon">@</span> <inputtype="text" class="form-control">

</div>

//在右侧添加文字

<divclass="input-group">

<inputtype="text" class="form-control">

<spanclass="input-group-addon">@163.com</span> </div>

//在两侧添加文字

<divclass="input-group">

<spanclass="input-group-addon">$</span> <inputtype="text" class="form-control"> <spanclass="input-group-addon">.00</span>

</div>

//设置尺寸,另外三种分别是默认、xs、sm <div class="input-groupinput-group-lg">

//左侧使用复选框和单选框

<divclass="input-group">

<span class="input-group-addon"><inputtype="checkbox"></span> <input type="text"class="form-control">

</div>

<divclass="input-group">

<spanclass="input-group-addon"><inputtype="radio"></span> <input type="text"class="form-control">

</div>

//左侧使用按钮

<divclass="input-group">

<spanclass="input-group-btn">

<button type="button"class="btn btn-default">按钮</button> </span>

<input type="text"class="form-control"> </div>

//左侧使用下拉菜单或分列式

<divclass="input-group">

<spanclass="input-group-btn">

<button class="btn btn-defaultdropdown-toggle" data-toggle="dropdown">

下拉菜单

<spanclass="caret"></span> </button>

<ulclass="dropdown-menu">

<li class="dropdown-header">网站导航</li> <li><ahref="#">首页</a></li>

<li><ahref="#">资讯</a></li>

<liclass="divider"><a href="#">产品</a></li> <li class="disabled"><ahref="#">关于</a></li>

</ul>

</span>

<input type="text"class="form-control"> </div>

二.导航组件

Bootstrap 提供了一组导航组件,用于实现 Web 页面的栏目操作。//基本导航标签页

<ulclass="nav nav-tabs">

<li class="active"><ahref="#">首页</a></li> <li><a href="#">资讯</a></li>

<li><a href="#">产品</a></a></li> <li><a href="#">关于</a></li>

</ul>

//胶囊式导航

<ulclass="nav nav-pills">

//垂直胶囊式导航

<ulclass="nav nav-pills nav-stacked">

//导航两端对齐

<ulclass="nav nav-tabs nav-justified">

//禁用导航中的项目

<liclass="disabled"><a href="#">关于</a></li>

//带下拉菜单的导航

<ulclass="nav nav-tabs">

<li class="active"><ahref="#">首页</a></li> <li><a href="#">资讯</a></li>

<liclass="dropdown">

<a href="#" class="dropdown-toggle"data-toggle="dropdown">

下拉菜单

<spanclass="caret"></span>

</a>

<ulclass="dropdown-menu">

<li><a href="#">菜单一</a></li> <li><ahref="#">菜单二</a></li>

</ul>

</li>

</ul>

三.导航条组件

导航条是网站中作为导航页头的响应式基础组件。//基本格式

<navclass="navbar navbar-default">

...

</nav>

//反色调导航

<navclass="navbar navbar-inverse">

...

</nav>

//基本导航条,包含标题和列表

<nav class="navbarnavbar-default"> <div class="container">

<divclass="navbar-header">

<a href="#"class="navbar-brand">标题</a> </div>

<ulclass="nav navbar-nav">

<li class="active"><ahref="#">首页</a></li> <li><a href="#">资讯</a></li>

<li class="disabled"><ahref="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>

</div>

</nav>

//导航条中使用表单

<form action=""class="navbar-form navbar-left"> <divclass="input-group">

<input type="text"class="form-control"> <spanclass="input-group-btn">

<button type="submit"class="btn btn-default">提交</button> </span>

</div>

</form>

//导航中使用按钮

<buttonclass="btn btn-default navbar-btn">按钮</button>

//导航中使用对齐方式,left 和 right <button class="btn btn-default navbar-btnnavbar-right">按钮</button>

//导航中使用一段文本

<pclass="navbar-text">我是一段文本</p>

//非导航链接,一般需要置入文本区域内

<ahref="#" class="navbar-link">非导航链接</a>

//将导航固定在顶部,下面的内容会自动上移

<navclass="navbar navbar-default navbar-fixed-top">

//将导航补丁在底部

<navclass="navbar navbar-default navbar-fixed-bottom">

//静态导航,和页面等宽的导航条,去掉了圆角

<navclass="navbar navbar-default navbar-static-top">

bootstrap4相关文档的更多相关文章

  1. dotNET跨平台相关文档整理

    一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...

  2. Mybatis-Generator 自动生成Dao、Model、Mapping相关文档

    最近在学习mybatis,结果在写Mapping的映射文件时insert语句一直报错,于是想看看标准的映射文件是什么样.百度到Mybatis-Generator 自动生成Dao.Model.Mappi ...

  3. VLC的相关文档以及javascript接口

    参看下面链接:VLC相关文档

  4. dotNET跨平台相关文档

    dotNET跨平台相关文档整理 一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的 ...

  5. 大数据相关文档&Api下载

    IT相关文档&Api下载(不断更新中) 下载地址:https://download.csdn.net/user/qq_42797237/uploads 如有没有你需要的API,可和我留言,留下 ...

  6. rn相关文档

    RN相关文档: rn文档:https://reactnative.cn/ mbox文档:https://cn.mobx.js.org/ es6文档:http://es6.ruanyifeng.com/ ...

  7. OSS阿里云相关文档

    OSS阿里云相关文档 oss文档链接

  8. hugo官方相关文档地址

    +++ date="2020-10-17" title="hugo官方相关文档地址" tags=["hugo"] categories=[& ...

  9. iOS开发-相关文档

    关于调试,查看Xcode Overview文档相关部分:http://developer.apple.com/library/ios/documentation/ToolsLanguages/Conc ...

随机推荐

  1. hdu 1495 (搜索) 非常可乐

    http://acm.hdu.edu.cn/showproblem.php?pid=1495 搜索模拟出每此倒得情况就好,详情见代码\ (好困啊!!!!1) #include<cstdio> ...

  2. (转帖)CentOS最常用命令及快捷键整理

    原文:http://www.centoscn.com/CentOS/help/2014/0306/2493.html 最近开始学Linux,在VMware Player中安装了CentOS 6.4.为 ...

  3. 在nodejs里面是用类似配置文件的方法

    1.a.js exports.MYSQLIP = '127.0.0.1'; exports.MYSQLPORT = 1336; 2.b.js const C = require('./config/c ...

  4. Jquery中$.each()与$().each()的使用与区别。

    在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...

  5. 使用flask-alchemy 过程中报错KeyError: 'SQLALCHEMY_TRACK_MODIFICATIONS'

    在网上找了很多, 大多数说是必须要给 SQLALCHEMY_TRACK_MODIFICATIONS 一个默认值,尝试修改alchemy 源码,,但是还是不起作用 最后阅读源码 , self.app = ...

  6. java 开发微信中回调验证一直提示 解密失败处理(Java)

    微信公众号平台接入JDK6和JDK7及JDK8加解密失败处理(Java) 根据自己jdk版本编译,如jdk7或者jdk6 ,此时部署后提示报错:java.security.InvalidKeyExce ...

  7. Easyui form 表单中的 radio 无法一开始就选中原因

    是因为你在form表单里面,所以会出现样式没有选中状态,必须要从后台去获取数据,然后再绑定.也就是初始化数据.

  8. MVVM中viewmodel的理解

    网上有人写了这段话,我也有同感,特别是第一种用法,很重要,后一种用法,我觉得是把第一种用法加入controller中了. 第一种 “view model” 是 “model for the view” ...

  9. IDEA的GUI连接数据库写入SQL语句的问题总结

    一.首先是建立游标的对象statement 插入数据excuteUpdate需要的是一个整型的参数,所以建立的对象要是一个int型的数据类型,才可以执行SQL语句excuteQuery是一个字符类型在 ...

  10. 41.App 框架的搭建思路以及代码的规范

    本链接  引用别人文章https://www.jianshu.com/p/d553096914ff