目录
图解
1.概述
1.1前端框架的理解
1.前端框架是什么意思？
前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件，比如，
jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，
漂亮的各种控件（按钮，表单等等），使用前端框架可以帮助快速的网站。框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，
同时前端功能越来越强大而产生的前端框架，所以开发web产品就很必要用前端框架（前端架构）。2.Web前端开发技术三要素
Web前端开发技术框架包括三个要素：HTML、CSS和JavaScript，
当然还有很多高级的前端框架，比如bootstrap、Jquery等。主要是用来帮助高效的开发出前端页面。3.使用前端框架的好处
使用前段框架可以降低界面开发周期和提高界面的美观性。
有些框架比较轻量，比如jquery，有些框架比较重量，比如extjs。
一般来说重量的框架会封装更多的功能，比如extjs，封装的grid控件有很强的数据展示和操作功能。
1.2前端框架与前端类库的理解
前端框架的理解误区
网站的价值在于它能为用户提供什么价值，在于网站能做什么，
而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，
得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，
并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，
那么一个JQuery前端类库就可以了，真的没必要用上一些高大上的框架。当然，框架的确是很有用的，重点是我们要知道什么时候该用什么框架。
大公司大项目的经验和成功模式固然重要，值得学习借鉴，但我们不能因此变得盲从。
只有深刻去理解前端框架，知道什么时候该用什么什么框架解决什么问题，才能有的放矢，直击要害。前端框架与前端类库的区别
使用框架前，我觉得很重要的一点是弄清类库（诸如JQuery）和框架（诸如angularJS)
的区别在何处。简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，
例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具
，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，
为了实现M和V的解耦，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。
是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，
就应该遵循该框架所规定的规则。二者最主要的区别是：JQuery以DOM操作为中心，框架，准确来说是MVC框架，
是以模型（model）为中心，而DOM操作是附加的。所以，以模型为中心最终达到的目的是带来
一整套工作流程的变更，使得后台工程师可以编写前端的模型代码，把后台与前端打通
，交互设计师处理UI跟模型的互动关系，UI设计师可以专注、无障碍的处理HTML源码，
把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。
基本操作
按钮 需要下载架包引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>按钮</title>
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- css-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Bootstrap按钮</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</body>
</html>
效果图
导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<!-- 响应式前端框 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- css-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- 设置导航条向左 -->
<style type="text/css">
.navbar-collapse{
flex-grow: 0;
}
.form-group{
width: 320px;
margin: 0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 固态框 -->
<div class="container">
<!-- 导航条 -->
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
效果图
需要用固态款调整布局
霸屏加输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>霸屏加输入框</title>
<!-- 响应式前端框 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- css-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<!-- 霸屏 -->
<div class="jumbotron bg-white">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary bg-success" type="button" id="button-addon1">哈哈</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary bg-success" type="button" id="button-addon2">嘻嘻</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend" id="button-addon3">
<button class="btn btn-outline-secondary bg-success" type="button">哒哒</button>
<button class="btn btn-outline-secondary bg-success" type="button">雅虎</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary bg-success" type="button">邓邓飞</button>
<button class="btn btn-outline-secondary bg-success" type="button">仍然选择坚持和热爱</button>
</div>
</div>
</div>
</div>
</body>
</html>
效果图
栅格系统
共划分为12等分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>珊格系统</title>
<!-- 响应式前端框 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- css-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style>
#button-addon2{
color: white
}
#a button{
color: white
}
</style>
</head>
<body>
<!-- pc端 -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="container">
<!-- 霸屏 -->
<div class="jumbotron bg-white">
<div class="input-group mb-3" id="a">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary bg-success" type="button" id="button-addon1">哈哈</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary bg-success" type="button" id="button-addon2">嘻嘻</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend" id="button-addon3">
<button class="btn btn-outline-secondary bg-success" type="button">哒哒</button>
<button class="btn btn-outline-secondary bg-success" type="button">雅虎</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary bg-success" type="button">邓邓飞</button>
<button class="btn btn-outline-secondary bg-success" type="button">仍然选择坚持和热爱</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-info">
热爱永不停歇
</div>
<div class="col-md-9 bg-transparent">
<div class="col-md-12 bg-success">积极</div>
<div class="col-md-12 bg-light">向上</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图
想了解更多Bootstrap可以查阅bootstrap4教程中文版-风君子博客
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
