输入框组

添加额外元素.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. Winform模拟post请求和get请求登录网站

    引言 最近有朋友问如何用winform模拟post请求,然后登录网站,稍微想了一下,大致就是对http报文的相关信息的封装,然后请求网站登录地址的样子.发现自己的博客中对这部分只是也没总结,就借着这股 ...

  2. iOS开发——UI篇Swift篇&玩转UItableView(二)高级功能

    UItableView高级功能 class UITableViewControllerAF: UIViewController, UITableViewDataSource, UITableViewD ...

  3. oc-26-动态类型检测

    /** 1).判断对象是不是指定类的对象或者指定类的子类对象. - (BOOL)isKindOfClass:(Class)aClass; 2).判断对象是不是1个特定类型的对象,不包括子类. - (B ...

  4. 林子雨老师团队《Architecture of a Database System》 中文版

    http://dblab.xmu.edu.cn/post/architecture-of-a-database-system/

  5. C#分屏控件用法实例

    本文实例中的自定义类PictureBox继承于UserControl,最终实现简单的分屏功能.分享给大家供大家参考之用.具体实现代码如下: public partial class PictureCo ...

  6. C#中的预处理器指令详解

    这篇文章主要介绍了C#中的预处理器指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregio ...

  7. C# 模式窗口下更新进度条

    public partial class frmProcessBar : Form { public frmProcessBar() { InitializeComponent(); } public ...

  8. iOS- SQLite3的基本使用

    iOS- 简单说说iOS移动客户端SQLite3的基本使用  1.为什么要使用SQLite3?   •大量数据需要存储 •管理数据,存储数据   SQLite是一种关系型数据库(也是目前移动客户端的主 ...

  9. iOS 下拉刷新 上拉加载实现原理

    1.下拉刷新 实现原理 if (scrollView.contentOffset.y < -100) { [UIView animateWithDuration:1.0 animations:^ ...

  10. web前端开发(6)

    为了避免全局变量泛滥导致冲突,最简单有效的办法是用匿名函数将脚本包起来,让变量的作用域控制在函数之内.