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>
响应式工具
响应式工具目前只适合块和表的切换。
时间： 2024-10-12 20:13:18