加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

前端:Bootstrap框架

发布时间:2020-12-14 23:53:43 所属栏目:资源 来源:网络整理
导读:一,bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局,并且在V3版本之后坚持移动设备优先。 二,bootstrap全局样式 1,标题相关 1)标题 一级标题36px

一,bootstrap介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局,并且在V3版本之后坚持移动设备优先。

二,bootstrap全局样式

1,标题相关

  1)标题

一级标题36px

二级标题30px

三级标题24px

四级标题18px

五级标题14px
六级标题12px
=>一级标题36px =>二级标题30px =>三级标题24px =>四级标题18px =>五级标题14px =>六级标题12px

  2)副标题

一级标题小标题

2,文本对齐

文本左对齐 文本居中 文本右对齐

3,文本大小写

Lowercased text. Uppercased text. Capitalized text.

4,表格

5,状态类

6,按钮

Link Button

按钮样式

(默认样式)Default (首选项)Primary (成功)Success (一般信息)Info (警告)Warning (危险)Danger (链接)Link

按钮大小

(大按钮)Large button (大按钮)Large button (默认尺寸)Default button (默认尺寸)Default button (小按钮)Small button (小按钮)Small button (超小尺寸)Extra small button (超小尺寸)Extra small button

7,图片

图片形状

...

8,辅助类

p class="text-muted">...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="text-primary"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="text-success"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="text-info"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="text-warning"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="text-danger"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">><span style="color: #000000">
//背景颜色

<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="bg-primary"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="bg-success"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="bg-info"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="bg-warning"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p <span style="color: #ff0000">class<span style="color: #0000ff">="bg-danger"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">><span style="color: #000000">
//关闭按钮

<span style="color: #0000ff"><<span style="color: #800000">button <span style="color: #ff0000">type<span style="color: #0000ff">="button"<span style="color: #ff0000"> class<span style="color: #0000ff">="close"<span style="color: #ff0000"> aria-label<span style="color: #0000ff">="Close"<span style="color: #0000ff">><<span style="color: #800000">span <span style="color: #ff0000">aria-hidden<span style="color: #0000ff">="true"<span style="color: #0000ff">><span style="color: #ff0000">&times;<span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">></<span style="color: #800000">button<span style="color: #0000ff">><span style="color: #000000">
//下拉三角

<span style="color: #0000ff"><<span style="color: #800000">span <span style="color: #ff0000">class<span style="color: #0000ff">="caret"<span style="color: #0000ff">></<span style="color: #800000">span<span style="color: #0000ff">><span style="color: #000000">
//快速浮动

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="pull-left"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="pull-right"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">><span style="color: #000000">
//内容块居中

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="center-block"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">><span style="color: #000000">
//清除浮动

<span style="color: #008000">
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="clearfix"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">><span style="color: #000000">
//显示与隐藏

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="show"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="hidden"<span style="color: #0000ff">>...<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!