输入框组

添加额外元素.input-group-addon

外包元素.input-group>input-group-addon+form-control

<div class="input-group">
<span class="input-group-addon">额外元素</span>
<input type="text" class="form-control"/>
</div>

输入框组尺寸

控制类.input-group-*: .input-group-lg/.input-group-sm

<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">额外元素</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>

额外元素为按钮

额外按钮类.input-group-btn

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

额外元素为下拉按钮菜单

.input-group-btn包含下拉按钮菜单元素(包括触发器和下拉菜单)

<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
</ul>
</div>
<input type="text" class="form-control" />
</div>

额外元素为分裂式按钮下拉菜单

额外元素包含分裂式按钮下拉菜单(按钮,触发器和下拉菜单)

<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle">button</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
</ul>
</div>
<input type="text" class="form-control" />
</div>

导航

基类.nav  {padding-left/margin-bottom/list-style}

标签页导航

标签页类.nav-tabs  活动选项类.active 选项添加role="presentation"

<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#home">Home</a></li>
<li role="presentation"><a href="#profile">Profile</a></li>
<li role="presentation"><a href="#messages">Messages</a></li>
</ul>

胶囊式标签导航.nav-pills

<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#home">Home</a></li>
<li role="presentation"><a href="#profile">Profile</a></li>
<li role="presentation"><a href="#messages">Messages</a></li>
</ul>

胶囊式标签导航(堆叠状).nav-stacked

<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#home">Home</a></li>
<li role="presentation"><a href="#profile">Profile</a></li>
<li role="presentation"><a href="#messages">Messages</a></li>
</ul>

禁用的链接

对选项添加类.disabled

<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation" class="disabled"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

带下拉菜单的标签页面

在某一个选项中添加下拉菜单组件

<ul class="nav nav-*">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation" class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
Messages <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="">item1</a>
<a href="">item2</a>
</li>
</ul>
</li>
</ul>

下拉导航页面

外包元素>{[导航ul(基类.nav+样式类.*s)>选项li(基本选项role="persentation"+下拉选项)]+[选项对应内容]}

<div>
<ul class="nav nav-*s" role="tablist">
<li role="presentation" class="active"><a href="#item1" data-toggle="*">item1</a></li>
<li role="presentation"><a href="#item2" data-toggle="*">item2</a></li>
<li role="presentation"><a href="#item3" data-toggle="*">item3</a></li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
item4 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#item4-1" data-toggle="*">item4-1</a></li>
<li><a href="#item4-2" data-toggle="*">item4-2</a></li>
<li><a href="#item4-3" data-toggle="*">item4-3</a></li>
</ul>
</li>
</ul> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="item1">item1-content</div>
<div role="tabpanel" class="tab-pane" id="item2">item2-content</div>
<div role="tabpanel" class="tab-pane" id="item3">item3-content</div>
<div role="tabpanel" class="tab-pane" id="item4-1">item4-1-content</div>
<div role="tabpanel" class="tab-pane" id="item4-2">item4-2-content</div>
<div role="tabpanel" class="tab-pane" id="item4-3">item4-3-content</div>
</div>
</div>

[Bootstrap]组件(三)的更多相关文章

  1. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  2. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  3. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  4. Bootstrap之Bootstrap组件

    一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...

  5. 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  6. Bootstrap组件福利篇:十二款好用的组件推荐

    阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...

  7. bootstrap组件和插件

    一.用node.js读取文件 //引入fs模块 var fs= require ('fs'); // console.log(fs); //调用fs模块的readFile方法 fs.readFile( ...

  8. Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍

    地理定位/移动距离追踪组件 通过浏览器 API 获取定位信息 DEMO https://www.blazor.zone/geolocations 小提示 注意: 出于安全考虑,当网页请求获取用户位置信 ...

  9. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  10. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

随机推荐

  1. JavaEE系列之(二)commons-fileupload实现文件上传、下载

    一.文件上传概述     实现Web开发中的文件上传功能,需要两步操作:     1.在Web页面中添加上传输入项 <form action="#" method=" ...

  2. oc-15-匿名对象

    /** 匿名对象 1.访问成员变量--->只能给成员变量设置值,只能成功1次,每次都是新的对象. 2.调用方法时类似类方法: 跟类方法区别:匿名对象创建对象了,开辟空间了. */ #import ...

  3. NHibernate教程

    NHibernate教程 一.NHibernate简介 在今日的企业环境中,把面向对象的软件和关系数据库一起使用可能是相当麻烦.浪费时间的.NHibernate是一个面向.Net环境的对象/关系数据库 ...

  4. oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT_数据库的几种锁

    问题如下: SQL> conn scott/tiger@vm_databaseConnected to Oracle Database 11g Enterprise Edition Releas ...

  5. Linux 命令 alternatives和update-alternatives

    参考: http://lionbule.iteye.com/blog/717722 http://manpages.ubuntu.com/manpages/oneiric/man8/update-al ...

  6. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  7. Redis入门(集合)

    集合 Redis的集合是字符串的无序集合.在Redis您可以添加,删除和测试文件是否存在,在成员O(1)的时间复杂度. 例子 redis 127.0.0.1:6379> sadd tutoria ...

  8. linux_cpu信息查询

    查看cpu信息: [root@css-management ~]# cat /proc/cpuinfo processor : 0vendor_id : GenuineIntelcpu family ...

  9. VMware系统运维(四)SQL Server 2008 R2 新建数据库与ODBC数据

    1.新建数据库,右击"新建数据库-." 2.设置数据库名,初始数据库大小,如果要配置数据库优化,可以考虑初始大小与日志大小,点击添加安装完成,即完成数据库新建. 3.ODBC数据源 ...

  10. Centos安装配置Postfix邮件服务器

    发布时间:July 6, 2012 // 分类:Mail // No Comments 在安装邮件服务器之前先了解几个名词,以后会用到: 1 2 3 4 5 6 MUA:用户代理端,即用户使用的写信. ...