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)功 ...
随机推荐
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- 删除zabbix数据库日志
#!/bin/bashuser="root"passwd="361way"timedate=`date -d $(date -d "-90 day&q ...
- kali-通过获取路由器pin码套取无线网络密码shell脚本
直接上脚本吧, 我做个笔记. #************************************************************************* # > Fil ...
- svg---基础1
svg:可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网制定,是一个开放标准. 官网:http://www.w3.org/2000/svg ...
- Linux Git用户组
Vivien: groupadd admin useradd -d /home/bill -s /bin/bash -m bill 用户组 查看用户列表 cat /etc/passwd 或者 cat ...
- nginx 配置反向代理
之前的前端是8123端口,使用此端口让nginx的反向代理. vim /etc/nginx/conf.d/80-fr.conf upstream cats{ server 127.0.0.1:8123 ...
- 关于bootstrap框架美化的实例教程(python)
经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...
- 浏览器解析JavaScript的原理
JavaScript的特点一般都知道的就是解释执行,逐行执行,就是从上到下依次执行. JavaScript的执行之前,其实还是有一些操作的,只是没有表现出来 JavaScript的执行过程: 1.语法 ...
- P4081 [USACO17DEC]Standing Out from the Herd
思路 对所有串建立广义SAM,之后记录SZ,统计本质不同子串时只统计SZ=1的即可 代码 #include <cstdio> #include <algorithm> #inc ...
- 论文笔记:ProxylessNAS: Direct Neural Architecture Search on Target Task and Hardware
ProxylessNAS: Direct Neural Architecture Search on Target Task and Hardware 2019-03-19 16:13:18 Pape ...