加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. image management in kubernet

    Image How can I edit an existing docker image metadata? docker-copyedit Registry Disk kubevirtis a g ...

  2. centos7 harbor 单机搭建

    环境说明:centos 7.4 下面使用的域名是自己编造 可自行设置使用 域名在centos7.4 系统做解析 在windows vhost文件也做解析 分享压缩包  因github下载过慢  所以我 ...

  3. 通过KSoap三方插件解析WebService接口方法

    话不多说,正文如下: 1.在lib中放入ksoap2的jar包并导入 2.在xml 配置文件中加入: <!-- 访问网络的权限 --> <uses-permission androi ...

  4. JSESSIONID的简单说明

    原文地址:http://blog.csdn.net/chunqiuwei/article/details/23461995 1)第一次访问服务器的时候,会在响应头里面看到Set-Cookie信息(只有 ...

  5. HBase API 基础操作

    对于数据操作,HBase支持四类主要的数据操作,分别是: Put :增加一行,修改一行 Delete :删除一行,删除指定列族,删除指定column的多个版本,删除指定column的制定版本等 Get ...

  6. blogger添加代码高亮

    blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的 ...

  7. adb常用命令(转)

    1.Android Debug Bridge -adb常用命令 1.1简介 Android Debug Bridge,我们一般简称为adb,主要存放在sdk安装目录下的platform-tools文件 ...

  8. 四、ConcurrentHashMap 锁分段机制

    回顾: HashMap与Hashtable的底层都是哈希表,但是 HashMap:线程不安全 Hashtable:线程安全,但是效率非常低,且存在[复合操作](如"若存在则删除") ...

  9. DLL 破解工具

    1.Reflecter+Reflexil (第一类) 2.本文使用的工具下载地址为:(第二类) https://github.com/cnxy/dnSpy/archive/v4.0.0.zip 或 d ...

  10. 使用C#创建Windows服务 并发布Windows 服务

    一.开发环境 操作系统:Windows 10 X64 开发环境:VS2015 编程语言:C# .NET版本:.NET Framework 4.0 目标平台:X86 二.创建Windows Servic ...