bootstrap快速入门笔记(八)-按钮,响应式图片

一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-link

二,尺寸:.btn-lg, .btn-sm, .btn-xs和。.btn-block:可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

三,激活状态:对于<button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的

四,禁用状态:<button> 元素添加 disabled 属性,使其表现出禁用状态 disabled="disabled"

  但是在a元素的禁用用.disabled类;

五,图片

  1,响应式图片:

.img-responsive 类可以让图片支持响应式布局

    .center-block图片水平居中

  2,图片形状:**请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

.img-rounded:方形图片

    .img-circle:圆形图片

    .img-thumbnail:边框带空心的放心图片

六,辅助类

  情境文本颜色:

<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>

  情景背景色:.bg-primary...

  关闭按钮:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

  三角符号:<span class="caret"></span>

  快速浮动:.pull-left,  .pull-right

  导航条中浮动:.navbar-left 或 .navbar-right

  内容快居中:<div class="center-block">...</div>

  清除浮动:通过为父元素添加 .clearfix

  图片替换:<h1 class="text-hide">Custom heading</h1>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

1214
来自专栏西城知道

Photoshop快捷键大全 【转需】

PS是当今流行的图片处理工具..功能非常强大..也正是因为功能如此强大..所以有的时候会找不到一些功能在哪..浪费太多时间…

1001
来自专栏Keegan小钢

Android样式的开发:drawable汇总篇

Android有很多种drawable类型,除了前几篇详细讲解的shape、selector、layer-list,还有上一篇提到的color、bitmap、c...

1101
来自专栏知无涯

Adobe PS快捷键

2879
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

824
来自专栏栗霖积跬步之旅

HTML基础上

知识点一:HTML Hyper Text Markup Language  超文本标记语言。  HTML标准结构: < ! doctype html> 声...

2207
来自专栏keyWords

5、React组件事件详解

2.在React中,每个事件处理回调函数都会自动绑定到组件实例(使用ES6语法创建的例外);

3151
来自专栏ytkah

通过html<map>标签给图片加链接

前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html<map>标签给图片加链接 <img src="/images/hlj....

3785
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

2406
来自专栏Golang语言社区

Golang语言中Path包用法

// path package main import ( "fmt" "os" "path" "path/filepath" ) func mai...

3747

扫码关注云+社区

领取腾讯云代金券