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学习中的整理的笔记,小白一枚,如有错误欢迎大家留言指出~
最新文章
- Redis使用及优化入门
- asp.net网站优化经验之谈
- 使用ViewPager实现屏幕滑动效果
- PHP生成静态页
- CountDownLatch线程阻塞用法实例
- 在windows 、linux下读取目录下所有文件名
- Env:zsh和fish安装和使用
- mac 下周期调度命令或脚本
- byte与sbyte的转换
- Lucene站内搜索的设计思路
- 全栈JavaScript路(八)得知 CDATASection 种类 节点
- Java学习6——基本数据类型及其转换
- HDU - 1175 bfs
- python读取文本文件数据
- C语言的引用计数与对象树
- MongoDB安装与使用体验
- python全栈开发中级班全程笔记(第二模块)第 二 部分:函数基础(重点)
- IRP小结 0x01 IRP &; IO_STACK_LOCATION(结合WRK理解)
- html5 javascript 表单练习案例
- WebService Client Generation Error with JDK8
热门文章
- day 49 数据分析, 数据聚合 F 查询 Q 查询
- 简单HOG+SVM mnist手写数字分类
- 点击按钮,生成一组一组combobox和slider时,避免控件Id相同,导致控件冲突的方法
- github的本地配置和项目创建
- SQL查询排名第二名的信息
- 【转】Spark:一个高效的分布式计算系统
- Python&;Appium实现安卓手机图形解锁
- 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
- IntelliJ IDEA使用心得之非Maven项目篇
- leetcode--539. Minimum Time Difference