0
点赞
收藏
分享

微信扫一扫

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

琛彤麻麻 2022-04-29 阅读 23

WWW
    What?
        ①.2011年,来自Twitter,是目前最受欢迎的前端框架
        ②.是一个用于快速开发Web应用程序和网站的前端框架
        ③.Bootstrap是基于HTML、CSS、JS的,简洁灵活,使得Web开发更加快捷
        一句话概述:Bootstrap是一个建立一个页面,可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架
    Why?
        ①.响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
        ②.移动设备优先
        ③.浏览器支持
        ④.容易上手
    Where?
        企业网站、博客、网站后台之类的网站
        注意:非电商(电商网站分类很多)

环境安装
    ①.下载Bootstrap库
        http://www.bootcss.com/

 

   ②.页面中引入库
        bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
        jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
        bootstrap.min.js:Bootstrap核心库
    案例1:在页面上创建一个button,观察原生态的button和Bootstrap的button区别【徽章效果:class="badge"】

Bootstrap CSS
    概览
        ①.H5文档类型:<!DOCTYPE html>
        ②.移动设备优先,在head中添加:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
            width=device-width:呈现在不同设备上
            initial-scale=1.0:以1:1比例呈现,不会有任何缩放
            user-scalable=no:禁用网页缩放功能
            maximum-scale=1.0:页面放大程序,1.0将禁止用户放大实际尺寸
        案例2:演示Bootstrap页面在手机浏览器中展示效果
        ③.布局容器
            固定容器【class="container"】
                屏幕(大桌面显示器,大于等于 1200px)
                    @media (min-width: @screen-lg-min) { ... }
                等屏幕(桌面显示器,大于等于 992px)
                    @media (min-width: @screen-md-min) { ... }
                屏幕(平板,大于等于 768px)
                    @media (min-width: @screen-sm-min) { ... }
                超小屏幕(手机,小于 768px)
            流体容器【class="container-fluid"】
            案例3:演示两种容器区别?
    栅格系统(Grid System)
        概念:Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
        网格系统策略图

 

           案例4:演示Bootstrap网格系统(大PC一行4列,中PC一行3列,平板一行2列,手机1行1列)
        列偏移:class="col-lg-offset-1"
        案例5:演示列偏移
        嵌套:栅格系统可以嵌套
        案例6:演示栅格系统嵌套(某列中嵌套栅格)
        交换位置
            右移动:push
            左移动:pull
        案例7:综合演示栅格系统(包含交换位置)

        代码段

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="utf-8" />
		<style>
			#d1{
				background-color: pink;
			}
			#d2{
				background-color: red;
			}
			#d3{
				border: 1px;
				border-style: groove;
			}
		</style>
		<title></title>
		<!--引用文件-->
		<!--先引用jq库-->
		<script type="text/javascript" src="js/jquery-3.3.1.js">
		</script>
		<script type="text/javascript" src="js/bootstrap.js">
		</script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
	<body>
		<!--固定容器-->
		<div id="d1" class="container">
			<button class="btn btn-warning">
				未读消息
				<span class="badge">99+</span>
			</button>
		</div>
		<!--流体容器-->
		<div id="d2" class="container-fluid">
			<button>原生按钮</button>
			<button class="btn btn-success">Bootstrap按钮</button>
			<button class="btn btn-warning">
				未读消息
				<span class="badge">99+</span>
			</button>
		</div>
		<hr />
		
		<div class="container">
			<div class="row">
				<div class="a col-lg-1">1</div>
				<div class="a col-lg-1">2</div>
				<div class="a col-lg-1">3</div>
				<div class="a col-lg-1">4</div>
				<div class="a col-lg-1">5</div>
				<div class="a col-lg-1">6</div>
				<div class="a col-lg-1">7</div>
				<div class="a col-lg-1">8</div>
				<div class="a col-lg-1">9</div>
				<div class="a col-lg-1">10</div>
				<div class="a col-lg-1">11</div>
				<div class="a col-lg-1">12</div>
			</div>
			<hr />
			<div class="row">
				<div class="a col-lg-2 col-md-3 col-sm-4 col-xs-6">a</div>
				<div class="a col-lg-2 col-md-3 col-sm-4 col-xs-6">b</div>
				<div class="a col-lg-2 col-md-3 col-sm-4 col-xs-6">c</div>
				<div class="a col-lg-2 col-md-3 col-sm-4 col-xs-6">d</div>
				<div class="a col-lg-2 col-md-3 col-sm-4 col-xs-6">e</div>
				<div class="a col-lg-2 col-md-3 col-sm-4 col-xs-6">f</div>
		</div>
		<hr />
		<div class="row">
			<div class="a col-md-3 col-md-offset-3">A</div>
			<div class="a col-md-3 col-md-offset-3">B</div>
			<div class="a col-md-3 col-md-offset-3">C</div>
			<div class="a col-md-3 col-md-offset-3">D</div>
		</div>
		<hr />
		<div class="row">
			<div class="A col-md-3 col-md-push-3">A</div>
			<div class="A col-md-3 col-md-push-3">B</div>
			<div class="A col-md-3">A1</div>
			<div class="A col-md-3 col-md-push-3">B1</div>
		</div>
		<hr />
		<div class="row">
			<div class="a col-md-6">
				<div class="row">
					<div class="a col-md-4">a1</div>
					<div class="a col-md-4">a2</div>
					<div class="a col-md-4">a3</div>
				</div>
			</div>
			<div class="a col-md-6">B1</div>
			</div>
			</div>
			<pre></pre>
	</body>
</html>
举报

相关推荐

0 条评论