加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. PyCharm下使用Scrapy建立爬虫项目--MyFirstSpiderObject

    首先下载并安装Anaconda3以及PyCharm Anaconda3选中添加环境变量,如果忘记选中可以手动在path中添加如下环境变量 建文件夹scrapy 安装scrapy cmd进入对应目录,执 ...

  2. 如何在xlwt中编写多个列的单元格?

    目的,写下面的表格: ---------------- | Long Cell | ---------------- | 1 | 2 | ---------------- 如果下面这样写: sheet ...

  3. SpringBoot Tomcat启动报错

    中间的桥梁就是下面这个依赖 <dependency> <groupId>org.slf4j</groupId> <artifactId>jcl-over ...

  4. ARDUINO入门按键通信试验

    1.1按键实验 1.需要学习的知识: 1) Arduino 的输入口配置方法,配置函数的用法 通过pinMode()函数,可以将ADUINO的引脚配置(INPUT)输入模式 2) 搞懂什么是抖动 机械 ...

  5. Cent OS6下SS+BBR+改SSH端口

    SS+BBR+改SSH端口 (一)搭建SS wget --no-check-certificate -O shadowsocks-libev.sh https://raw.githubusercont ...

  6. wireshark基础学习—第四部分wireshark过滤器总结

    这两天一直在熟悉wireshark的过滤器语法规则,以前也接触过这个工具,但只是学校老师教的如何去选择一个接口进行抓取,以及如何去分析一个包的数据.可惜当时对此也没有过多深入.对于我当前,并未接触太多 ...

  7. MapReduce实现PageRank算法(邻接矩阵法)

    前言 之前写过稀疏图的实现方法,这次写用矩阵存储数据的算法实现,只要会矩阵相乘的话,实现这个就很简单了.如果有不懂的可以先看一下下面两篇随笔. MapReduce实现PageRank算法(稀疏图法) ...

  8. matlab 入门

    ---恢复内容开始--- 1.cast表示将元素转化成对应的ASCII值 如cast('hellothere','uint8')输出结果为104 101 108 108 111 116 104 101 ...

  9. C#异常重试通用类Retry

    //Retry机制 public static class Retry { /// <summary> /// 重试零个参数无返回值的方法 /// </summary> /// ...

  10. java8新的时间日期库及使用示例

    转自:https://www.cnblogs.com/comeboo/p/5378922.html 来自:Java译站 链接:http://it.deepinmind.com/java/2015/03 ...