基于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 检测元素是否存在的实例代码
Nov 19 Javascript
javascript动画算法实例分析
Jul 31 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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(1)
2006/10/09 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
加快Vue项目的开发速度的方法
2018/12/12 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
详解Django admin高级用法
2019/11/06 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
竞争上岗实施方案
2014/03/21 职场文书
低碳生活倡议书
2014/04/14 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
快递员岗位职责
2014/09/12 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
地球上的星星观后感
2015/06/02 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
调解协议书范本
2016/03/21 职场文书
netty 实现tomcat的示例代码
2022/06/05 Servers