基于bootstrop常用类总结(推荐)
作者:阿轲 发布时间:2024-04-17 09:52:42
bootstrap前端开发工具
栅格系统
版心 .container
栅格布局 (一行分为12格,响应式布局)
.row
.col-md-12
.col-sm-12
.col-xs-12
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
排版
文本对齐:
.text-center;
.text-left;
.text-right;
块标签对齐:
.center-block;
.pull-left;
.pull-right;
排版样式:
h1 .page-header
small
p .lead
<h1 class="page-header">你好,世界!<small>你好,世界!</small></h1>
<p>百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。现在注册即有机会享受15G的免费存储空间</p>
<p class="lead">百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。现在注册即有机会享受15G的免费存储空间</p>
文字颜色(带有样式滑动效果)
.text-muted 灰色
.text-primary 浅蓝色
.text-success 绿色
.text-info 深蓝色
.text-warning 棕色
.text-danger 红色
列表
.list-style 无样式列表
.list-inline 列表浮动到一行
描述
<dl>
<dt>时间和教案课件课件啊</dt>
<dd>爱十分慢慢你就开始去喝酒后即可汉口几个号北京奥股份</dd>
</dl>
.dl-horizontal 水平排列的描述
表格
表格样式
.table
.table-hover
.table-bordered
.table-striped
表格的颜色
tr.active 灰色
tr.danger 红色
tr.warning 浅黄色
tr.success 绿色
表单
表单样式
div.from-grop
<div class="form-group">
<label for="nameid">name</label>
<input class="form-control input-lg" id="nameid" type="text" placeholder="name">
</div>
表单元素
input.form-control
input.input-lg
表单颜色
div.has-success
div.has-error
div.has-warning
多选框或单选框
<div class="checkbox">
<label>
<input type="checkbox" name="" value="">check me out
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="" value="">check me out
</label>
</div>
水平多选框
<div class="checkbox-inline">
<label>
<input type="checkbox" name="" value="">check me out
</label>
</div>
显示和隐藏
.show
.hidden
.sr-only
表单尺寸
.inuut-lg
.input-sm
按钮
button
input type="submit"
input type=button
input type=reset
a
七种样式
.btn btn-default
.btn btn-primary
.btn btn-success
.btn btn-info
.btn btn-warning
.btn btn-danger
.btn btn-link
按钮尺寸
.btn-lg
.btn-sm
.btn-xs
按钮变成块元素
.btn-block
按钮的活动状态
.active
按钮的禁用状态
.disabled
图片
img图片
.img-rounded
.img-circle
.img-thumbnail
img响应式图片
.img-responsive
关闭叉号
.close (×)
向下的小箭头
.caset
组件
下拉菜单
div.dropdown
button[data-toggle=dropdown]
ul.dropdown-menu
li.dropdown-header
li.disabled
li.divider
按钮组
div.btn-group
按钮工具栏
div.btn-toolbar
按钮尺寸
div.btn-group-lg
垂直排列
div.btn-group-vertical
按钮组中的下拉菜单
div.btn-group
button
button
div.btn-group
来源:http://www.cnblogs.com/a-ke/archive/2017/09/10/7502157.html
猜你喜欢
- 背景最近在负责开发维护的一款数据平台,有一个功能是把数据从某个源头数据源(如常规的JDBC数据源,MySQL,Oracle等)推到目地数据源
- 前言thinkphp3.1.2 需要使用cli方法运行脚本折腾了一天才搞定3.1.2的版本真的很古老解决增加cli.php入口文件defin
- 本文实例讲述了python随机生成指定长度密码的方法。分享给大家供大家参考。具体如下:下面的python代码通过对各种字符进行随机组合生成一
- 在使用爬虫爬取别的网站的数据的时候,如果爬取频次过快,或者因为一些别的原因,被对方网站识别出爬虫后,自己的IP地址就面临着被封杀的风险。一旦
- 不到40天,ChatGPT的日活量已突破千万!而当年同样引起轰动的Instagram达到这一成就足足花了355天。这代表着我们正在广泛且快速
- 本文实例为大家分享了python使用正则筛选信用卡的具体代码,供大家参考,具体内容如下本文来源于两个简单的题目:1.判断一对单词是否是&qu
- 代码如下:from PIL import Image #图像处理模块import numpy as npa = np.asarr
- 如何在约定时间显示特定的提示信息?<%Function Greeting()
- 对象Javascript 根本上是和对象相关的。数组是对象。函数是对象。对象是对象。那什么是对象呢?对象是名-值对的集合。名是字符串,值可以
- Centos7的yum源中默认是没有mysql,因为现在已经用mariaDB代替mysql了。首先我们下载mysql的repo源,我们可以去
- 最近,随着数据库的日益庞大,本来两个差不多的数据库,我开始发现我的数据库查询起来越来越比我朋友网站的慢了,经过初步对照,问题好像出在访问记录
- 这篇文章主要介绍了python StringIO如何在内存中读写str,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 一、修改操作系统核心参数在Root用户下执行以下步骤:1)修改用户的SHELL的限制,修改/etc/security/limits.conf
- 环境使用Python 3.8–> 解释器 <执行python代码>Pycharm–
- <script language=javascript> </script>
- 对于所有的需求,当你不知道怎么处理的时候,你就先用最简单的方法,或者说的明白一点,用最原始的方法,先实现业务需求再说。一、对提现队列数据表“
- 今天看一个水友说他的MySQL现在变的很慢。问什么情况时。说单表超过2个G的一个MyISAM。真垃圾的回答方式。 &n
- html页面一般都会指定一个编码,如何获取到是处理html页面的第一步,因为错误的编码必然带来后面处理的问题。这里我用python的正则表达
- 全选、全不选、反选这几个功能我们经常会用到,如我们可以用在文章列表管理页面,也可以用在音乐播放页面,使用全选我们可以很方便的进行批量操作,如
- Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x、纵轴为y的坐标系原点,(0,0)