bootstrap全局样式二
加form-grope是为了以后更好的管理,一组form写一个form-grope
显示如下:
并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-label,更好的居中显示:
显示如下:
禁用:
大一些的
显示如下:
正常的:
显示如下:
小一些的:
显示如下:
按钮、图片:
如果不加btn,直接写,btn-default,那么样式不会起作用:
显示:
btn写的样式:
预定义样式:
btn的样式写法:
btn-default写法:
btn-lg写法:
显示如下:
图片:
显示如下:
关闭按钮:
如果我们要写一个关闭按钮,需要很多行代码,但在bootstrap中为我们预定义好了,我们只需要遵循以下格式来写:
<button><span class="close">×</span></button>
显示如下:
hover时候的样式:
不加<button>标签显示在右上角:
hover时显示:
写法:
其实是加了个:
工作中少用!important ,他是优先级最高的,但是bootstrap中以class出现可以引用。
<span class="center-block" style="width: 200px; background: red;">这是元素</span>
显示如下:
写法:
hidden的隐藏不在文档流中,一般配合js,权限不够就看不见,权限够了就show
二invisible隐藏的还在文档流中:
显示:
总结:
bootstrap全局样式二的更多相关文章
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- [Bootstrap]全局样式(二)
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- bootstrap全局样式
内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...
- [Bootstrap]全局样式(五)
辅助样式 1.情景文本色 .text-muted .text-primary .text-success .text-info .text-warning .text-danger {c ...
- [Bootstrap]全局样式(四)
按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...
- [Bootstrap]全局样式(三)
表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} e.g.:<table class="table" ...
- [Bootstrap]全局样式(一)
页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...
- bootstrap 全局样式
reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
随机推荐
- MyBatis笔记(二) 最简单的insert命令
接上一篇随笔.这里没有用到MyBatis最关键的映射器接口,因此只做个简单的insert操作,update和delete同理,就不再赘述了. 直接上代码: 首先是dao包下的UserDAO.java文 ...
- 程序员 面试题【前端,java,php】
跬步客 网址:https://www.kuibuke.com/wall/index
- linux目录结构特点
#####linux目录结构特点一切从根开始linx中每个设备可以挂载在任何目录上面磁盘/设备/分区没有挂载 无法使用 举例-linux下面使用光盘###1.把光盘放入到光驱中 ###2.linux中 ...
- Java线程池ThreadPoolExecutor原理和用法
1.ThreadPoolExecutor构造方法 public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAli ...
- html5 浏览文件
var fileInput = document.getElementById('test-image-file'), info = document.getElementById('test-fil ...
- kali网络配置
touch 1.txt#创建一个文件 配置网卡 auto eth0iface eth0 inet staticaddress 172.16.30.102#要设置的主机IP地址netmask 255.2 ...
- kamailio 云部署 配置NAT
公有云配置NAT 第一步:将内网ip广播至公网ip,编辑/etc/kamailio/kamailio.cfg文件,搜索listen,添加如下配置 # listen=udp: listen= adver ...
- 【使用指南】ComponentOne Enterprise .NET开发控件集
为方便广大 .NET开发人员更好的使用 ComponentOne Enterprise .NET开发控件集,葡萄城专门推出了 ComponentOne Enterprise 使用指南,该指南详细地介绍 ...
- 如何只安装Postgresql client(以9.4 为例)
Install the repository RPM: yum install https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhe ...
- Java面试题之Java基础
1. JDK 和 JRE 有什么区别? JRE(JavaRuntimeEnvironment,Java运行环境),也就是Java平台.所有的Java 程序都要在JRE下才能运行.普通用户只需要运行已开 ...