BootStrap(2)——图片、辅助类、响应式工具、表单
来源:互联网 发布:如何卸载mysql数据库 编辑:程序博客网 时间:2024/06/05 00:34
Bootstrap图片
响应式图片
bootstrap3之后,通过向图片添加"img-responsive"
类,可以让它支持响应式布局。它的实质是为图片设置了"max-width;100%;"
、"height:auto"
、"display:block"
,从而让图片在它的父元素中更好地缩放。如果需要让”img-responsive”类的图片局中,使用".center-block"
而不是".text-block"
。
图片形状
通过为<img>
元素添加以下相应类
<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">
以上形状分别是圆角矩形、圆形、预览图。
辅助类
情景文本颜色
<p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p>
情景背景色
<p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div><div class="pull-right">...</div>
清除浮动
<!-- Usage as a class --><div class="clearfix">...</div>
阅读全文
0 0
- BootStrap(2)——图片、辅助类、响应式工具、表单
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类
- Bootstrap 辅助类和响应式工具
- bootstrap辅助类和响应式工具
- Bootstrap辅助类和响应式工具
- bootstrap辅助类和响应式工具
- Bootstrap-辅助类和响应工具
- Bootstrap-CSS-按钮-图片-辅助类-响应式
- Bootstrap之辅助类样式,响应式工具和小图标组件
- 【10】Bootstrap — 辅助类
- Bootstrap css学习笔记(四)——图片与辅助类
- Bootstrap笔记2—禁止响应、清除浮动、图片响应式、媒体查询
- bootstrap响应式工具
- bootstrap基本的CSS样式 图片 响应式工具
- bootstrap 学习笔记 - 4 (按钮 + 图片 + 辅助类)
- 第六章.辅助类和响应式工具
- Bootstrap学习-响应式工具
- Bootstrap小笔记 排版/辅助类/表单/导航
- Quartz学习(4)
- Maven + 各数据库连接driverClass、jdbcUrl、Maven依赖不完全记录
- Leetcode 32 Longest Valid Parentheses 解题报告。
- java中的访问修饰符
- maven 整合支付宝,导入alipay-sdk-java包到本地仓库
- BootStrap(2)——图片、辅助类、响应式工具、表单
- MySQL(二)yum源与rpm包方式安装
- 走进大前端:AngularJS 仿拉勾网 WebApp 开发移动端单页应用
- Oracle的常用SQL语句
- 画饼
- Httpclient介绍及使用
- 滚动条(2)
- CSDN开设博客专栏的方法
- 解决css中hover做遮盖罩闪动问题