本文详细介绍了BootStrap中图片样式的应用，包括响应式图片、居中显示、圆角和圆形图片等。同时讲解了辅助类样式如文本颜色和背景颜色，以及清除浮动的方法。还涵盖了下拉菜单、按钮组、按钮式下拉菜单、输入框组、选项卡、路径导航和缩略图等CSS组件的使用，并提供了丰富的实例。
首先把模板代码上上来:
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：禁用的菜单项。
下拉菜单的应用
Java课
按钮组
.btn-group：按钮组(可以实现将一组按钮放在同一行)。
.btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。
按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs
.btn-group-vertical：垂直排列的按钮组。
按钮组的应用
按钮式下拉菜单
按钮式下拉菜单的应用
按钮
按钮
按钮
在这里呢，如果我们下拉菜单很多，就可以用滚动条来解决！
用overflow: auto;，然后定义一个高度就好。
输入框组
.input-group：只能用于文本框，不能用于和。
.input-group-addon用于在前后添加额外元素，赋给一个元素即可。
注意：将.input-group-addon和元素包在.input-group之中。
.input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。
.input-group-btn可以作为额外元素的按钮，应该是作为的父元素。
输入框组的应用
$
.00
Go!
Action
按钮
标签页(选项卡)
.nav是标签页的基类
.nav-tabs是标签页类样式
.active是标签页的状态类(当前样式)
.nav-pills胶囊式标签页
.nav-stacked胶囊式标签页堆放排列(垂直排列)
选项卡效果
路径导航
.breadcrumb：赋给
可以实现面包屑效果。
.active赋给当前栏目，当前栏目不加链接。
路径导航效果
分页
.pagination赋给
元素可以实现分页效果
« 上一页
» 下一页
.disabled禁用状态
.active激活状态
.pagination-lg分页大尺寸
.pagination-sm分页小尺寸
.pager可以实现翻页效果。上一页、下一页效果。
缩略图
.thumbnail赋给元素，可以实现缩略图样式。
.caption 可以实现缩略图标题及描述
缩略图效果
图片一
图片一
图片一
导航栏
导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！
.navbar：导航栏的基类，用于元素。
.navbar-default：导航栏默认样式，用于元素。
.container是的子元素。导航栏内容都放入其中。
.navbar-header：导航栏头部样式。
.navbar-brand：设置品牌图标样式
.collapse是折叠导航栏的样式的基类。
.navbar-collapse是折叠导航栏样式。
.nav是导航栏的链接基类。
.navbar-nav是导航栏的链接样式。
.navbar-from：导航栏表单，可以使表单元素排在同一行。
.navbar-left 或 .navbar-right ：组件排列。导航链接、表单、按钮或文本对齐。
.navbar-btn：对于不在
中的元素，实现垂直对齐。.navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于
元素。
.navbar-fixed-top：导航栏固定在顶部，用于元素。需要为设置padding-top:70px
.navbar-fixed-bottom：导航栏固定在底部，用于元素。需要为设置padding-bottom:70px;
.navbar-static-top：导航栏静止在顶部，用于元素。会随着滚动条移动而消失。
.navbar-inverse：可以实现反色导航栏，用于元素。
...
好了，然后直接上完整的源码:
完整的源码链接:
像学后台的，把这个BootStrap学到这里，然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
扫一扫
7272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
