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)功 ...
随机推荐
- selenium + python + nwjs
1.下载chromedriver文件 http://chromedriver.storage.googleapis.com/index.html google官方下载地址 http://dl.nwjs ...
- 02:安装 Kerberos
1.1 环境介绍 参考博客:https://www.cnblogs.com/xiaodf/p/5968178.html https://www.douban.com/note/701660289/ ...
- 面向复杂应用,Node.js中的IoC容器 -- Rockerjs/core
Rockerjs Core 项目地址 项目主页 基于 TypeScript 和注解的轻量级IoC容器,提供了依赖注入.面向切面编程及异常处理等功能.Rockerjs Core可在任意工程中引入,是一个 ...
- python面对对象
面对过程VS面对对象 面向过程的程序设计的核心是过程,过程就是解决问题的步骤,面向过程的设计就是考虑周全什么时候处理什么东西 优点:极大的降低了写程序的复杂度,只需要顺着要执行的步骤,堆叠代码即可. ...
- C#线程同步(4)- 通知&EventWaitHandle一家
文章原始出处 http://xxinside.blogbus.com/logs/47523285.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...
- 7.20 Codeforces Beta Round #8
链接:codeforces.com/contest/8 A 原因:RE,fantasy 的字符串的长度可能大于原字符串. B 题意:上下左右走,可能要避让障碍,问是否存在一个地图使得给定的路径为当前最 ...
- redis.exceptions.ConnectionError: Error 111 connecting to localhost:6379. Connection refused.
$ pip install redis>>> import redis>>> conn = redis.Redis()>>> conn.keys( ...
- 关于 Expression is not assignable 错误
1.在 Build Phases中导入 UIKit.framework 2.在pch中导入头文件 #import <UIKit/UIKit.h> 3.写一个分类 即可解决 贴出分类代码 ...
- kotlin 委托
委托模式是软件设计模式中的一项基本技巧.在委托模式中,有两个对象参与处理同一个请求,接受请求的对象将请求委托给另一个对象来处理. Kotlin 直接支持委托模式,更加优雅,简洁.Kotlin 通过关键 ...
- js基础和技巧记录
1.new Date(year, month, 0) 可以表示当前月份的最后一天 2.在一张绿色的图片上使用有奇效哦-webkit-filter: hue-rotate(-70deg) saturat ...