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的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  7. C++ GUI Qt4学习笔记01

    C++ GUI Qt4学习笔记01   qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...

  8. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...

  9. Redis:学习笔记-01

    Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...

随机推荐

  1. JavaScript函数学习总结(一)---函数定义

    博客原文地址:Claiyre的个人博客 如需转载,请在文章开头注明原文地址 在许多传统的OO语言中,对象可以包含数据,还可拥有方法,也就是属于该对象的函数.但在JavaScript中,函数也被认为是一 ...

  2. JSP知识汇总

    JSP知识汇总 一.简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进行交互,但是它不擅 ...

  3. 直接访问实例变量 VS 通过点语法访问实例变量

    直接访问实例变量,不会经过 OC 的方法派发机制,速度比较块.会直接访问对象的实例变量对应的内存. 直接访问实例变量,不会调用"设置方法".绕过了相关属性对应的"内存管理 ...

  4. Python小白学习之路(六)—— 【元祖】【元祖相关功能】

    元祖 tu = (111,'alex',(11,['aa','xhg',(78,43)],'aaa'),789,) 通过这个例子,我们看到元祖的特征: 是通过括号()括起来的 一般写元祖的时候,推荐子 ...

  5. Java抽象工厂模式

    Java抽象工厂模式 基本定义 抽象工厂模式是所有形态的工厂模式中最为抽象和最其一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 ...

  6. (转)MySQL的Grant命令

    [MySQL] - MySQL的Grant命令 来源:http://yingxiong.javaeye.com/blog/451208 本文实例,运行于 MySQL 5.0 及以上版本. MySQL ...

  7. 再学Java 之 形参个数可变函数

    自Java 5后,Java允许定义形参个数可变的方法,从而允许运行过程中,为方法指定不确定个数的形参. 其定义方法的格式如下: void function_name ( type ... variab ...

  8. log4net udp

    官方文档: http://logging.apache.org/log4net/release/config-examples.html 配置: <?xml version="1.0& ...

  9. Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解

    不多说,直接上干货! Ubuntukylin-14.04-desktop(带分区)安装步骤详解 Ubuntu14.04安装之后的一些配置 Ubuntukylin-14.04-desktop( 不带分区 ...

  10. redis 安装报错 jemalloc/jemalloc.h: No such file or directory。

    对于redis安装的这个错误,我在博客redis 安装 与错误解决办法最后有提及,但是网上大部分文章的对这个问题的解答都是有误的.所以在这里单列出来. 错误内容: jemalloc/jemalloc. ...