bootstrap复习:组件
一、下拉菜单
1.实例:将下拉菜单触发器和下拉菜单都包裹在 .dropdown
里,或者另一个声明了 position: relative;
的元素。然后加入组成菜单的 HTML 代码。为下拉菜单的父元素添加 .dropup
类还可以让菜单向上弹出(默认是向下弹出)。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
</div>
2.对齐:默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu
添加 .dropdown-menu-right
类可以让菜单右对齐。
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
3.分割线:为下拉菜单添加一条分割线,用于将多个链接分组。
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
...
<li role="presentation" class="divider"></li>
...
</ul>
二、按钮组
1.实例:通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。
<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>
2.嵌套:想要把下拉菜单混合到一系列按钮中,只须把 .btn-group
放入另一个 .btn-group
中。
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
3.垂直排列:.btn-group-vertical可以让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
4.两端对齐排列的按钮组:.btn-group-justified可以让一组按钮两端对齐排列。为了将 <button>
元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中。
三、输入框组
1.通过在文本输入框 <input>
前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为.input-group赋予.input-group-addon 类,可以给.form-group的前面或后面添加额外的元素。
<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>
2.可以将多选框或单选框作为额外元素添加到输入框组中。
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
3.为输入框组添加按钮需要额外添加一层嵌套,不是 .input-group-addon,而是添加 .input-group-btn来包裹按钮元素。
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">GO!</button>
</span>
<input type="text"class="form-control" placeholder="Search for...">
</div>
四、导航
Bootstrap 中的导航组件都依赖同一个.nav类,状态类也是共用的。
1.标签页:使用.nav-tabs类可以创建一个普通标签页。
<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>
2.胶囊式标签页:使用使用.nav-pills类可以创建要给胶囊式标签页。
<ul class="nav nav-pills">
<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>
3.胶囊是标签页也是可以垂直方向堆叠排列的。只需添加.nav-stacked 类。
五、导航条
1.品牌图标:添加.nav-brand类。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
2.表单:将表单放置于.navbar-form之内可以呈现很好的垂直对齐。
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
3.按钮:对于不包含在 <form>
中的 <button>
元素,加上 .navbar-btn
后,可以让它在导航条里垂直居中。
4.固定在顶部:添加.navbar-fixed-top可以让导航条固定在顶部。
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
5.固定在底部:添加.navbar-fixed-bottom类可以让导航条固定在底部。
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
6.通过添加.nab-bar-inverse类可以改变导航条的外观。
<nav class="navbar navbar-inverse">
...
</nav>
六、分页
1.默认分页:
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
2.尺寸:.pagination-lg或.pagination-sm提供了额外可供选择的尺寸。
3.翻页:默认翻页中,链接居中对齐。
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
4.对齐链接:也可以通过.previous与.next将链接向两端对齐。
<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
七、标签
1.实例:
<h3>Example heading <span class="label label-default">New</span></h3>
八、徽章
1.给链接、导航等元素嵌套 <span class="badge">
元素,可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
九、巨幕
这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,请把此组件放在所有 .container
元素的外面,并在组件内部添加一个 .container
元素。
<div class="jumbotron">
<div class="container">
...
</div>
</div>
十、页头
1.实例:
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
十一、缩略图
1.添加.thumbnail类可以创建缩略图。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
十二、进度条
1.默认样式:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
2.带有提示的进度条:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
3.通过添加.progress-bar-striped可以创建进度条动画效果。
4.把多个进度条放进.progress中可以堆叠进度条。
十三、媒体对象
1.这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)。
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
2.图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
十四、列表组
1.实例:
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
2.徽章:给列表组加入徽章组件,它会自动被放在右边。
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
十五、面板
1.基本实例:
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
2.带标题的面板:通过添加.panel-heading可以很简单的为面板加入一个标题容器。
3.带脚注的面板:通过添加.panel-footer类,可以为面板加入注脚。
4.带表格的面板:为面板中不需要边框的表格添加.table类。
十六、具有响应式特性的嵌入内容
1.根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放。这些规则被直接应用在 <iframe>
、<embed>
、<video>
和 <object>
元素上。如果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的 .embed-responsive-item
类。
bootstrap复习:组件的更多相关文章
- JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
- 详解Bootstrap缩略图组件及警示框组件
缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- Bootstrap Blazor 组件库 Row 布局组件(栅格系统)
原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...
- JS组件系列——分享自己封装的Bootstrap树形组件:jqTree
前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第 ...
- Bootstrap Chart组件使用分享
图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的,不过功能上差不多能满足我们项目的需要.下面这段JS ...
随机推荐
- Redmine插件及使用
Plugins Plugin list A full list of available Redmine plugins can be found at the Plugin Directory. M ...
- 黄聪:VPS服务器好备份工具配置
- servlet笔记,配置与 http相关
tomcat配置环境变量: JAVA_HOME= 指向你的jdk的主目录(bin目录的上一层) server.xml: <Context path="/myweb2&qu ...
- Ubuntu中Qt5.7.0无法输入中文
把libfcitxplatforminputcontextplugin.so复制到安装的Qt目录下的两个文件夹中 sudo apt install fcitx-frontend-qt5 sudo cp ...
- shrio配置说明
1.引入Shiro的Maven依赖 <!-- Spring 整合Shiro需要的依赖 --> <dependency> <groupId>org.apache.sh ...
- 【IE6的疯狂之九】li在IE中底部空行的BUG
曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...
- [DP优化方法之斜率DP]
什么是斜率dp呢 大概就把一些单调的分组问题 从O(N^2)降到O(N) 具体的话我就不多说了 看论文: http://www.cnblogs.com/ka200812/archive/2012/08 ...
- Objective-C Runtime 运行时之一:类与对象(转载)
Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一 ...
- ios 显示其他app的购买页面
using UnityEngine; using System.Collections; using System.Runtime.InteropServices ; public class IOS ...
- 101个linq例子
FirstOrDefault - Simple public void Linq61() { int[] numbers = { }; int firstNumOrDefault = numbers. ...