bootstrap开发讲解

简介: bootstrap开发讲解

Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式,从而使我们的页面更美观和谐。

标题相关

标题
Class 描述
.table-striped 条纹状表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停变色的表格
.table-condensed 紧缩型表格
.table-responsive 响应式表格

栅格系统的工作原理:

“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

通过“行(row)”在水平方向创建一组“列(column)”。

你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

以jQuery 的UI为例:每一年更新一次。而Bootstrap则在不停地改进,更具规律性与持续性。Web开发者一发现新问题, Bootstrap团队便立刻着手修复它。

相关文章
|
7月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
77 0
|
5月前
|
开发框架 前端开发 JavaScript
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
|
4月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
36 0
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
Web App开发 前端开发 JavaScript
Web前端快速开发 Bootstrap 响应式UI框架
Web前端快速开发 Bootstrap 响应式UI框架
619 0
Web前端快速开发 Bootstrap 响应式UI框架
|
前端开发 JavaScript 容器
Bootstrap快捷开发【前端Bootstrap框架】
Bootstrap快捷开发【前端Bootstrap框架】
Bootstrap快捷开发【前端Bootstrap框架】
|
前端开发 JavaScript 容器
Bootstrap响应式框架,组件化开发
Bootstrap响应式框架,组件化开发
180 0
|
监控 前端开发 数据可视化
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
387 0
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
|
前端开发 JavaScript Python
python web开发 Bootstrap框架基础
python web开发 Bootstrap框架基础
314 0
python web开发 Bootstrap框架基础
|
移动开发 编解码 前端开发
Bootstrap教程(4)--开发标准的响应式网页
本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结
165 0
Bootstrap教程(4)--开发标准的响应式网页
下一篇
DataWorks