颜色

--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40; .text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442) .bg-
div bg-secondary progress-bar-striped 背景 透明 模糊

大小

--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px; .lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小) .btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。

定位

.mt-3 	 margin-top: 1rem !important;
.h-100 height: 100% !important; .text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行 class .pull-right 向右对齐
class .pull-left 向左对齐 class .form-inline 内联
<xx class="xx-inline"><xx/>
eg: <form class="form-inline"> class .form-horizontal 水平
向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
eg: <form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">

js类

.text-lowercase	设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写 .initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.blockquote-reverse 设定引用右对齐 .list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行 .dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 .show 强制元素显示
.hidden 强制元素隐藏
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能

html样式

.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.active 按钮被点击
.disabled 禁用按钮

group

**-group
<**>
<**>
xx class="**-group-xx" 如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置:

bootsrap 样式笔记的更多相关文章

  1. CSS样式笔记

    组合样式,CSS继承 .content { padding:0 0 0 5px; line-height: 30px; height: 30px; border: 1px solid #a6bee7; ...

  2. CSS3主要的几个样式笔记

    1.边框:border-color:    设置对象边框的颜色.     使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X ...

  3. 前端学习(二)css样式笔记(笔记)

    background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...

  4. 前端笔记--css样式笔记

    一.浮动 定位布局 1.浮动布局 left 元素向左浮动 right 元素向右浮动 例如:设置2个按钮,要使得按钮在同一行位置摆放,可以使用浮动,令按钮浮动到右边.注意,先设置float的按钮,例如: ...

  5. div背景css样式笔记

    <style type="text/css"> .div1 { width: 1024px; height: 100%; margin: 0 auto; /*backg ...

  6. web 前端常用组件【04】Datetimepicker 和 Lodop

    web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...

  7. Bootstrap 实战之响应式个人博客 (一)

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

  8. CSS基础应用总结

    目录 CSS 样式笔记 文字水平居中和垂直居中 如何设置a标签不带下划线 控件右对齐 div上下居中 控件左右居中 控件展示在同一行 设置文字超出部分...显示 CSS 样式笔记 文字水平居中和垂直居 ...

  9. CloudNotes之桌面客户端篇:笔记撰写样式的支持

    最近在CloudNotes桌面客户端中新增了笔记撰写样式的功能.当用户新建笔记的时候,可以在输入笔记标题的同时,选择笔记撰写样式,由安装包默认提供的样式主要有默认样式(Default).羊皮纸样式(L ...

随机推荐

  1. Android Studio上传项目到GitHub出错

    上传代码到Github出错: 一.github push文件过大(超过50M会有警告,超出100M就会被限制) error: GH001: Large files detected. this exc ...

  2. PC,移动端H5实现实现小球加入购物车效果

    HTML部分: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  3. JavaScript学习系列博客_14_JavaScript中对象的基本操作

    对象的基本操作 - 创建对象 - 方式一:使用new关键字调用的函数,是构造函数(constructor),构造函数是专门用来创建对象的函数. var obj = new Object(); - 方式 ...

  4. client-go workqueue demo

    链接地址:https://github.com/kubernetes/client-go [root@wangjq examples]# tree . ├── create-update-delete ...

  5. MySQL数据库时间字段按年月日显示并多字段去重查询

    应用服务长久运行,难免要导出一些统计报表. 现在有一个日志表,记录了各种日志,需要导出十月份的登录日志,要求时间按日期显示,且每天用户登陆要去重. 先看日志表的字段构成: logType等于2的是登陆 ...

  6. A neural reinforcement learning model for tasks with unknown time delays

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Abstract 我们提出了一个基于生物学的神经模型,能够在复杂的任务中执行强化学习.该模型的独特之处在于,它能够在一个动作.状态转换和奖 ...

  7. kali安装open-vm-tools实现虚拟机交互

    普通的VMware tools 弱爆了 安装具有复制粘贴功能的open-vm-tools.servic: 切记:如果之前已经安装了VMware tools,一定要删除:vmware-uninstall ...

  8. 牛客网PAT练兵场-跟奥巴马一起编程

    题目地址: 题意:无 /** * *作者:Ycute *时间:2019-11-14-21.29.07 *题目题意简单描述:模拟题输出 */ #include<iostream> #incl ...

  9. 10分钟搞定 Java 并发队列好吗?好的

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  10. 扫盲--CRM系统和ERP系统的区别

    企业规模在逐步扩大的时候,为了提高生产和管理的效率,经常需要用到相关管理软件.很多企业管理者在选择管理软件的时候犯了难,面对CRM系统和ERP系统不知如何选择无法下手.那么,CRM和ERP的区别是什么 ...