加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. chocolatey使用

    chocolatey使用 安装 使用管理员权限打开CMD,输入: @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ( ...

  2. JDK一键部署, 新添加进度条

    JDK部署, 脚本与JDK安装包放在同一目录 然后执行 source ./jdk.sh 稍等进度条100%即可 #******************************************* ...

  3. SQL Server2017还原数据库时指定mdf文件及日志文件的名称

    由于需要还原同一个数据库的不同备份到不同数据库中,可是在还原的时候,可是在指定目标数据库时,填写不同的数据库名称,在SQL Server Data文件夹中生成的.mdf文件还是同一个,如图,虽然是很简 ...

  4. MongoDB --- 01. 安装, 第三方客户端

    一.安装 1.选择默认安装 ①完成后进入目录查看 "C:\Program Files\MongoDB\Server\3.4\bin" ② 配置环境变量 ③ 在 c盘创建目录(数据库 ...

  5. scrapy 爬虫的暂停与重启

    暂停爬虫项目 首先在项目目录下创建一个文件夹用来存放暂停爬虫时的待处理请求url以及其他的信息.(文件夹名称:job_info) 在启动爬虫项目时候用pycharm自带的终端启动输入下面的命令: sc ...

  6. company_credit

    /** * Created by wu-yj on 2016/5/6. */ import java.sql.{Connection, DriverManager, PreparedStatement ...

  7. OpenStack入门科普

    看完OpenStack入门科普,看这一篇就够啦!这篇文章,做些记录. 一.OpenStack简介:OpenStack就是为了云计算服务的.简单来说,它是一个操作系统,一套软件,一套IaaS软件. 1. ...

  8. 将nginx、mysql、php添加至环境变量

    1.问题描述: 修改完nginx配置后想重启nginx服务,执行nginx -s reload 返回了 -bash: nginx: command not found 2.原因: 没有配置环境变量,找 ...

  9. ArcGIS Pro开发Web3D应用(4)——Portal发布三维没有“发布”选项解决

    如题,将三维场景包.slpk上传并发布,未看到发布选项. 问题核心就在于环境没配置好,主要有2点: 1.验证联合托管状态 需要将托管服务器与Portal进行联合,并进行验证,此情况需要在WebAdap ...

  10. 6.4 SpringData JPA的使用

    引言:该文档是参考尚硅谷的关于springboot教学视屏后整理而来.当然后面还加入了一些自己从网上收集整理而来的案例! 一.SpringData JPA初步使用 1. springdata简介 2. ...