牛骨文教育服务平台(让学习变的简单)
博文笔记

Bootstrap基础知识(二)

创建时间:2017-07-27 投稿人: 15813632221 浏览次数:303

Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。

但是 Bootstrap 提供了一些选项来定义按钮的样式:

Bootstrap基础知识(二)

按钮的样式


按钮大小

获得各种大小按钮的 class:

Bootstrap基础知识(二)

按钮状态

  • 激活状态

按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

Bootstrap基础知识(二)

让按钮元素和锚元素呈激活状态的 class

  • 禁用状态

当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

Bootstrap基础知识(二)

让按钮元素和锚元素呈禁用状态的 class

按钮标签

可以在 <a>、<button> 或 <input> 元素上使用按钮 class;

但是建议在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题。

Bootstrap基础知识(二)


Bootstrap 图片

<img> 类

Bootstrap基础知识(二)

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。

图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上:

Bootstrap基础知识(二)


Bootstrap 辅助类

Bootstrap基础知识(二)


Bootstrap 下拉菜单

如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单。

Bootstrap基础知识(二)


欢迎大家纠正补充

Bootstrap基础知识(二)

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。