基于bootstrop常用类总结(推荐)


Posted in Javascript onSeptember 11, 2017

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>

基于bootstrop常用类总结(推荐)

文字颜色(带有样式滑动效果)

.text-muted 灰色
.text-primary 浅蓝色
.text-success 绿色
.text-info 深蓝色
.text-warning 棕色
.text-danger 红色

列表

.list-style 无样式列表
.list-inline 列表浮动到一行

描述

基于bootstrop常用类总结(推荐)

<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

以上这篇基于bootstrop常用类总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
Node.js事件驱动
Jun 18 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
js友好的时间返回函数
Aug 24 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
js实现页面图片消除效果
Mar 24 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 #Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 #Javascript
vue系列之动态路由详解【原创】
Sep 10 #Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 #Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 #Javascript
js 发布订阅模式的实例讲解
Sep 10 #Javascript
You might like
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
JavaScript 原型继承
2011/12/26 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
python安装pil库方法及代码
2019/06/25 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
秋收起义观后感
2015/06/11 职场文书
大学班长竞选稿
2015/11/20 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS