BootStrap图片样式、辅助类样式和CSS组件的实例详解
首先把模板代码上上来:
创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目成都网站设计、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元刚察做网站,已为上家服务,为刚察各地企业和个人服务,联系电话:028-86922220
BootStrap基础入门
图片样式
.img-responsive:直接为图片添加该样式,可以实现响应式图片。
.center-block:图片居中样式,而不能使用text-center样式。
图片形状样式:.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)
图片样式应用
![]()
文字文字文字文字文字文字文字文字文字文字文字文字
辅助类样式
文本颜色类:.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger
背景颜色类:.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger
三角符号:
快速浮动类:.pull-left(左浮动)、.pull-right(右浮动)
清除浮动:为父元素添加 .clearfix 可以清除浮动。
让内容块网页居中:
CSS组件
下拉菜单
.dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。
data-toggle属性:下拉菜单触发器。取值为“dropdown”。
.dropdown-menu:给
- 指定下拉菜单的样式。
.dropup:向上弹出的下拉菜单(下拉菜单父元素)。
下拉菜单对齐方式:.dropdown-menu-left和.dropdown-menu-right
.divider:为下拉菜单添加分隔线,用于将多个链接分组。
.disabled:禁用的菜单项。
下拉菜单的应用
按钮组
.btn-group:按钮组(可以实现将一组按钮放在同一行)。
.btn-toolbar:按钮组工具栏(将多个按钮组放在其中)。
按钮组的尺寸:.btn-group-lg、.btn-group-sm、.btn-group-xs
.btn-group-vertical:垂直排列的按钮组。
按钮组的应用
按钮式下拉菜单
按钮式下拉菜单的应用
在这里呢,如果我们下拉菜单很多,就可以用滚动条来解决!
用overflow: auto;,然后定义一个高度就好。
输入框组
.input-group:只能用于文本框,不能用于