Bootstrap框架（全）

创始人

2024-01-20 17:59:06

Bootstrap中文网：点我直达

Bootstrap菜鸟教程：点我直达

（一）Bootstrap标准模板：
（二）CSS样式区：
- 一、布局容器：
- 二、栅格系统：
- - 1.列组合：
  - 2.列偏移：
  - 3.列嵌套：
- 三、表格：
- 四、表单：
- - 1.单行文本框：
  - 2.多行文本框：
  - 3.下拉列表框：
  - 4.单选框：
  - 5.复选框：
  - 6.按钮：
  - 7.表单布局：
  - - （1）水平表单：
    - （2）内联表单：
- 五、略缩图：
- 六、面板：
- 七、常用样式—左右浮动：
- 八、常用样式—居中：
- 九、常用样式—显示或隐藏内容：
- 十、常用样式—字体：
- 十一、常用样式—字体颜色：
- 十二、常用样式—背景颜色：
- 十三、常用样式—列表：
- 十四、常用样式—代码：
（三）关于Bootstrap样式类的覆盖问题：
（四）JS插件区：
- 一、导航/分页导航：
- 二、下拉菜单：
- 三、模态框：
（五）图标区：

（一）Bootstrap标准模板：

下载Bootstrap 源码，将文件夹中的dist文件夹复制到项目中，并改名为bootstrap（为了使项目目录更清晰）。
使用bootstrap的css样式需要在HTML文件中引入bootstrap文件夹下的bootstrap.min.css文件。
使用bootstrap的js样式需要在HTML文件中引入bootstrap文件夹下的bootstrap.min.js文件，且需要引入jquery文件。


Bootstrap模板你好，世界！

（二）CSS样式区：

Bootstrap CSS中文文档：点我直达

一、布局容器：

布局容器是响应式的，页面会根据设备分辨率自动调整布局。
不建议布局容器的嵌套使用。


Bootstrap container不使用bootstrap默认效果
container样式类效果
container-fluid样式类效果

在这里插入图片描述

区别：
- 默认布局： 布局文件占据屏幕100%的宽度，字体内容紧贴布局左侧。
- container： 布局文件居中，左右会有留白效果，字体与布局文件之间留有空隙，且字体样式会有变化。
- container-fluid： 布局文件占据屏幕100%的宽度，字体与布局文件之间留有空隙，且字体样式会有变化。

二、栅格系统：

1.列组合：

页面每行被分为大小相同的12列，不同屏幕大小的设备都是12列，我们可以指定不同设备大小下每个组件使用的列数。
.col-xs-超小屏幕手机 (<768px) .col-sm-小屏幕平板 (≥768px) .col-md-中等屏幕桌面显示器 (≥992px) .col-lg-大屏幕大桌面显示器 (≥1200px)
数据行(.row)必须放在容器(.container)中，在行(.row)中可以添加列(.column)，且只有列(.column)才能作为行(.row)容器的直接子元素。每行列数超过12会自动换行。



container-row-column

占4个列
占8个列

在这里插入图片描述

2.列偏移：

使用 .col-md-offset- 样式类可以将列向右侧偏移，实际上是给列加了margin-left，使用时注意总列数不要超过12。



container-row-column

占4个列
占4个列

在这里插入图片描述

3.列嵌套：

每一列(column)可以再编程一行(row)，该行(row)又可以分为分为12列(column)。



container-row-column

占4个列
占6个列
占6个列

在这里插入图片描述

三、表格：

table样式类	效果
.table	添加表格样式
.table-striped	添加斑马线
.table-bordered	添加边框
.table-hover	鼠标悬停该行变色
.table-condensed	表格紧凑

tr样式类	效果
.active	灰色背景
.success	绿色背景
.info	蓝色背景
.warning	黄色背景
.danger	红色背景



Table

学号 班级 姓名
2021 软件202 张三
2022 软件203 李四
2023 软件204 王五
2024 软件205 老六

学号	班级	姓名
2021	软件202	张三
2022	软件203	李四
2023	软件204	王五
2024	软件205	老六

在这里插入图片描述

四、表单：

将label标签和前面提到的控件包裹在 .form-group 样式类的标签中可以获得最好的排列。

1.单行文本框：


单行文本框：

在这里插入图片描述

2.多行文本框：


多行文本框：

在这里插入图片描述

3.下拉列表框：


下拉列表框：

在这里插入图片描述

4.单选框：


 单选1    单选2


 单选1
 单选2

在这里插入图片描述

5.复选框：


 多选1    多选2


 多选1
 多选2

在这里插入图片描述

6.按钮：











超链接

在这里插入图片描述

7.表单布局：

规则：

向form标签添加role="form"。
label标签添加样式类class="control-label"，可以设置label标签的布局。
将label标签和前面提到的控件包裹在 .form-group 样式类的标签中可以获得最好的排列。

（1）水平表单：

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使.form-group表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。



Form

用户信息表
姓名 
班级 
城市
爱好 唱歌    跳舞
单选按钮 单选1
 单选2

在这里插入图片描述

（2）内联表单：



Form

姓名 
班级

在这里插入图片描述

五、略缩图：

略缩图需要添加.thumbnail样式类。



略缩图

天空
傍晚的天空如此的美丽
天空
傍晚的天空如此的美丽
天空
傍晚的天空如此的美丽
天空
傍晚的天空如此的美丽
天空
傍晚的天空如此的美丽
天空
傍晚的天空如此的美丽

在这里插入图片描述

六、面板：

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
一般配合略缩图来使用。

panel样式类	效果
.panel-info	浅蓝色背景
.panel-success	绿色背景
.panel-primary	蓝色背景
.panel-warning	黄色背景
.panel-danger	红色背景



面板

面板头
面板内容

在这里插入图片描述

七、常用样式—左右浮动：

这两个样式类底层被赋予 !important 最高优先级。



float

左浮动
右浮动或align="left" align="right"

在这里插入图片描述

八、常用样式—居中：



float

或align="center"

在这里插入图片描述

九、常用样式—显示或隐藏内容：

.show 和 .hidden 类可以强制任意元素显示或隐藏，使用了!important关键字。
.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能会占据页面的空间！！！。

show和hidden实际上控制的是display属性，invisible控制的是visibility属性，display属性设置为none控件不会占据页面空间，visibility属性设置为false控件仍会占据页面空间。



hide

显示
隐藏
隐藏

十、常用样式—字体：



Font

原字体，字体缩小，加粗字体，斜体，高亮，删除，下划线，强调,标题h1样式,标题h2样式,标题h3样式,
文字左对齐
文字居中
文字右对齐

在这里插入图片描述

十一、常用样式—字体颜色：



color

提示效果,使用浅灰色(#999)
主要效果,使用蓝色(#428bca)
成功效果,使用浅绿色(#3c763d)
通知效果,使用浅蓝色(#31708f)
警告效果,使用黄色(#8a6db)
危险效果,使用褐色(#a94442)

在这里插入图片描述

十二、常用样式—背景颜色：



color

主要效果,使用蓝色(#428bca)
成功效果,使用浅绿色(#3c763d)
通知效果,使用浅蓝色(#31708f)
警告效果,使用黄色(#8a6db)
危险效果,使用褐色(#a94442)

在这里插入图片描述

十三、常用样式—列表：



List

无序表项1
无序表项2
有序表项1
有序表项2
去点表项1
去点表项2
水平表项1
水平表项2
HTML：
超文本语言
CSS
样式语言
    HTML：
超文本语言
CSS
样式语言

在这里插入图片描述

十四、常用样式—代码：



Code

int a = 0;int a = 0;int b = 0;
    ctrl

在这里插入图片描述

（三）关于Bootstrap样式类的覆盖问题：

我们自己在写样式的时候有时候需要覆盖掉bootstrap自带的样式，CSS有个优先级，也就是说同一个标签引入的两个样式类中有重复的样式，CSS会根据优先级高低，优先级高的覆盖掉优先级低的样式。 所以这时候我们需要在需要显示的样式上加!important，这个关键字的作用是将样式优先级设置为最高，会覆盖掉原有样式。


边框

border是bootstrap自带的样式，表示设置边框，我们想覆盖掉这个边框样式则需要加!important。

（四）JS插件区：

Bootstrap自带JavaScript插件：点我直达
注：使用这些插件需要引入bootstrap的js包和jquery包，且必须先引入jquery包。

一、导航/分页导航：

基本样式：.nav与"nav-tabs"、"nav-pills"组合制作导航。
分类：
（1）标签型导航：.nav-tabs
（1）胶囊型导航：.nav-pills
（1）堆栈导航：.nav-stacked
（1）自适应导航：.nav-justified
（1）路径型导航：.breadcrumb
导航栏状态
（1）选中状态：.active
（2）禁用状态：.disable



导航

Home
Profile
Messages
Home
Profile
Messages
Home
Profile
Messages
Home
Profile
Messages
Home
Library
Data
«
1
2
3
4
5
»
Previous
Next

在这里插入图片描述

二、下拉菜单：

步骤：

使用一个样式类为.dropdown或.btn-group的div，包裹整个下拉菜单
默认向下.dropdown，向上.dropup
使用button作为父菜单，使用样式类.dropdown-toggle和自定义data-toggle属性指向1
在button中使用span制作下拉箭头
下拉菜单项使用一个ul列表，并且加入样式类.dropdown-menu
分组标题：li添加样式类.dropdown-header
分组分割线：li添加样式类.divider
对齐方式：
（1）.dropdown-menu-left 左对齐
（2）.dropdown-menu-right 右对齐
下拉表项选中状态.active，禁用状态.disabled


下拉菜单--下拉头1--
表项1
表项2
--下拉头2--
表项1
表项2
表项3

在这里插入图片描述

三、模态框：

用法：
**通过data属性：**在按钮或链接上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"通过模态框id来指定要唤醒的模态框。
通过javascript： 设置点击事件。



模态框

模态框（Modal）标题
在这里添加一些文本

在这里插入图片描述

（五）图标区：

Bootstrap图标：点我直达

bootstrap内置了很多图标，若想使用这些图标，我们只需要创建一个span标签，然后引入对应的样式类即可。
在这里插入图片描述



hide


 图标

在这里插入图片描述

上一篇：数据挖掘（六）层次聚类

下一篇：槲寄生落在山路上，枳椇落在伊名墙上

Bootstrap框架（全）

目录：

（一）Bootstrap标准模板：

你好，世界！

（二）CSS样式区：

一、布局容器：

二、栅格系统：

1.列组合：

2.列偏移：

3.列嵌套：

三、表格：

四、表单：

1.单行文本框：

2.多行文本框：

3.下拉列表框：

4.单选框：

5.复选框：

6.按钮：

7.表单布局：

（1）水平表单：

用户信息表

（2）内联表单：

五、略缩图：

天空

天空

天空

天空

天空

天空

六、面板：

七、常用样式—左右浮动：

八、常用样式—居中：

九、常用样式—显示或隐藏内容：

十、常用样式—字体：

十一、常用样式—字体颜色：

十二、常用样式—背景颜色：

十三、常用样式—列表：

十四、常用样式—代码：

（三）关于Bootstrap样式类的覆盖问题：

（四）JS插件区：

一、导航/分页导航：

二、下拉菜单：

三、模态框：

模态框（Modal）标题

（五）图标区：

相关内容

热门资讯