Bootstrap-全局样式 |学习笔记

简介: 快速学习 Bootstrap-全局样式

开发者学堂课程【移动Web前端开发Bootstrap-全局样式】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8447


Bootstrap-全局样式

一、全局样式

排版:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

首先排版的话,当 h1 到 h6,在 Bootstrap 中它有一个默认的样式,如下:

image.png

代码:

会通过给它设置一些特定的样式通过标签包裹内联样式的代码片段。

实例

For example, should be wrapped as inline.

For example,   should be wrapped as inline.

表格也有独属于自己的样子,在原始的默认表格上写上


image.png

表格就会转变为当前页面

这是通过类来控制表格,通过类控制表格样式,只需要记住常用的类就好了。

有默认样式的  ,也可加入样式。

隔行换色表格条纹状表格:

添加 table-bordered 类为表格和其中的每一个单元格增加边框。

想要这个格子浮动就添加一个类名,设置鼠标悬停也是一样的操作。

.active 鼠标悬停在行或单元格上时所设置的颜色

.success 标识成功或积极的动作

.info 标识普通的提示信息或动作

.warning 标识警告或需要用户注意

.danger 标识危险或潜在的带来负面影响的动作

下图是表单不同的颜色变换,这些常用的代码样式不需要记住,需要使用时在文档中找到即可。

image.png

表单会有一个默认的样式,当加入属性后就会转变为如下样式

image.png

按钮

默认样式的按钮或带颜色的按钮都是通过类来实现控制效果的

例 (默认样式)Default

图片

image.png

不管什么形状的图片都是通过类来控制的

相关文章
|
7月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
76 0
|
7月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
|
7月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
|
7月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
132 0
|
7月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
74 0
|
前端开发
如何去掉bootstrap table中表格样式中横线竖线
如何去掉bootstrap table中表格样式中横线竖线
125 0
|
前端开发
Bootstrap纯CSS3箭头按钮样式
Bootstrap纯CSS3箭头按钮样式
215 0