转自http://v3.bootcss.com/components/

bootstrap组件学习


矢量图标的用法<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

可同button结合使用


alert 组件中所包含的图标是用来表示这是一条错误消息的。

<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>

下拉菜单

在父元素中设置dropdown或者dropup类属性(其他可将父元素的position设置为relative的都可),将父元素的position设置为relative,这样下拉列表即可通过设置position为absolute,同父元素进行绝对定位。

下拉触发按钮设置data-toggle='dropdown'属性,插件会根据此属性查找触发按钮,并添加相关监听事件。

下拉列表设置dropdown-menu类属性,插件会搜寻触发按钮的父元素内的所有dropdown-menu,并同器触发事件管理。

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

.dropdown-menu-left

.dropdown-menu-right

.dropdown-header列表标题

<li role="separator" class="divider"></li>分割线


按钮组

.btn-toolbar按钮组的组

.btn-group按钮组

.btn-group-vertical垂直排列按钮组

.btn-group-justified两端对齐按钮组

.btn-group-(lg|sm|xs)按钮组大小

<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

按钮组也可以实现下拉菜单,同原下拉菜单的实现一样。


输入框组

.input-group里面增加元素

.input-group-addon,span文字或者input内容,可以使用此属性。

.input-group-btn,button使用此属性,因为有以下不兼容性问题,比如input-group-addon的内边距会导致显示问题。

使用.input-group-btn可实现按钮下拉菜单功能。

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
 

导航

.nav

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

.nav-tabs为标签式

.nav-pills为胶囊式

.nav-stacked为垂直堆叠式

.nav-justified为两端对齐式


导航条

.navbar

.navbar-default默认导航条颜色

.navbar-inverse反色导航条

导航内容<ul class="nav navbar-nav"></ul>

品牌图标<div class="navbar-header"></div>

表单<form class="navbar-form"></form>

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

文字<p class=".navbar-text"></p>

非导航连接<a class="navbar-link"></a>

.navbar-left和.navbar-right用于对齐

.navbar-fixed-(top|bottom)让导航条固定在顶部或底部


路径导航(breadcrumb)

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>


分页、翻页

在<nav>元素中使用ul显示分页信息,ul使用pagination类属性

ul使用.pager,显示翻页样式

<nav>
<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>
</nav>


标签、徽章

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<span class="badge">


警告

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

可关闭的警告

<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

警告框中的连接.alert-link


进度条

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
</div>

.progress-bar-success

.progress-bar-info

.progress-bar-warning

.progress-bar-danger

.progress-bar-striped

.active动态的


还有媒体对象(.media .media-list .media-left .media-object .media-heading .media-body)

列表组(.list-group .list-group-item .list-group-item-(success|info|warning|danger) .list-group-item-heading .list-group-item-text)

面板(.panel .panel-(success|info|warning|danger) .panel-heading .panel-title .panel-body .)

bootstrap组件学习的更多相关文章

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

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

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

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

  3. Bootstrap基础学习 ---- 系列文章

    [Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

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

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

  5. bootstrap 组件

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

  6. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  7. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

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

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  9. bootstrap组件 2

    bootstrap组件2 <!DOCTYPE html> <html lang="zh-cn"> <head > <meta charse ...

随机推荐

  1. three.js阴影

    <!DOCTYPE html> <html> <head> <title>Example 01.03 - Materials and light< ...

  2. 【原】iOS学习之Swift之语法1(精简版)

    1. Swift简介 2010年的夏天,苹果公司的开发人员Chris Lattne接到了一个特别的任务,为OS X 和iOS平台开发下一代的编程语言,也就是Swift. 苹果公司于2014年WWDC( ...

  3. iOSDay27之界面通信

    1. 属性传值(前面的界面给后面传值) 第一步: 在 SecondViewController.h 文件里定义一个存放传过来值的变量 contents #import <UIKit/UIKit. ...

  4. Storm实战集锦

    一.Kafka+Storm+HDFS整合实践 本文导读: 前言 Kafka安装配置 Storm安装配置 整合Kafka+Storm 整合Storm+HDFS 整合Kafka+Storm+HDFS 参考 ...

  5. 修改文档框架:word-多级列表与标题样式相结合

    转自:http://blog.sina.com.cn/s/blog_6721f25c0100nuf0.html 设置标题的时候希望出现多标题并且自动编号的标题,如下1.     XXXXXXXXXXX ...

  6. ACM 擅长排列的小明

    擅长排列的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...

  7. 野路子土鳖ASP.NETer谈互联网的发展趋势

    有些话别在憋在心里太久了,容易伤身体,总得找个借口吐槽一下,今日不小心看到园有关于互联网发函趋势的文章,作为一名ASP.NET程序员,自然要说说什么是趋势,机会找到了,好高兴. http://zzk. ...

  8. ubuntu 无声音的解决

    以下“失声疗法”是针对HDMI被设置为默认输出的情况: aplay -l 是用来查看音视频设备与卡号信息的: 然后 1.sudo gedit /etc/asound.conf 2.在文件中写入defa ...

  9. 最好的文本框样式 最漂亮的文本框样式 textbox css样式

    输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...

  10. Linux下安装JDK和tomcat

    1.新建用户 2.解压 jdk-7u67-linux-x64.tar.gz 到本地 3.配置环境变量 编辑.bash_profile文件 4.生效 5.安装tomcat 6.验证tomcat是否安装成 ...