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

显示如下:

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

显示如下:

禁用:

大一些的

显示如下:

正常的:

显示如下:

小一些的:

显示如下:

按钮、图片:

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

显示:

btn写的样式:

预定义样式:

btn的样式写法:

btn-default写法:

btn-lg写法:

显示如下:

图片:

显示如下:

关闭按钮:

如果我们要写一个关闭按钮,需要很多行代码,但在bootstrap中为我们预定义好了,我们只需要遵循以下格式来写:

<button><span class="close">&times;</span></button>

显示如下:

hover时候的样式:

不加<button>标签显示在右上角:

hover时显示:

写法:

其实是加了个:

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

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

显示如下:

写法:

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

二invisible隐藏的还在文档流中:

显示:

总结:

bootstrap全局样式二的更多相关文章

  1. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  2. [Bootstrap]全局样式(二)

    具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size                    mar ...

  3. bootstrap全局样式

    内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...

  4. [Bootstrap]全局样式(五)

    辅助样式 1.情景文本色  .text-muted  .text-primary  .text-success  .text-info  .text-warning  .text-danger  {c ...

  5. [Bootstrap]全局样式(四)

    按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...

  6. [Bootstrap]全局样式(三)

    表格 1.基本类  .table  {width/margin-bottom/}  {padding/border-top} e.g.:<table class="table" ...

  7. [Bootstrap]全局样式(一)

    页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...

  8. bootstrap 全局样式

    reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...

  9. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

随机推荐

  1. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  2. 删除zabbix数据库日志

    #!/bin/bashuser="root"passwd="361way"timedate=`date -d $(date -d "-90 day&q ...

  3. kali-通过获取路由器pin码套取无线网络密码shell脚本

    直接上脚本吧, 我做个笔记. #************************************************************************* # > Fil ...

  4. svg---基础1

    svg:可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网制定,是一个开放标准. 官网:http://www.w3.org/2000/svg ...

  5. Linux Git用户组

    Vivien: groupadd admin useradd -d /home/bill -s /bin/bash -m bill 用户组 查看用户列表 cat /etc/passwd 或者 cat ...

  6. nginx 配置反向代理

    之前的前端是8123端口,使用此端口让nginx的反向代理. vim /etc/nginx/conf.d/80-fr.conf upstream cats{ server 127.0.0.1:8123 ...

  7. 关于bootstrap框架美化的实例教程(python)

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  8. 浏览器解析JavaScript的原理

    JavaScript的特点一般都知道的就是解释执行,逐行执行,就是从上到下依次执行. JavaScript的执行之前,其实还是有一些操作的,只是没有表现出来 JavaScript的执行过程: 1.语法 ...

  9. P4081 [USACO17DEC]Standing Out from the Herd

    思路 对所有串建立广义SAM,之后记录SZ,统计本质不同子串时只统计SZ=1的即可 代码 #include <cstdio> #include <algorithm> #inc ...

  10. 论文笔记: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 ...