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

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

首先把模板代码上上来:

图片样式

.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 可以清除浮动。

让内容块网页居中：

文字1

文字2

文字3

文字4

CSS组件

下拉菜单

.dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。

data-toggle属性：下拉菜单触发器。取值为“dropdown”。

.dropdown-menu：给

.dropup：向上弹出的下拉菜单(下拉菜单父元素)。

下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right

.divider：为下拉菜单添加分隔线，用于将多个链接分组。

.disabled：禁用的菜单项。

Java课

HTML

CSS

Java

Maven

mysql

Spring

按钮组

.btn-group：按钮组(可以实现将一组按钮放在同一行)。

.btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。

按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs

.btn-group-vertical：垂直排列的按钮组。

按钮一

按钮二

按钮三

按钮四

按钮五

按钮一

按钮二

按钮一

按钮二

按钮一

按钮二

按钮三

按钮式下拉菜单

按钮

按钮

按钮

按钮

按钮

按钮

按钮

按钮1

按钮1

按钮3

按钮2

按钮

按钮

按钮

按钮

按钮

按钮

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

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

输入框组

.input-group：只能用于文本框，不能用于和。

.input-group-addon用于在前后添加额外元素，赋给一个元素即可。

注意：将.input-group-addon和元素包在.input-group之中。

.input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。

.input-group-btn可以作为额外元素的按钮，应该是作为的父元素。

$

.00

Go!

Action

Action

Another action

Something else here

Separated link

按钮

按钮

按钮

按钮

按钮

标签页(选项卡)

.nav是标签页的基类

.nav-tabs是标签页类样式

.active是标签页的状态类(当前样式)

.nav-pills胶囊式标签页

.nav-stacked胶囊式标签页堆放排列(垂直排列)

Home

Profile

Messages

Home

Profile

Messages

路径导航

.breadcrumb：赋给

可以实现面包屑效果。

.active赋给当前栏目，当前栏目不加链接。

Home

Library

分页

.pagination赋给

元素可以实现分页效果

« 上一页

» 下一页

.disabled禁用状态

.active激活状态

.pagination-lg分页大尺寸

.pagination-sm分页小尺寸

.pager可以实现翻页效果。上一页、下一页效果。

← 上一页

«

1

2

3

4

5

6

7

8

9

10

»

下一页 →

«

1

2

3

4

5

6

7

8

9

10

»

缩略图

.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：导航栏固定在顶部，用于

.navbar-fixed-bottom：导航栏固定在底部，用于

.navbar-static-top：导航栏静止在顶部，用于

.navbar-inverse：可以实现反色导航栏，用于

Brand

欢迎光临

起步

CSS全局样式

组件

插件

网站案例

搜索

Link

Dropdown

Action

Another action

Something else here

Separated link

...

好了，然后直接上完整的源码:

完整的源码链接:

https://github.com/chenhaoxiang/BootStrap/tree/master/day3

像学后台的，把这个BootStrap学到这里，然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。