[Bootstrap]组件(三)
输入框组
添加额外元素.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]组件(三)的更多相关文章
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- Bootstrap之Bootstrap组件
一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- Bootstrap组件福利篇:十二款好用的组件推荐
阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...
- bootstrap组件和插件
一.用node.js读取文件 //引入fs模块 var fs= require ('fs'); // console.log(fs); //调用fs模块的readFile方法 fs.readFile( ...
- Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍
地理定位/移动距离追踪组件 通过浏览器 API 获取定位信息 DEMO https://www.blazor.zone/geolocations 小提示 注意: 出于安全考虑,当网页请求获取用户位置信 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
随机推荐
- JavaEE系列之(二)commons-fileupload实现文件上传、下载
一.文件上传概述 实现Web开发中的文件上传功能,需要两步操作: 1.在Web页面中添加上传输入项 <form action="#" method=" ...
- oc-15-匿名对象
/** 匿名对象 1.访问成员变量--->只能给成员变量设置值,只能成功1次,每次都是新的对象. 2.调用方法时类似类方法: 跟类方法区别:匿名对象创建对象了,开辟空间了. */ #import ...
- NHibernate教程
NHibernate教程 一.NHibernate简介 在今日的企业环境中,把面向对象的软件和关系数据库一起使用可能是相当麻烦.浪费时间的.NHibernate是一个面向.Net环境的对象/关系数据库 ...
- oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT_数据库的几种锁
问题如下: SQL> conn scott/tiger@vm_databaseConnected to Oracle Database 11g Enterprise Edition Releas ...
- Linux 命令 alternatives和update-alternatives
参考: http://lionbule.iteye.com/blog/717722 http://manpages.ubuntu.com/manpages/oneiric/man8/update-al ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- Redis入门(集合)
集合 Redis的集合是字符串的无序集合.在Redis您可以添加,删除和测试文件是否存在,在成员O(1)的时间复杂度. 例子 redis 127.0.0.1:6379> sadd tutoria ...
- linux_cpu信息查询
查看cpu信息: [root@css-management ~]# cat /proc/cpuinfo processor : 0vendor_id : GenuineIntelcpu family ...
- VMware系统运维(四)SQL Server 2008 R2 新建数据库与ODBC数据
1.新建数据库,右击"新建数据库-." 2.设置数据库名,初始数据库大小,如果要配置数据库优化,可以考虑初始大小与日志大小,点击添加安装完成,即完成数据库新建. 3.ODBC数据源 ...
- Centos安装配置Postfix邮件服务器
发布时间:July 6, 2012 // 分类:Mail // No Comments 在安装邮件服务器之前先了解几个名词,以后会用到: 1 2 3 4 5 6 MUA:用户代理端,即用户使用的写信. ...