[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>
时间: 2024-10-11 04:59:42

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

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

前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~ 本文原创地址:http://www.cnblogs.com/landeanfen/p/5603790.html 七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红

bootstrap学习笔记--bootstrap组件

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

使用Net.Mail、CDO组件、JMail组件三种方式发送邮件

原文:使用Net.Mail.CDO组件.JMail组件三种方式发送邮件 一.使用Net.Mail 需要服务器认证,大部分服务器端口为25. 1 /// <summary> 2 /// 用MailMessage通过需要认证的SMTP服务器发送邮件,可以发送附件 3 /// </summary> 4 /// <param name="frmAddress">发件箱地址,例:[email protected]</param> 5 /// <

Bootstrap 组件中的导航条

先查看效果: 该导航条可以适应不同尺寸的页面(如手机屏幕.电脑屏幕)   实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor

Bootstrap 组件中的分页条

先查看效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de

bootstrap学习总结-css组件(三)

今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs.com/jtjds/ 一:导航组件 自己做了个导航,目前只有一级菜单,下一篇文章中,将给出二级菜单,涉及到js的插件,所以这里不在描述. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse

JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“dat

Bootstrap组件之媒体对象

.media--指定该元素包裹媒体对象组件: .media-left--设置媒体对象的多媒体内容居左: .media-right--设置媒体对象的多媒体内容居右: .media-middle--设置媒体对象的多媒体内容上下居中: .media-bottom--设置媒体对象的多媒体内容居底: .media-body--设置媒体对象的文本内容部分: .meida-heading--设置h4元素为文本内容的标题: .media-list--用来设置包裹媒体对象的列表元素: <!DOCTYPE html