Bootstrap学习笔记01
1、Make Images Mobile Responsive
用处: 使图片适配你的页面宽度。
操作: 给图片添加 .img-responsive class属性。
<img src="/images/cat.jpg" class="img-responsive">
2、Center Text with Bootstrap
用处: 使文本居中。
操作: 给文本添加 center-text class属性。
<p class="text-center">Hi, I'm Yamei.</p>
补充: .text-right、.text-left、.text-primary(文本内容带有个primary class)、.text-success、.text-muted(减弱)、.text-info、.text-warning、.text-danger
3、Create a Bootstrap Button
用处: 创建一个Bootstrap自己button风格的按钮。
操作: 给文本添加 btn class属性。
<button class="btn">Like</button>
效果如下:
4、Create a Block Element Bootstrap Button
用处: 块级按钮(拉伸至父元素100%的宽度)。 创建一个块级的按钮,按钮将会伸展并填满页面,任何在块之后的元素将会自动浮动到下一行(换行)。
原理如下图(图片来自fcc):
操作: 保留 .btn class属性,加入.btn-block。
<button class="btn btn-block">Like</button>
效果如下:
5、Taste the Bootstrap Button Color Rainbow
用处: 添加一个class为.btn-primary的原始(蓝色)按钮。
操作: 保留 .btn .btn-block class属性,加入.btn-primary。
<button class="btn btn-block btn-primary">Like</button>
效果如下:
补充: .btn-danger、.btn-warning(谨慎操作的按钮)、.btn-info(用于要弹出信息的按钮)、.btn-default、.btn-link(让按钮看起来像个链接,但仍然保持按钮的行为)、.btn-success
.btn-lg、.btn-sm、.btn-xs,分别为大、小、超小
.disabled 禁用按钮
.active 呈现按钮被点击的样子
(.active的效果图)
*以上是我个人在FCC学习中的整理的笔记,小白一枚,如有错误欢迎大家留言指出~
Bootstrap学习笔记01的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- C++ GUI Qt4学习笔记01
C++ GUI Qt4学习笔记01 qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...
- SaToken学习笔记-01
SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...
- Redis:学习笔记-01
Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...
随机推荐
- JavaScript函数学习总结(一)---函数定义
博客原文地址:Claiyre的个人博客 如需转载,请在文章开头注明原文地址 在许多传统的OO语言中,对象可以包含数据,还可拥有方法,也就是属于该对象的函数.但在JavaScript中,函数也被认为是一 ...
- JSP知识汇总
JSP知识汇总 一.简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进行交互,但是它不擅 ...
- 直接访问实例变量 VS 通过点语法访问实例变量
直接访问实例变量,不会经过 OC 的方法派发机制,速度比较块.会直接访问对象的实例变量对应的内存. 直接访问实例变量,不会调用"设置方法".绕过了相关属性对应的"内存管理 ...
- Python小白学习之路(六)—— 【元祖】【元祖相关功能】
元祖 tu = (111,'alex',(11,['aa','xhg',(78,43)],'aaa'),789,) 通过这个例子,我们看到元祖的特征: 是通过括号()括起来的 一般写元祖的时候,推荐子 ...
- Java抽象工厂模式
Java抽象工厂模式 基本定义 抽象工厂模式是所有形态的工厂模式中最为抽象和最其一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 ...
- (转)MySQL的Grant命令
[MySQL] - MySQL的Grant命令 来源:http://yingxiong.javaeye.com/blog/451208 本文实例,运行于 MySQL 5.0 及以上版本. MySQL ...
- 再学Java 之 形参个数可变函数
自Java 5后,Java允许定义形参个数可变的方法,从而允许运行过程中,为方法指定不确定个数的形参. 其定义方法的格式如下: void function_name ( type ... variab ...
- log4net udp
官方文档: http://logging.apache.org/log4net/release/config-examples.html 配置: <?xml version="1.0& ...
- Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解
不多说,直接上干货! Ubuntukylin-14.04-desktop(带分区)安装步骤详解 Ubuntu14.04安装之后的一些配置 Ubuntukylin-14.04-desktop( 不带分区 ...
- redis 安装报错 jemalloc/jemalloc.h: No such file or directory。
对于redis安装的这个错误,我在博客redis 安装 与错误解决办法最后有提及,但是网上大部分文章的对这个问题的解答都是有误的.所以在这里单列出来. 错误内容: jemalloc/jemalloc. ...