Bootstrap css3

最新推荐文章于 2025-04-19 20:21:01 发布

weixin_33758863

最新推荐文章于 2025-04-19 20:21:01 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/comefuture/p/6797736.html

本文介绍了Bootstrap框架中按钮、图片及文本等元素的样式定制方法，包括不同样式的按钮实现、图片修饰方式以及文本和背景的辅助类应用。

bootstrap的按钮

1.各种按钮样式的实例：

 1 <body>
 2     <!--基本样式的按钮-->
 3     <button type="button" class="btn">基本样式按钮</button>
 4     <!--默认样式的按钮-->
 5     <button type="button" class="btn btn-default">默认样式的按钮</button>
 6     <!--原始样式的按钮-->
 7     <button type="button" class="btn btn-primary">原始样式的按钮</button>
 8     <!--看起来像连接的按钮-->
 9     <button type="button" class="btn btn-link">看起来像链接的按钮</button>
10     <!--大的按钮-->
11     <button type="button" class="btn btn-lg">大的按钮</button>
12     <!--块的按钮-->
13     <button type="button" class="btn btn-block">块的按钮</button>
14     <!--被点击后的按钮-->
15     <button type="button" class="btn btn-default avtive">被点击后的按钮的按钮</button>
16 </body>

不建议在input下使用，不免跨浏览器的问题，尽量在button下使用。

bootstrap的图片

Bootstrap提供了三个用来简单修饰图片的方式。

.img-rounded:添加了border-radius：6px 来获取圆角图片
.img-circle:添加了border-radius:500px来获取圆形图片
.img-thumbnail:添加了内边距和灰色边框

 1 <body>
 2 <!--img-rounded-->
 3         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493868553155&di=7c317597dc850d8af
 4         229f6f8fcd7ac5b&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56125377d1f169287.jpg" class="img-rounded"
 5              width="300px" height="300px"
 6         >
 7 <!--img-circle-->
 8         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493868553155&di=7c317597dc850d8af
 9         229f6f8fcd7ac5b&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56125377d1f169287.jpg" class="img-circle"
10             width="300px" height="300px">
11 <!--img-thumbnail-->
12         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493868553155&di=7c317597dc850d8af
13         229f6f8fcd7ac5b&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56125377d1f169287.jpg" class="img-thumbnail"
14             width="300px" height="300px">
15 <!--img-responsive 图片响应式：max-width：100%和height：auto-->
16         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493868553155&di=7c317597dc850d8af
17         229f6f8fcd7ac5b&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56125377d1f169287.jpg" class="img-responsive"
18             width="300px" height="300px">
19 
20 </body>

辅助类

文本辅助类：

1 <!--设置文本的辅助类-->
2 <!--还有很多文本辅助类这里就不一一列举-->
3 <p class="text-muted">这是一段话</p>
4 <a href="#" class="text-muted">这是一段话</a>

背景辅助类：

1 <!--设置背景的辅助类-->
2 <!--还有很多背景辅助类这里就不一一列举-->
3 <p class="bg-info">这是一段话</p>
4 <a href="#" class="bg-info">这是一段话</a>

其他辅助类：

1 <!--设置其他的辅助类-->
2 <!--还有很多其他辅助类这里就不一一列举-->
3 <p class="pull-left">这是一段话</p>
4 <p class="pull-right">这是一段话</p>
5 <p class="center-block">这是一段话</p>
6 <p class="show">这是一段话</p>
7 <p class="close">这是一段话</p>