当前位置: 开发笔记 > 前端 > 正文

BootStrap整体框架之基础布局组件

作者：实现毛_424 | 来源：互联网 | 2022-01-25 18:32

这篇文章主要为大家详细介绍了BootStrap整体框架之基础布局组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1 基础布局组件

在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。
CSS组件，总结为8大类型的样式：
基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式

1.1基础样式

基本样式，一般包含文本字体，颜色背景，边框，定位等，如下面警告框：

//源码
.alert {
 padding: 15px;
 margin-bottom: 20px;
 border: 1px solid transparent;
 border-radius: 4px;
}

1.2颜色样式

看BootStrap官网的按钮btn或者alert警告框会发现许多组件默认的5种颜色样式：
primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
http://getbootstrap.com/examples/theme/

定义规则：组件名称-颜色类型，比如btn-primary，alert-info

//源码
.btn-primary {
 color: #fff;
 background-color: #337ab7;
 border-color: #2e6da4;
}

1.3尺寸样式

BootStrap为大部分组件都提供了尺寸的快捷设置。一般组件包含xs、sm、普通、lg四种尺寸
定义规则：组件名称-尺寸，比如btn-xs

//源码
.btn-lg,
.btn-group-lg > .btn {
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.3333333;
 border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
 padding: 5px 10px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
 padding: 1px 5px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}

1.4状态样式

高亮可用的时候用active样式，禁用的时候用disabled样式或disabled属性。

//源码
.btn:active,
.btn.active {
 background-image: none;
 outline: 0;
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

1.5特殊元素样式

所谓特殊元素，即特定类型的组件一般只使用某一种或者几种固定的元素。
比如：alert警告框内一般有警告标题、内容、关闭链接元素；nav导航中常用li元素

//源码
//alert内连接的样式
.alert .alert-link {
 font-weight: bold;
}
//alert内p元素和ul元素的底部外边距设置
.alert > p,
.alert > ul {
 margin-bottom: 0;
}
//两个段落之间，增加一个段落外边距
.alert > p + p {
 margin-top: 5px;
}
//增大右内边距，以便关闭按钮
.alert-dismissable,
.alert-dismissible {
 padding-right: 35px;
}
//关闭按钮，右对齐
.alert-dismissable .close,
.alert-dismissible .close {
 position: relative;
 top: -2px;
 right: -21px;
 color: inherit;
}

//源码
.nav > li {
 position: relative;
 display: block;
}
.nav > li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav > li.disabled > a {
 color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
 color: #777;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

1.6并列元素样式

很多情况下，一个组件内部需要放置多个子元素，比如导航栏nav里放置多个li元素，按钮组可以放置多个button元素。
一般并列元素考虑：1.水平并列时左右内边距(padding-left padding-right)和外边距(margin-left margin-right)2.垂直并列时上下内边距(padding-top padding-bottom)和外边距(margin-top margin-bottom)

//源码
.alert > p,
.alert > ul {
 margin-bottom: 0;
}
.alert > p + p {
 margin-top: 5px;
}



.modal-footer .btn + .btn {
 margin-bottom: 0;
 margin-left: 5px;
}

1.7嵌套子元素样式

需要将两个相同或不同的组件嵌套在一起使用，这时会有特殊情况，比如，多个按钮组在一起使用，或者按钮和下拉菜单一起使用。

需要考虑嵌套元素的使用情况。比如多个分组按钮一起使用的时候，需要考虑浮动方向和间距

//源码
//消除2个按钮(或一个按钮和另外一个按钮组)之间的1像素细节引起的冲突
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
 margin-left: -1px;
}

1.8动画样式

动画样式在BootStrap中的进度条progress组件中才使用到。


 
  45% complete

注意用.progress是总进度条，progress-bar是进度条显示的部分，还有五种颜色progress-bar-success等
sr-only，全称是 screen reader only（仅供）屏幕阅读器有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。

//源码
.progress {
 height: 20px;
 margin-bottom: 20px;
 overflow: hidden;
 background-color: #f5f5f5;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
 float: left;
 width: 0;
 height: 100%;
 font-size: 12px;
 line-height: 20px;
 color: #fff;
 text-align: center;
 background-color: #337ab7;
 -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
 -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
   transition: width .6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:  -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 -webkit-background-size: 40px 40px;
   background-size: 40px 40px;
}
.progress.active .progress-bar,
.progress-bar.active {
 -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
   animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
 background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:  -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
 background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:  -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
 background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:  -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
 background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:  -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

1.9总结

1.通常8种类型样式，需要组合使用，比如设置active状态时候还要兼顾颜色和尺寸样式，设置尺寸又要考虑并列元素的情况，所以从高层往下考虑，考虑需要写哪几种样式。
2.还有就是样式利用CSS重载覆盖的概念，注意定义的顺序，以免重载顺序错误。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

推荐阅读

html
如何在Ember.js中使用HBS模板

本文介绍了.hbs文件作为Ember.js项目中的视图层，类似于HTML文件的功能，并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]

蜡笔小新 2024-11-21 18:50:46
view
深入解析 Bootstrap Table 的使用技巧

本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作，包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]

蜡笔小新 2024-11-20 17:21:26
html
Bootstrap Paginator 分页插件详解与应用

本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件，提供了详细的使用指南和示例代码，旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]

蜡笔小新 2024-11-20 13:39:53
html
Bootstrap 轮播图(Carousel)组件详解与应用

Bootstrap 的轮播图（Carousel）组件提供了一种简单而灵活的方法，用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示，还兼容嵌入式框架、视频等多媒体内容。 ... [详细]

蜡笔小新 2024-11-20 11:50:55
bootstrap
解决Bootstrap引入问题导致的空白页

本文描述了在使用Bootstrap时遇到的一个常见问题：页面显示为空白。通过详细分析和解决方法，帮助开发者快速定位并解决问题。 ... [详细]

蜡笔小新 2024-11-17 04:32:42
html
CSS3 背景图片裁剪与定位技巧

本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片，以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]

蜡笔小新 2024-11-16 17:57:57
view
开发笔记:前端之前端初识

开发笔记:前端之前端初识 ... [详细]

蜡笔小新 2024-11-16 16:05:59
html
Bootstrap 缩略图展示示例

本文将展示如何使用 Bootstrap 实现缩略图效果，并提供详细的代码示例。 ... [详细]

蜡笔小新 2024-11-14 17:27:35
view
Python 数据可视化实战指南

本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]

蜡笔小新 2024-11-13 06:03:30
html
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
view
Ext JS MVC系列一：环境搭建与框架概览

本文主要介绍了如何在项目中使用Ext JS 4作为前端框架，并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]

蜡笔小新 2024-11-12 16:05:44
view
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
html
Bootstrap 是否支持自定义样式调整？

Bootstrap 支持用户自定义样式调整。即使长时间未使用 Bootstrap，也可以通过添加新的 CSS 类或覆盖现有类来轻松修改默认样式，以满足特定的设计需求。 ... [详细]

蜡笔小新 2024-11-11 20:11:31
html
深入解析浏览器内核与版本的发展历程

浏览器作为我们日常不可或缺的软件工具，其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程，帮助读者更好地理解这一关键技术组件，揭示其内部运作的奥秘。 ... [详细]

蜡笔小新 2024-11-11 13:34:37
html
在CentOS 6.6 64位系统上部署Tomcat 8服务器环境配置指南

本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位，采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz，建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤，适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ... [详细]

蜡笔小新 2024-11-08 21:38:15

实现毛_424

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章