Bootstrap前端框架的基本使用
目录
Bootstrap前端框架的基本使用
目录
前端框架的理解
**1.前端框架是什么意思？
前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等），使用前端框架可以帮助快速的网站。**
框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，同时前端功能越来越强大而产生的前端框架，所以开发web产品就很必要用前端框架（前端架构）。
2.Web前端开发技术三要素
Web前端开发技术框架包括三个要素：HTML、CSS和JavaScript，当然还有很多高级的前端框架，比如bootstrap、Jquery等。主要是用来帮助高效的开发出前端页面。
3.使用前端框架的好处
使用前段框架可以降低界面开发周期和提高界面的美观性。
有些框架比较轻量，比如jquery，有些框架比较重量，比如extjs。一般来说重量的框架会封装更多的功能，比如extjs，封装的grid控件有很强的数据展示和操作功能。
前端框架与前端类库的理解
前端框架的理解误区
网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些高大上的框架。
当然，框架的确是很有用的，重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要，值得学习借鉴，但我们不能因此变得盲从。只有深刻去理解前端框架，知道什么时候该用什么什么框架解决什么问题，才能有的放矢，直击要害。
前端框架与前端类库的区别
使用框架前，我觉得很重要的一点是弄清类库（诸如JQuery）和框架（诸如angularJS)的区别在何处。
简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。
而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，就应该遵循该框架所规定的规则。
二者最主要的区别是：JQuery以DOM操作为中心，框架，准确来说是MVC框架，是以模型（model）为中心，而DOM操作是附加的。所以，以模型为中心最终达到的目的是带来一整套工作流程的变更，使得后台工程师可以编写前端的模型代码，把后台与前端打通，交互设计师处理UI跟模型的互动关系，UI设计师可以专注、无障碍的处理HTML源码，把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。
使用Bootstrap所需要的依赖包
<!-- 在指定的页面中需要使用Bootstrap的样式或者js 比如导入相关依赖 css js -->
<!-- 1.引入Bootstrap的css依赖 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- 2.引入jQuery类库，在Bootstrap.js之前 -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- 3.引入Bootstrap.js -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>连网版导入
Css导入 <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot strap.min.css"> js导入 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Bootstrap按钮样式与js对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 优先移动端显示 -->
<!-- meta viewport 设置响应式布局-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>01案例：查询按钮原生态实现与Bootstrap实现的对比</title>
<!-- 在指定的页面中需要使用Bootstrap的样式或者js 比如导入相关依赖 css js -->
<!-- 1.引入Bootstrap的css依赖 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- 2.引入jQuery类库，在Bootstrap.js之前 -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- 3.引入Bootstrap.js -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- 嵌入css -->
<style type="text/css">
/* 通过id选择器设置按钮样式 */
#btn{
/* 宽度 */
width: 90px;
/* 高度 */
height: 35px;
/* 去掉边框 */
border: 0px;
/* 背景 */
background-color: royalblue;
/* 颜色 */
color: white;
/* css3.0 设置圆弧 */
border-radius: 5px;
}
</style>
</head>
<body>
<h3>1.原生态实现查询按钮</h3>
<p>默认按钮</p>
<input type="button" value="查询">
<a href="javascript:void(0)">查询</a>
<button>查询</button>
<p>设置样式过后的按钮</p>
<button id="btn">查询</button>
<h3>2.Bootstrap实现查询按钮</h3>
<button class="btn">查询</button>
<button class="btn btn-primary">查询</button>
<button class="btn btn-success">查询</button>
<button class="btn btn-warning">查询</button>
<button class="btn btn-danger">查询</button>
<button class="btn btn-info">查询</button>
<!-- 官网提供示例 -->
<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>
Bootstrap实现导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 支持手机端 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!-- 在指定的页面中需要使用Bootstrap的样式或者js 比如导入相关依赖 css js -->
<!-- 1.引入Bootstrap的css依赖 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- 2.引入jQuery类库，在Bootstrap.js之前 -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- 3.引入Bootstrap.js -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- css -->
<style type="text/css">
.navbar-collapse{
/* 弹性布局中的一个属性，设置1，默认是0 */
/* 前提是套用container固定容器 设置右边显示导航 */
flex-grow: 0;
}
</style>
</head>
<body>
<!-- 直接copy导航条中的示例 -->
<!-- navbar 导航条的主样式（框架） -->
<!-- text-primary 字体颜色 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<div class="container">
<!-- 导航条的标题 -->
<a class="navbar-brand " href="#">您好!欢迎来到勇妹儿足浴中心</a>
<!-- 当页面处于手机端显示或者平板端显示，该按钮会自动显示，否则处于隐藏状态 -->
<!-- 标签上属性以data开头的都是来源于Bootstrap.js中 -->
<!--
data-toggle="collapse" 控制折叠切换效果。
data-target="#navbarNav" 根据id找到指定的折叠容器
-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- collapse 折叠组件 -->
<!-- active 选中 disabled 禁用 -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">登录</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">我的购物车</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>电脑端显示
手机端样式
Bootstrap4中的固定容器与流式容器区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 在指定的页面中需要使用Bootstrap的样式或者js 比如导入相关依赖 css js --> <!-- 1.引入Bootstrap的css依赖 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <!-- 2.引入jQuery类库，在Bootstrap.js之前 --> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <!-- 3.引入Bootstrap.js --> <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .container{ background-color: red; height: 100px; } .container-fluid{ background-color: yellow; height: 100px; } </style> </head> <body> <h3>固定容器</h3> <div class="container"> 123 </div> <h3>流式容器</h3> <div class="container-fluid"> 456 </div> </body> </html>更多详情请看Bootstrap文档 官网地址
纯中文翻译网址分享