Bootstap(入门 &&组件案例演示&&)

無话可说.

已于 2022-05-02 15:40:09 修改

阅读量429

点赞数 1

分类专栏： html bootstrap 文章标签： bootstrap

于 2022-04-28 00:49:39 首次发布

本文链接：https://blog.csdn.net/weixin_65565181/article/details/124463662

版权

本文介绍了Bootstrap，一个由Twitter公司开发的前端框架，详细讲述了它的核心特性，包括基本结构、CSS、组件和JavaScript插件。Bootstrap的优势在于节省开发时间、提供定制化选项、拥有详尽的文档、实现响应式设计，且对各种浏览器和移动设备有良好的支持。文中还通过五个实际案例演示了Bootstrap的使用，包括导航条、表单、输入框组和栅格系统的应用。

摘要由CSDN通过智能技术生成

大家好啊本次分享Bootstap的知识

好了在分享前先看看本次的思维导图【前端开发框架】

一、Bootstrap

大家学习一门新的技术后还是逃不过三个W

What 、Why 、where

什么是Bootstrap ----what

答:

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成

Bootstrap包含

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。

CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。

组件:Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
2.为什么要学习Bootstrap-- why
答：1.节省时间

Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。

通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

3.详尽的说明文档，更容易上手

Bootstrap的文档相当精彩。Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

4.响应式设计

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。这样我们不用再忙于适配各类终端。

5.浏览器支持

各类浏览器都支持Bootstrap没有不兼容的问题。

6.移动设备优先

最难适配的就是移动设备啦，当移动设备都被解决了，其他的不也能迎刃而解了吗？

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>案例4：首页导航&搜索区域Bootstrap实现&搭首页框架</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <!-- 引入BootStrapCss -->
  <link rel="stylesheet" type="text/css" href="css/css/bootstrap.css" />
  <style type="text/css">
   .navbar-collapse {
    flex-grow: 0;
    /* 1代表弹性扩大空间  0代表不占用父类容器剩余空间 */
   }
   .ss{
    height: 100px;
    background-color: #DCDCDC;
    margin-top: 20px;
   }
   .form-group{
    width: 300px;/* 宽度 */
    margin-left: auto;/* 左间距  自适应 */
    margin-right: auto;/* 右间距  自适应 */
    margin-top: 31px;
   }
   
  </style>
 </head>
 <body>
  <!-- 导航条组件 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
    <a class="navbar-brand" href=" ">小朱网上书店</ a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
     aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse float-right" id="navbarNavAltMarkup">
     <div class="navbar-nav">
      <a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></ a>
      <a class="nav-link" href="#">登录</ a>
      <a class="nav-link" href="#">注册</ a>
      <a class="nav-link" href="#">我的购物车</ a>
     </div>
    </div>
   </div>
  </nav>
  <!-- 栅格系统实现手而已框架 -->
  <div class="container">
   <!-- 第一行搜索区域 -->
   <div class="row ss">
    <div class="col">
     <form>
      <div class="form-group">
       <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="请输入书名" aria-label="Recipient's username"
         aria-describedby="button-addon2">
        <div class="input-group-append">
         <button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
        </div>
       </div>
      </div>
      </from>
    </div>
   </div>
   <div class="row">
    <div class="col-3" style="background-color: red;">
     左三-书籍分类
 
    </div>
    <div class="col-9" style="background-color: seagreen;">
     <!-- 右九--轮博图  新书上架 热门书籍 -->
     <div class="row">
      <div class="col" style="background-color: #004085;">
       右九第一行轮播图
      </div>
     </div>
     <div class="row">
      <div class="col" style="background-color: orange;">
       一新书上架
      </div>
      <div class="col" style="background-color: orange;">
       一新书上架
      </div>
      <div class="col" style="background-color: orange;">
       一新书上架
      </div>
      <div class="col" style="background-color: orange;">
       一新书上架
      </div>
      <div class="col" style="background-color: orange;">
       一新书上架
      </div>
     </div>
     <div class="row">
      <div class="col" style="background-color: orange;">
       热门书籍 </div>
      <div class="col" style="background-color: orange;">
       热门书籍
      </div>
      <div class="col" style="background-color: orange;">
       热门书籍
      </div>
      <div class="col" style="background-color: orange;">
       热门书籍
      </div>
      <div class="col" style="background-color: orange;">
       热门书籍
      </div>
     </div>
    </div>
   </div>
   <!-- 引入jQuery库 -->
   <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
   <!-- 引入BootSrap类库 -->
   <script type="text/javascript" src="js/bootstrap.js"></script>
 </body>
</html>

=========================================================================Bootstrap（组件案例演示）

H:how
准备工作：下载解压引入（2个js 1个css）

组件：导航条 navbar
      表单 form-group
      输入框组 input-group
      栅格：Grid-system 12列

支持手机端：<meta viewport>

下载Bootstrap
网址：https://v4.bootcss.com/

（仅供参考）：
从下思维导图可以看出我们一共有五个案例，今天讲第一个案例

这个是案例一界面的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1：首页轮播图实现</title>
		<!--引入bootstrap得CSS  -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
				/*1代表弹性扩大占用父容器剩余空间 0代表不占用*/
			}

			.ss {
				width: 100px;
				background-color: #DDCCDD;
				margin-top: 20px;

			}

			.form-group {
				width: 300px;
				margin-left: auto;
				/*自适应*/
				margin-right: auto;
				/*自适应*/
				margin-top: 31px;
			}
		</style>
	</head>
	<body>
		<!-- 分别引入jQuery的js和Bootstrap的js -->
	</body>
	<!-- 导航条组件 -->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container">
			<a class="navbar-brand" href="#">loki，再见了</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
				aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
				<div class="navbar-nav">
					<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
					<a class="nav-link" href="#">登陆</a>
					<a class="nav-link" href="#">注册</a>
					<a class="nav-link disabled">我的购物车</a>
				</div>
			</div>
		</div>
	&