Bootstrap 输入框和导航组件

时间:2022-09-11 18:26:26

一.输入框组件

//在左侧添加文字

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
Bootstrap 输入框和导航组件

//在右侧添加文字

<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@163.com</span>
</div>
Bootstrap 输入框和导航组件

//在两侧添加文字

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
Bootstrap 输入框和导航组件

//设置尺寸,另外三种分别是默认、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>
Bootstrap 输入框和导航组件

//左侧使用按钮

<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">按钮</button>
</span>
<input type="text" class="form-control">
</div>
Bootstrap 输入框和导航组件

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

<div class="input-group"> <span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="divider"><a href="#">产品</a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>
Bootstrap 输入框和导航组件

二.导航组件

//基本导航标签页

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>
Bootstrap 输入框和导航组件

//胶囊式导航

<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>
Bootstrap 输入框和导航组件

//垂直胶囊式导航

<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>
Bootstrap 输入框和导航组件

//导航两端对齐

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>
Bootstrap 输入框和导航组件

//禁用导航中的项目

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>
Bootstrap 输入框和导航组件

//带下拉菜单的导航

<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>
</ul>
Bootstrap 输入框和导航组件

三.导航条组件

//基本格式

<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 class="disabled"><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</nav>
Bootstrap 输入框和导航组件

//导航条中使用表单

<form action="" class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">提交</button>
</span>
</div>
</form>
Bootstrap 输入框和导航组件

//导航中使用按钮

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

//导航中使用对齐方式,left 和 right

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

//导航中使用一段文本

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

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

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

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

<nav class="navbar navbar-default navbar-fixed-top">

//将导航补丁在底部

<nav class="navbar navbar-default navbar-fixed-bottom">

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

<nav class="navbar navbar-default navbar-static-top">

Bootstrap 输入框和导航组件的更多相关文章

  1. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  2. Bootstrap&lpar;7&rpar; 输入框和导航组件

            一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. //在左侧添加文字 <!-- //在左侧添加文字 --> ...

  3. Bootstrap 学习笔记3 输入框和导航组件

    导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...

  4. bootstrap学习(四)输入框、导航

    输入框组: 基本用法: //form-control 占满 //input-group:输入框组//input-group-addon:输入框前加入一个前缀 <div class="i ...

  5. Bootstrap导航组件

    Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页 注意 .nav-tabs 类依赖 .nav 基类 <ul class=" ...

  6. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  7. Bootstrap学习之路(2)---导航组件

    在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如: 标签页的样式为:.nav-tabs <ul class="nav nav-tabs"> ...

  8. Bootstrap技术&colon; 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

  9. Bootstrap&lt&semi;基础十七&gt&semi;导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

  1. ubuntu修改主机名

    ubuntu修改主机名   主机名在/etc/hostname文件中了,只在打开这个文件进行修改,重启计算机即可.     一.查看主机名 $ hostname  #查看主机名 cdyemail   ...

  2. 第二个Sprint冲刺事后诸葛亮报告

    用户反馈:计时的填空题难度过大,计时选择题的画面太亮. 用户数量:4 团队改进建议:bug有点多 工作: 主界面 试卷题,是整合以前的内容的 选择题:也是整合以前功能的 初级的 计时题 1.每个成员第 ...

  3. STL学习系列六:List容器

    List简介 list是一个双向链表容器,可高效地进行插入删除元素. list不可以随机存取元素,所以不支持at.(pos)函数与[]操作符.it++(ok), it+5(err) #include ...

  4. ecshop添加自定义lbi文件

    1.找到 admin下面 includes\lib_template.php 找到 $page_libs = array( 这里…. 给您需要的页面加上 你自己的 boke365.lbi 2.找到 l ...

  5. &lbrack;转载&rsqb;SQL Server查找包含某关键字的存储过程3种方法

    存储过程都写在一个指定的表中了,我们只要使用like查询就可以实现查询当前这台SQL Server中所有存储过程中包括了指定关键字的存储过程并显示出来,下面一起来看看我总结了几条命令. 例子1 代码如 ...

  6. USB入门基础知识(转)

    源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...

  7. web前端学习(2):开始编写HTML

    在第一章中,我们初步了解了上网的过程,同时也明白了所谓网页,其本质就是主要用HTML语言所写的一份文档.相信大多数人在了解HTML文件前,最先接触的是利用"记事本"所写的文档或者是 ...

  8. zombodb安装试用

    pg 数据库安装 参考如下安装 yum install https://download.postgresql.org/pub/repos/yum/10/redhat/rhel-7-x86_64/pg ...

  9. 用EXCLE群发outlook邮件

    Outlookでメール一括送信する方法(差し込み.HTML形式.添付ファイル複数あり) メールを一括送信する方法はウェブ上にいくつも紹介されていましたが.以下のすべての条件を満たすものが見つからなかっ ...

  10. js高级-执行上下文

    全局上下文  方法1() 压入 (栈的数据结构 先进后出)push()  pop() 1.当一个函数在调用另外一个函数的时候新调用的函数会行成一个新的执行上下文 压入执行环境栈的栈顶 2.浏览器js执 ...