bootstrap全局样式二

加form-grope是为了以后更好的管理,一组form写一个form-grope

显示如下:

并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-label,更好的居中显示:

显示如下:

禁用:




大一些的
显示如下:

正常的:

显示如下:

小一些的:

显示如下:
按钮、图片:

如果不加btn,直接写,btn-default,那么样式不会起作用:

显示:

btn写的样式:

预定义样式:



btn的样式写法:

btn-default写法:

btn-lg写法:



显示如下:

图片:


显示如下:
关闭按钮:
如果我们要写一个关闭按钮,需要很多行代码,但在bootstrap中为我们预定义好了,我们只需要遵循以下格式来写:
<button><span class="close">×</span></button>

显示如下:
hover时候的样式:
不加<button>标签显示在右上角:

hover时显示:


写法:


其实是加了个:
工作中少用!important ,他是优先级最高的,但是bootstrap中以class出现可以引用。

<span class="center-block" style="width: 200px; background: red;">这是元素</span>
显示如下:

写法:

hidden的隐藏不在文档流中,一般配合js,权限不够就看不见,权限够了就show
二invisible隐藏的还在文档流中:

显示:

总结:

bootstrap全局样式二的更多相关文章
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- [Bootstrap]全局样式(二)
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- bootstrap全局样式
内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...
- [Bootstrap]全局样式(五)
辅助样式 1.情景文本色 .text-muted .text-primary .text-success .text-info .text-warning .text-danger {c ...
- [Bootstrap]全局样式(四)
按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...
- [Bootstrap]全局样式(三)
表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} e.g.:<table class="table" ...
- [Bootstrap]全局样式(一)
页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...
- bootstrap 全局样式
reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
随机推荐
- [Offer收割] 编程练习赛63
题目1 : 命名 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 有两个公司想要合并,第一个公司的名字是一个字符串S,第二个公司的名字是一个字符串T. 合并后的新公司是这样 ...
- Mac appStore下载软件报500错误的解决方法
Step1.打开"启动台": Step2:打开"其他": Step3:打开"终端": Step4:复制如下代码,主要不要作任何更改,不要有多 ...
- CSC 172 (Data Structures and Algorithms)
Project #3 (STREET MAPPING)CSC 172 (Data Structures and Algorithms), Spring 2019,University of Roche ...
- C# readonly与const区别
静态常量:是指编译器在编译时候会对常量进行解析,并将常量的值替换成初始化的那个值. 动态常量的值则是在运行的那一刻才获得的,编译器编译期间将其标示为只读常量,而不用常量的值代替,这样动态常量不必在声明 ...
- C#Razor模板引擎简单使用
引用 install-package RazorEngine 使用 public class TestDemo { private string name; public int Age { get ...
- 支持向量机(Support Vector Machine):对偶
前言 学SVM看到对偶问题的时候很难受,因为看不懂,数学知识真的太重要了.后来在B站看到某up主的精彩推导,故总结如下. SVM基本型 由之前最大化间隔的计算可得SVM的基本型为: $\underse ...
- Matplotlib.pyplot 把画图保存为图片
在plt.show()之前执行plt.savefig()函数即可. 简单例子: import matplotlib.pyplot as plt x=[1,2,3,4,5] y=[10,5,15,10, ...
- 在linux上运行网页程序及日志文件查看
- APScheduler——定时任务框架
https://www.cnblogs.com/luxiaojun/p/6567132.html
- 方差分析 | ANOVA | 原理 | R代码 | 进阶 | one way and two way
原理 比较两组就用t-test,比较三组及以上就用ANOVA.注意:我们默认说的都是one way ANOVA,也就是对group的分类标准只有一个,比如case和control(ABCD多组),tw ...