0
点赞
收藏
分享

微信扫一扫

Bootstrap 快速入门之第一章 入门&全局CSS之概览&栅格系统

萨科潘 2022-04-29 阅读 47
bootstrapcssjavascript

一：概念     

       Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

   广泛在企业网站、博客、网站后台之类的网站使用

      好处：
① ：定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② ：响应式布局：同一套页面可以兼容不同分辨率的设备。                                                          ③：移动设备优先                                                                                                                        ④：浏览器支持                                                                                                                                  ⑤：容易上手

二：环境安装

1.下载Bootstrap库

     下载地址：http://www.bootcss.com/

  自行在官网中下载，下载的Bootstrap如下：

  

 

 2.页面中引入库

①：bootstrap.min.css：Bootstrap核心样式【添加到head标签中】

②：jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

③：bootstrap.min.js：Bootstrap核心库

    导入的库如下：

​
 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

​

  

三：Bootstrap CSS

   概述：

             ①.H5文档类型：<!DOCTYPE html>

             ②.移动设备优先，在head中添加：
            <meta name="viewport" content="width=device-width,initial-scale=1.0">

解释：

③.布局容器

  •     固定容器【class="container"】

            固定宽度的,有间距的

  • 流体容器【class="container-fluid"】

     100%宽度的，没有间距

​
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--
    viewport 视口
    width=device-width 当前网页的宽度为设备的宽度
    initial-scale 初始缩放比
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--导入资源-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

<body>
    <p>案例3：演示两种容器的区别</p>
    <!--
    container     固定宽度的
        lg : large 大
        md : middle 中等
        sm : small 小
        xs : extra small 超小
    container-fluid    100%宽度
    -->
    <style>
        .container {
            background: yellow;
        }

        .container-fluid {
            background: pink;
        }
    </style>
    <div class="container">
        <p>演示两种容器的区别</p>
        <p>演示两种容器的区别</p>
        <p>演示两种容器的区别</p>
        <p>演示两种容器的区别</p>
    </div>
    <div class="container-fluid">
        <p>演示两种容器的区别</p>
        <p>演示两种容器的区别</p>
        <p>演示两种容器的区别</p>
        <p>演示两种容器的区别</p>
    </div>
</body>
</html>

​

        概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统
        特点：会随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列

 

    案例：查询按钮原生态实现对比Bootstrap方式实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对比原生态的button和Bootstrap的button区别</title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>	
		button{
			/* 手势 */
			cursor: pointer;
		}
</style>
	</head>
	<body>
		<button>原生态按钮</button>		
        <button class="btn btn-danger">警报按钮</button>
        <button class="btn btn-default">默认按钮</button>
        <button class="btn btn-info">一般信息按钮</button>
        <button class="btn btn-warning">警告按钮</button>
        <button class="btn btn-primary">首选项</button>
        <button class="btn btn-link">链接按钮</button>
	</body>
</html>

 

案例：首页导航&搜索区域原生态实现（div+css）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页导航&搜索区域原生态实现</title>
		<style type="text/css">
			.dh {
				/* 高度 */
				height: 50px;
				/* 背景颜色 */
				background-color: #F8F9FA;
				/* 行高 垂直居中 */
				line-height: 50px;
			}

			.bt {
				/* 左飘 */
				float: left;
				/* 左间距 */
				margin-left: 50px;
			}

			.lj {
				/* 右飘 */
				float: right;
				/* 右间距 */
				margin-right: 50px;
			}

			.lj a {
				/* 每隔间隔10个像素 */
				margin-left: 10px;
			}

			.ss {
				/* 背景颜色 */
				background-color: #DCDCDC;
				/* 高度 */
				height: 100px;
				/* 上右下左间距 */
				margin: 20px 50px 0px 50px;
				/* 水平居中 */
				text-align: center;
				/* 行高 */
				line-height: 100px;
			}

			.ss button {
				/* 字体颜色 */
				color: white;
				/* 背景颜色 */
				background-color: #007BFF;
				/* 去除边框 */
				border: 0px;
				/* 宽度 */
				width: 50px;
				/* 高度 */
				height: 30px;
				/* 设置边框圆角 */
				border-radius: 4px;
			}

			.ss input {
				/* 去除边框 */
				border: 0px;
				/* 宽度 */
				width: 200px;
				/* 高度 */
				height: 25px;
			}
		</style>
	</head>
	<body>
		<!-- 导航区域 -->
		<div class="dh">
			<div class="bt">您好，欢迎来到网上书店</div>
			<div class="lj">
				<a>首页</a>
				<a>登录</a>
				<a>注册</a>
				<a>我的购物车</a>
			</div>
		</div>
		<!-- 搜索区域 -->
		<div class="ss">
			<input type="text" />
			<button>查询</button>
		</div>
	</body>
</html>

 

案例：首页导航&搜索区域Bootstrap实现&搭首页框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页导航&搜索区域Bootstrap实现</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<!-- 分别引入jQuery的js和Bootstrap的js -->
		<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js" type="text/javascript" ></script>
		<script src="./bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" ></script>
		<style type="text/css">
			.navbar-collapse {
				/* 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
				flex-grow: 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" 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>
					</form>
				</div>
			</div>
			<!-- 第二行 -->
			<div class="row">
				<div class="col-3" style="background-color: pink;">
					左3-书籍分类
				</div>

				<div class="col-9" style="background-color: skyblue;">
					<!-- 右9-轮播图&新书上架&热门书籍 -->

					<div class="row">
						<div class="col">
							右9中第一行轮播图
						</div>
					</div>

					<div class="row">
						<!-- 右9中第二行新书上架 -->
						<div class="col" style="background-color: darkorange;">
							①新书上架
						</div>
						<div class="col" style="background-color: darkorange;">
							②新书上架
						</div>
						<div class="col" style="background-color: darkorange;">
							③新书上架
						</div>
						<div class="col" style="background-color: darkorange;">
							④新书上架
						</div>
						<div class="col" style="background-color: darkorange;">
							⑤新书上架
						</div>
					</div>

					<div class="row">
						<!-- 右9中第三行热门书籍 -->
						<div class="col" style="background-color: plum;">
							①热门书籍
						</div>
						<div class="col" style="background-color: plum;">
							②热门书籍
						</div>
						<div class="col" style="background-color: plum;">
							③热门书籍
						</div>
						<div class="col" style="background-color: plum;">
							④热门书籍
						</div>
						<div class="col" style="background-color: plum;">
							⑤热门书籍
						</div>
					</div>

				</div>

			</div>

		</div>

	</body>
</html>
举报

相关推荐

Bootstrap【第一章】入门、全局CSS样式【栅格系统】

bootstrapcsshtml

第一章：快速入门

android音视频AndroidCodec2CCodec

第一章 Linux系统入门

centos显示文件vimDocker云计算

TS快速入门笔记-第一章

pdfmacos

Bootstrap_01_入门、全局CSS样式【栅格系统】

bootstrapcsshtml

Bootstrap_01_入门，全局CSS样式【栅格系统】

bootstrapjqueryhtml

第一章、Zookeeper入门

zookeeper

SparkSQL-第一章：SparkSQL快速入门

大数据sparkhiveCoreHiveOpenStack云计算

Bootstrap入门.css样式【栅格系统】

cssbootstraphtml

Bootstrap入门、CSS样式【栅格系统】

bootstrapcss前端
0 条评论