E008Web开发框架-Bootstrap

訾博ZiBo

发布于 2025-01-06 14:51:17

8100

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、概述

1、简介

Bootstrap是一个前端开发框架；

2、框架

一个半成品的软件，开发人员可以在框架基础上再进行开发（借助框架，简化编码）；

3、使用Bootstrap的好处

（1）Bootstrap定义了很多css样式和js插件。我们可以直接使用这些样式和插件轻松的编写出优美的网页；

（2）响应式布局；同一个页面可以兼容不同尺寸（分辨率）的屏幕，自动适配布局；

4、Bootstrap快速入门

第一步：下载Bootstrap，中文官网网址https://www.bootcss.com/；

第二步：复制三个文件夹到自己的项目中；

第三步：创建HTML文件，引入必要的资源文件；

基本入门代码模板：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Hello</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="bootstrap.min.js"></script>
  </head>
  <body>
    <h1>你好，世界！</h1>

  </body>
</html>

二、栅格系统

1、实现：

依赖于栅格系统

2、栅格系统简介：

将一行平均分成12个格子，可以指定元素占几个格子；

3、使用步骤

第一步：定义容器。相当于HTML的table；

容器分类：
container：两边自适应宽度的留白；
container-fluid：每种设备都是100%宽度；

第二步：定义行。相当于之前的tr；

样式：row

第三步：定义元素，指定该元素在不同的设备上所占的格子数目；

样式：col-设备代号-格子数目

设备代号：
1、xs：超小屏幕 手机（<768px）；
2、sm：小屏幕 平板（>=768px）；
3、md：中等屏幕 桌面显示器（>=992px）；
4、lg：大屏幕 大桌面显示屏（>=1200px）；

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>栅格系统</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="bootstrap.min.js"></script>
	<style type="text/css">
		.inner{
			border: 2px solid #46B8DA;
		}
	</style>
  </head>
  <body>
	<!-- 第一步：定义容器 -->
	<div class="container-fluid">
		<!-- 第二步：定义行 -->
		<div class="row">
			<!-- 第三步：定义元素 -->
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
			<div class="col-lg-1 col-sm-2 inner">
				栅格
			</div>
		</div>
	</div>
  </body>
</html>

4、注意事项

①一行若格子数目超过12个，则超出部分会自动换行；

②栅格类属性可以向上兼容（>=）；

③如果真实设备的宽度小于设置的栅格类属性的设备代号的最小值，则一个元素占满一行；

三、全局CSS样式

1、按钮（更多见文档）

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>按钮</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="bootstrap.min.js"></script>
  </head>
  <body>
	  <!-- 默认按钮样式 -->
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
	<!-- 更多按钮样式 -->
	<!-- 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>

  </body>
</html>