bootstrap组件学习
转自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">×</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组件学习的更多相关文章
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
- C# BackgroundWorker组件学习入门介绍
C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...
- Bootstrap组件
1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
- bootstrap组件 2
bootstrap组件2 <!DOCTYPE html> <html lang="zh-cn"> <head > <meta charse ...
随机推荐
- three.js阴影
<!DOCTYPE html> <html> <head> <title>Example 01.03 - Materials and light< ...
- 【原】iOS学习之Swift之语法1(精简版)
1. Swift简介 2010年的夏天,苹果公司的开发人员Chris Lattne接到了一个特别的任务,为OS X 和iOS平台开发下一代的编程语言,也就是Swift. 苹果公司于2014年WWDC( ...
- iOSDay27之界面通信
1. 属性传值(前面的界面给后面传值) 第一步: 在 SecondViewController.h 文件里定义一个存放传过来值的变量 contents #import <UIKit/UIKit. ...
- Storm实战集锦
一.Kafka+Storm+HDFS整合实践 本文导读: 前言 Kafka安装配置 Storm安装配置 整合Kafka+Storm 整合Storm+HDFS 整合Kafka+Storm+HDFS 参考 ...
- 修改文档框架:word-多级列表与标题样式相结合
转自:http://blog.sina.com.cn/s/blog_6721f25c0100nuf0.html 设置标题的时候希望出现多标题并且自动编号的标题,如下1. XXXXXXXXXXX ...
- ACM 擅长排列的小明
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...
- 野路子土鳖ASP.NETer谈互联网的发展趋势
有些话别在憋在心里太久了,容易伤身体,总得找个借口吐槽一下,今日不小心看到园有关于互联网发函趋势的文章,作为一名ASP.NET程序员,自然要说说什么是趋势,机会找到了,好高兴. http://zzk. ...
- ubuntu 无声音的解决
以下“失声疗法”是针对HDMI被设置为默认输出的情况: aplay -l 是用来查看音视频设备与卡号信息的: 然后 1.sudo gedit /etc/asound.conf 2.在文件中写入defa ...
- 最好的文本框样式 最漂亮的文本框样式 textbox css样式
输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...
- Linux下安装JDK和tomcat
1.新建用户 2.解压 jdk-7u67-linux-x64.tar.gz 到本地 3.配置环境变量 编辑.bash_profile文件 4.生效 5.安装tomcat 6.验证tomcat是否安装成 ...