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团队便立刻着手修复它。

相关文章
|
前端开发 JavaScript 容器
Bootstrap响应式框架,组件化开发
Bootstrap响应式框架,组件化开发
140 0
|
前端开发 JavaScript 容器
Bootstrap快捷开发【前端Bootstrap框架】
Bootstrap快捷开发【前端Bootstrap框架】
Bootstrap快捷开发【前端Bootstrap框架】
|
前端开发 JavaScript Python
python web开发 Bootstrap框架基础
python web开发 Bootstrap框架基础
253 0
python web开发 Bootstrap框架基础
|
移动开发 编解码 前端开发
Bootstrap教程(4)--开发标准的响应式网页
本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结
127 0
Bootstrap教程(4)--开发标准的响应式网页
|
JSON 前端开发 JavaScript
Spring之路(26)–Spring Restful+jQuery+Bootstrap开发博客系统实例(前端开发篇)
本文目录 1. 概述 2. 配置访问静态资源 3. 建立html网页 4. 浏览博客功能实现 5. 删除博客实现 6. 新增博客实现 7. 编辑博客实现
157 0
Spring之路(26)–Spring Restful+jQuery+Bootstrap开发博客系统实例(前端开发篇)
|
SQL 前端开发 Java
Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)
本文目录 1. 前言 2.新增博客功能实现 3. 编辑博客功能的实现 4. 删除博客功能实现 5. 总结
174 0
Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)
|
前端开发 Java Spring
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
本文目录 1.背景 2. 浏览博客功能实现 3. 导入Bootsrap 4. 利用Bootstrap样式美化表格 5. 利用Bootstrap添加导航栏 6. 添加修改、删除链接 7. 总结
237 0
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
|
存储 Java 关系型数据库
Spring之路(21)–SpringMVC+Bootstrap开发博客系统实例(数据库模块实现)
本文目录 1. 背景 2. 导入jar包 3. 编写数据库操作组件 4. 编写博客数据类 5. 编写博客操作服务类 6. 总结
128 0
|
XML Java 数据库
Spring之路(20)–SpringMVC+Bootstrap开发博客系统实例(项目主体结构实现)
本文目录 1. 前言 2. 新建项目 3. 修改web.xml配置 4. 新建springmvc-config.xml文件 5. 根据规划的URL实现BlogController类 6. 根据规划的URL实现jsp页面类 7. 验证下 8. 总结
172 0
Spring之路(20)–SpringMVC+Bootstrap开发博客系统实例(项目主体结构实现)
|
架构师 Java 程序员
Spring之路(19)–SpringMVC+Bootstrap开发博客系统实例(数据库与URL设计篇)
本文目录 1. 概述 2. 数据库设计 3. URL设计 4. 遵守规范 5. 总结
141 0
Spring之路(19)–SpringMVC+Bootstrap开发博客系统实例(数据库与URL设计篇)