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)功 ...
随机推荐
- Javascript的千分位和去除千分位
1.转成千分位,保留两位 comdify(n) { let num = Number(n); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = num.toFixe ...
- BZOJ-1587|前缀和 预处理 dp||叶子合并leaves
叶子合并leaves Description 在一个美丽的秋天,丽丽每天都经过的花园小巷落满了树叶,她决定把树叶堆成K堆,小巷是笔直的 共有N片树叶(树叶排列也是笔直的),每片树叶都有一个重量值,并且 ...
- HTTP之gRPC
gRPC 官方文档 gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计. gRPC 基于 HTTP/2 标准设计,带来诸如双向流.流控.头部压缩.单 TCP 连接上的多 ...
- LINQ to Entities does not recognize the method 'System.DateTime AddDays(Double)' method, and this method cannot be translated into a store expression.
NormalSubmission=analysis.Count(x=>x.FinishTime<= endTime.AddDays(1))报错linq不能识别 => var endT ...
- 移动质量(MQ)测试系列
移动质量(MQ)测试 向移动开发者提供专业.稳定.全面.高价值的自动化测试平台. 发现 APP 中的各类隐患,包括 APP 崩溃.各类兼容性.功能性.性能问题等等. MQ 的 5 大功能(兼容性测试. ...
- structure streaming笔记
基于micro-batch, spark2.3之后, 支持continues processing 基于spark SQL 如同在静态table上运行标准批查询一样表现流计算, spark 通过在一个 ...
- mysql分库 分页查询
Mysql海量数据分表分库如何列表分页? 1.现在使用ElasticSearch了.基于Lucene的解决方案 2.必须将mysql里的数据写入到类似hbase这样的分布式数据库,查询快.但分页.查询 ...
- 《Java8实战》读书笔记
个人感悟: 1.lambda表达式,补充了JAVA在面向对象之外,面向过程的一面.在写面向过程代码的时候更方面了,甚至可以利用代码来做类似数学公式的运算(P64) 2.流,对集合的操作,就像用SQL对 ...
- C++_day9am
dynamic_cast static_cast reinterpret_cast #include <iostream> using namespace std; class A{ pu ...
- Qt551.OpenGL.ZC简单例子
1.主要 模仿代码:OpenGL的教程 第3课 "tutorial03_matrices"的代码(E:\OpenGL_something\ogl-master) 2.参考代码:Qt ...