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 ...
随机推荐
- java的几种定时任务
本篇博文主要是讲述2.x 版本的quartz下的实现方案,1.x 版本的实现方式大致原理一致,但是具体的实现方式有些不一致,具体体现在获取 scheduler 这个类的方式上有些不同,这里不作过多的 ...
- 在.net core Mvc中使用Options和IOptionsSnapshot
1.Startup.cs 下代码 using System; using System.Collections.Generic; using System.Linq; using System.Thr ...
- QQ聊天框测试用例设计
QQ.微信聊天框的主要功能就是发送消息和接收别人发过来的消息. 消息内容类型: 纯文字 纯图片 纯表情 文字+表情 文件 发送键: 点击“发送”发送 使用快捷键发送(针对电脑端) 用户在线状态: 在线 ...
- WinForm—串口通讯
ialPort(串行端口资源) 常用属性: BaudRate 此串行端口上要使用的波特率 DataBits 每发送/接收一个字节的数据位数目 DtrEnable 在通讯过程中是否启用数据终端就绪(St ...
- L09-Linux系统修改网卡名称(eth1修改为eth0)
一.环境 VirtualBox + CentOS6.5 二.问题 有时候在克隆服务器之后配置网络时,或者在维护别人建好的服务器时,会遇到这样一种情况.如下图所示: 即:在接口配置文件ifcfg-e ...
- Python基础部分的疑惑解析——pycharm(4)
PyCharm部分设置: 1.安装后破解 2.创建的项目project实际上就是文件夹,可以在右键--show in explorer显示文件夹 3.右键-new--directory是建文件夹 ...
- HashMap、HashSet、LinkedHashSet、TreeSet的关系
类图及说明如下:
- Hadoop2.0.0+CDH4.5.0集群配置
Hadoop 2.0.0-cdh4.5.0安装:http://blog.csdn.net/u010967382/article/details/18402217 CDH版本下载:http://arch ...
- Linq基础知识小记二
书写Linq查询有两种方法,第一种是通过方法语法(也就是扩展方法),第二种是查询表达式语法. 1.方法语法 方法语法就是通过扩展方法和Lambda表达式来创建查询 (1).链式查询 这种查询方式很多语 ...
- Spark编程环境搭建(基于Intellij IDEA的Ultimate版本)(包含Java和Scala版的WordCount)(博主强烈推荐)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...