前端框架Bootstrap

编程入门行业动态更新时间:2024-10-13 10:30:52

前端<a href=https://www.elefans.com/category/jswz/34/1770644.html style= 框架Bootstrap"/>

前端框架Bootstrap

该框架已经帮我们写好了很多页面样式，如果需要使用，只需要下载对应文件

直接CV拷贝即可

在使用Bootstrap的时候，所有的页面样式只需要通过修改class属性来调节即可

什么是Bootstrap

Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。
- 它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。
Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程。
- 它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。
使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局。
- 它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸。
- 此外，Bootstrap还提供了丰富的UI组件(如导航栏、按钮、表单、模态框等)，使开发人员能够轻松地在项目中使用这些现成的组件。
总而言之，Bootstrap是一个强大的开发工具，可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

Bootstrap引入

中文文档查询：/

CDN加速链接

twitter-bootstrap Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

压缩文档链接引入

.4.1/css/bootstrap.min.css

.4.1/js/bootstrap.min.js

注意

网络连接引入在本地不会提示相关的补充
下载本地文档较为友好

Bootstrap的js代码是基于jQuery的

在使用bootstrap做动态效果时一定要引入jQuery!!!

布局容器

布局容器是指用于组织和排列其他元素的容器或容器类。在前端开发中，常用的布局容器有以下三种：

块级布局容器(Block-Level Layout Container)：

块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。常见的HTML元素如、
、

等都是块级布局容器。块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。

行内布局容器(Inline Layout Container)：

行内布局容器会生成一个行内框，它可以使用display属性设置为"inline"或者"inline-block"。常见的HTML元素如、、等都是行内布局容器。行内容器会水平地从左到右排列，直到行的边缘，然后自动换行。

弹性布局容器(Flexbox Layout Container)：

弹性布局容器是CSS3中的一种新型布局技术，通过定义父元素作为弹性容器，将其子元素称为弹性项。弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。常见的属性包括：flex-direction、justify-content、align-items等。弹性布局容器的主要好处是可以实现响应式布局和灵活的排列方式。

留白

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src=".6.4/jquery.min.js"></script><script src=".4.1/css/bootstrap.min.css"></script><script src=".4.1/js/bootstrap.min.js"></script><style>.c1 {height: 1000px;width: 1000px;background-color: red;}.c2 {height: 1000px;width: 1000px;background-color: red;}</style></head>
<body>
<div class="container c1"></div> /*左右两侧有留白*/
<div class="container-fluid c2"></div> /*左右两侧没有留白*/
</body>
</html>

栅格系统

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--  本地 链接 引入方法  --><!--  Websource 文件夹 拷贝到当前文件夹下即可使用  --><script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script><script src="Websource\Bootstrap\js\bootstrap.min.js"></script><link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css"><!--  CDN 链接 引入方法  --><link rel="stylesheet" href=".4.1/css/bootstrap.min.css"><script src=".4.1/js/bootstrap.min.js">// bootstrap </script><script src=".6.4/jquery.min.js"> // jquery</script><style>.c1 {height: 100px;background-color: red;border: 5px solid black;}.c2 {height: 100px;background-color: green;}</style></head>
<body><div class="container"><div class="row"><div class="col-md-6 c1"></div><div class="col-md-6 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div></div></div></body>
</html>

<div class="row">
写一个 row 就是将所在区域划分成 12 份
<div class="col-md-6"></div>
写一个 col-md-6 获取想要的份数

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

排版

bootstrap在设置页面的时候将字体设置成了肉眼可以接受的好看一点的字体。

表单标签

针对form表单，加样式优先考虑form-control

按钮组

颜色

<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button><!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button><!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button><!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button><!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>

大小

<p><button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button><button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p><button type="button" class="btn btn-primary">(默认尺寸)Default button</button><button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p><button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button><button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p><button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button><button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

图片

形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

颜色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {&:before,&:after {content: " ";display: table;}&:after {clear: both;}
}// Usage as a mixin
.element {.clearfix();
}

图标

span标签

<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>