Bootstrap 基础用法
目录
- Bootstrap 基础用法
- 什么是Bootstrap？
- 引入Bootstrap
- 布局容器
- 栅格系统
- 表格样式
- 表单样式
- text样式
- 按钮样式
- 图标
什么是Bootstrap？
Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求
v3官方文档库：官方书写好了大量现成的CSS样式以及组件
引入Bootstrap
cdn引入（仅演示v3版本）：
// 引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>// 引入Bootstrap的CSS文件
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">// 引入Bootstrap的JavaScript文件
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
布局容器
Bootstrap 提供了三种类型的容器：
.container、.container-fluid 和 .container-xl
-
.container是一个固定宽度的容器，其宽度根据不同设备的断点进行自适应调整 -
.container-fluid是一个占据全部可用宽度的容器，适用于全屏或宽度铺满的布局需求 -
.container-xl是一个额外宽度的容器，可以使用它来实现超出常规容器宽度的特殊布局
</head><style>.container{background-color: red;}.container-fluid{background-color: green;}.container-xl{background-color: yellow;}</style>
</head>
<body>
<div class="container">你好</div>
<div class="container-fluid">世界</div>
<div class="container-xl">再见</div>
</body>
栅格系统
-
栅格系统的基本单位是行（row）和列（column）
-
使用
.row类在容器内创建行，默认12列 -
使用
.col-*-*类将行划分为不同的列，其中第一个星号表示列在小屏幕上的占比，第二个星号表示列在中等屏幕上的占比col-xs：额外小屏幕col-sm：小屏幕col-md：中等屏幕col-lg：大屏幕
-
使用
offset可以将列向右移动指定数量的列数<head><style>.row{background-color: red;}.col-md-1{background-color: green;}</style> </head> <body> <div class="row"><div class="col-md-1">我是col1</div><div class="col-md-1 col-md-offset-1">我是col2，我右移了一位</div> </div> </body>
表格样式
.table 类创建基本的表格
<div><table class="table"><tr><td>a</td><td>a</td><td>a</td></tr><tr><td>b</td><td>b</td><td>b</td></tr></table>
</div>
.table-striped为表格的每一行添加斑马纹样式。.table-bordered创建带边框的表格.table-hover在鼠标悬停时对表格行进行高亮显示.table-sm创建紧凑型的表格.table-responsive创建响应式的表格，当表格内容超出容器宽度时会自动出现滚动条
表单样式
-
仅做部分演示，完整内容请前往v3官方文档库
-
在Bootstrap中表单样式优先考虑
.form-control，但是对radio和checkbox无效
text样式
示例：
<input type="text" class="text-primary">
-
.text-primary：设置文本颜色为主要颜色 -
.text-secondary：设置文本颜色为次要颜色 -
.text-light：设置文本颜色为浅色（通常用于暗色背景） -
.text-dark：设置文本颜色为深色（通常用于亮色背景） -
.font-weight-bold：设置文本字体为粗体 -
.font-italic：设置文本字体为斜体 -
.text-uppercase：将文本转换为大写字母 -
.text-lowercase：将文本转换为小写字母 -
.text-capitalize：将每个单词的首字母转换为大写 -
.text-left：左对齐文本 -
.text-right：右对齐文本 -
.text-center：居中对齐文本 -
.text-justify：两端对齐文本 -
.text-nowrap：防止文本换行，使其保持在一行内显示
按钮样式
示例：
<button type="button" class="btn btn-default">（默认样式）Default</button>
-
btn btn-default：默认样式 -
btn btn-primary：首选项 -
btn btn-success：成功 -
btn btn-info：一般信息 -
btn btn-warning：警告 -
btn btn-danger：危险 -
btn btn-link：连接 -
btn btn-primary btn-lg：大按钮 -
btn btn-default btn-lg：大按钮 -
btn btn-primary：默认尺寸 -
btn btn-default：默认尺寸 -
btn btn-primary btn-sm：小按钮 -
btn btn-default btn-sm：小按钮 -
btn btn-primary btn-xs：超小按钮 -
btn btn-default btn-xs：超小按钮
图标
- 图标类不能在同一个元素上与其他类共同存在
- 应创建一个嵌套的
<span>标签，并将图标类应用到这个<span>标签上
示例：
<!-- 在按钮中加上图标--><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
具体示例请参考官方图标库
