基于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 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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 快速生成 Flash 动画的方法
2007/03/06 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python求pi的方法
2014/10/08 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
公司门卫岗位职责
2014/03/15 职场文书
社区居务公开实施方案
2014/03/27 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
python实现简单倒计时功能
2021/04/21 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript