加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. Hadoop2-HDFS学习笔记之入门(不含YARN及MR的调度功能)

    架构 Hadoop整体由HDFS.YARN.MapReduce三大部分组成,推荐架构参考:https://www.cnblogs.com/zhjh256/p/10573684.html. 注:2.x的 ...

  2. No bean named 'dataSource' is defined

    jar包导入多了,导jar包只需引用一次,如果dao层引用了pojo,然后service只需引用dao就可以引用pojo,然后重新maven install  就好了 如果删除导入多余的jar包不行, ...

  3. Python入门经典案例一

    # 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? sum = 0 values = range(1, 5) for i in values: for j in valu ...

  4. [FJOI2018]领导集团问题 mulitset合并

    P4577 [FJOI2018]领导集团问题 链接 luogu bzoj 他是个重题 bzoj4919: [Lydsy1706月赛]大根堆 代码改改就过了 思路 求树上的lis,要好好读题目的!!! ...

  5. 51nod1363 最小公倍数之和

    题目描述 给出一个n,求1-n这n个数,同n的最小公倍数的和. 例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mo ...

  6. SQLAlchemy 增删改查 一对多 多对多

    1.创建数据表 # ORM中的数据表是什么呢? # Object Relation Mapping # Object - Table 通过 Object 去操纵数据表 # 从而引出了我们的第一步创建数 ...

  7. Git初识学习

    初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit ...

  8. webpack创建页面的过程

    1.项目文件夹中创建各类型文件放置的文件夹,如:iTestingWeb文件夹下创建src dist文件夹,用途:src为源码 dist为生成后的文件放置位置,然后在源码文件夹中进一步按文件类型增加文件 ...

  9. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  10. C#通过DocX创建word

    网上有一些基础的东西,但是比如插入图片,就没有找到方案,最终自己摸索出来的. 1.首先通过Nuget获取引用,关键字:“DocX” 2.示例代码 class Program { static void ...