BootStrap布局组件
BootStrap字体图标(Glyphicons)
BootStrap下拉菜单:下拉菜单是可以切换的,是以列表格式显示链接的上下文菜单。
类 | 描述 |
.dropdown | 指定下拉菜单 |
.dropdown-menu | 创建下拉菜单 |
.dropdown-menu-right | 下拉菜单右对齐 |
.dropdown-header | 下拉菜单中添加标题 |
.dropup | 指定向上弹出的下拉菜单 |
.disable | 下拉菜单中的禁止项 |
.divider | 下拉菜单中的分割线 |
BootStrap按钮组允许多个按钮被堆叠在同一行上
类 | 描述 |
.btn-group | 形成基本的按钮组,可以在一个按钮组内嵌套另一个按钮组 |
.btn-toolbar | |
.btn-group-lg,.btn-group-sm,.btn-group-xs | 整个按钮组的大小调整,而不需要对每个按钮进行大小调整 |
.btn-group-vertical | 让一组按钮垂直堆叠显示 |
BootStrap按钮添加下拉菜单,在.btn_group中放置按钮和下拉菜单即可
各种大小按钮的下拉菜单:.btn-lg,.btn-sm,.btn-xs
按钮上拉菜单:向.btn-group容器添加.dropup
BootStrap输入框组:使用输入框组,可以向基于文本的输入框添加作为前缀和后缀文本或按钮
向.form-control添加前缀或后缀元素:1、将前缀或后缀元素放在一个带有class.input-group的div中
2、在相同的<div>内,在class为.input-group-addon的<span>内放置额外的内容
3、把<span>放置在<input>元素的前面或者后面
类 | 描述 |
.input-group | 输入框组 |
.input-group-lg | 输入框组的宽度为大 |
.input-group-sm | 输入框组的宽度为小 |
.input-hroup-btn | 包裹按钮和下拉菜单 |
表格导航或标签
创建一个标签式的导航菜单:以一个带有class.nav的无序列表开始,添加class.nav-tabs
类 | 描述 |
.nav nav-tabs | 标签页 |
.nav nav-pills | 胶囊式标签 |
.nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆列的 |
.nav-justified | 两端对齐的标签页 |
.disable | 禁用的标签页 |
带下拉菜单的胶囊标签页 | |
.tab-pane | 设置标签页对应的内容随标签的切换更改 |
.tab-content | 设置标签页对应的内容随标签的切换更改 |
BootStrap导航栏:向<nav>标签添加class .navbar .navbar-default,添加role="navigation"有助于增加可访问性,向<div>元素添加一个class .navbar-header
.navbar-form clas:确保了表单适当的垂直对齐和在较窄的视口中折叠的行为
class .navbar-btn向不在<form>中的<button>元素添加按钮
导航栏中的文本: class .navbar-text
结合图标的导航链接 class glyphicon glyphicon_*
组件对齐:class .navbar-left或.navbar-right
固定到顶部: .navbar class添加.narbar-fixed-top,固定到底部:.navbar class添加.narbar-fixed-bottom,静态的顶部:.navbar-static-top class
为了创建一个带有黑色背景白色文本的反色的导航栏,只需要简单地向 .navbar class 添加 .navbar-inverse class 即可
BootStrap中的面包屑导航是一个简单的带有.breadcrumb class的无序列表。
BootStrap支持分页特性,分页(Pagination),是一种无序列表,«前进图标,»后退图标
类 | 描述 |
.pagination | 添加该class来在页面上显示分页 |
.disable .active | 通过使用.disable来定义不可点击的链接,通过使用.active来指示当前访问的页面 |
.pagination-lg, .pagination-sm |
来获取不同大小的项 |
翻页
类 | 描述 |
.pager | 获得翻页链接 |
.previous,.next | .previous把链接向左对齐,使用.next把链接向右对齐 |
.disable | 禁止使用 |
BootStrap标签
类 | 描述 |
.label label-default | 默认灰色标签 |
.label label-primary | 蓝色标签 |
.label label-success | 绿色标签 |
.label label-info | 浅蓝色标签 |
.label label-warning | 黄色标签 |
.label label-danger | 红色标签 |
徽章(Badgs)主要用于突出显示新的或未读的项
当没有新的或未读的项时,通过css的empty选择器,徽章会折叠起来,表示里面没有内容
超大屏幕(Jumbotron):增加标题的大小
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距
警告(Alerts)向用户提供了一种定义消息样式的方式。
交替的进度条:
创建不同样式的进度条的步骤如下:
交替的进度条
- 添加一个带有 class .progress 的 <div>。
- 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中,* 可以是 success、info、warning、danger。
- 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置
条纹的进度条
- 添加一个带有 class .progress 和 .progress-striped 的 <div>。
- 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中,* 可以是 success、info、warning、danger。
- 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。
动画的进度条:
- 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
- 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。
- 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。
堆叠的进度条:把多个进度条放在相同的 .progress 中即可实现堆叠
在<div>元素上添加.media类来创建一个多媒体对象
.media-left让多媒体对象来实现左对齐,.media-right类实现了右对齐,.media-bottom让图片位于底部
.media-body:主体内容,.media-heading来设置标题.media-list媒体对象列表
向元素<ul>添加class .list-group,向<li>添加.list-group-item
向列表元素添加徽章:在<li>元素中添加<span class="badge">新</span>
创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可
BootStrap布局组件的更多相关文章
- 【BootStrap】 布局组件 II
BootStrap 布局组件 II ■ 分页 BS中通过.pagination的ul元素来实现一个分页集合,一个典型的分页如下: <ul class="pagination" ...
- 【BootStrap】 布局组件 I
BootStrap布局组件 I 除了在原生的HTML基础上进行了外观和类别上的改进,BS还包装了很多组件进库中,设计网页时我们可以方便地调用这些组件.下面来简略地介绍一下各种各样的组件 ■ 字体图标 ...
- Bootstrap Blazor 组件库 Row 布局组件(栅格系统)
原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...
- 详解Bootstrap缩略图组件及警示框组件
缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
- BootStrap布局案例
BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
随机推荐
- NPOI helper
using NPOI.HSSF.UserModel; using NPOI.HSSF.Util; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; ...
- Shiro的FormAuthenticationFilter登陆成功不跳转
http://jinnianshilongnian.iteye.com/blog/2024723 张开涛的这个配置信息有误,导致默认authc登陆成功后无法跳转 FormAuthenticationF ...
- 棒槌的工作第11天-----------------------单词(select和epoll)
https://baike.baidu.com/item/epoll/10738144?fr=aladdin epoll百科 https://baike.baidu.com/item/select%2 ...
- Python全栈开发记录_第五篇(装饰器)
单独记录装饰器这个知识点是因为这个知识点是非常重要的,必须掌握的(代码大约150行). 了解装饰器之前要知道三个知识点 作用域,上一篇讲到过顺序是L->E->G->B 高阶函数: 满 ...
- 2018-2019-2 20165205《网络对抗技术》Exp4 恶意代码分析
2018-2019-2 20165205<网络对抗技术>Exp4 恶意代码分析 实验要求 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中 ...
- python-day5内置模块time、range、sys、os、shelve、xml、max等
@os树状目录 import os,os.path def showdir(path,depth): if depth==0: print(path) for item in ...
- 学会使用box-sizing布局
盒子模型 关于CSS重要的一个概念就是CSS盒子模型.它控制着页面这些元素的高度和宽度.盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候.真正盒子的宽度(在页面呈现出来的宽度)和高度, ...
- Win7+ 电脑 休眠 自动唤醒
https://jingyan.baidu.com/article/3ea51489d905df52e71bba6b.html
- js 序列化
Python 序列化 字符串 = json.dumps(对象) 对象转字符串 对象 = json.loads(字符串) 字符串转对象 Javascript 字符串 = JSON.stringif ...
- VB6 二维数组去重实现
关于VB6的二维数组去重算法实现 当然,这里还是有局限性,当我们的数组被填满了各个不同的值时,例如下方 700*700 = 490000 就要While49万次,这谁受得了? 所以以下仅适合小规模使用 ...