BootStrap 图片样式、辅助类样式和CSS组件的实例详解

前端之家收集整理的这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先把模板代码上上来:

<Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> 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:给

    按钮式下拉菜单

    在这里呢,如果我们下拉菜单很多,就可以用滚动条来解决!

    用overflow: auto;,然后定义一个高度就好。

    输入框组

    .input-group:只能用于文本框,不能用于