-
Javascript知识【BootStrap】
目录
BootStrap
概述及导入
目标：
1，知道什么是响应式开发
2，知道如何搭建bootStrap环境
为了进行敏捷开发，为了更快搭建页面，为了让书写的网页可以在各个终端进行展示
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<button type="button" class="btn btn-primary">（首选项）Primarybutton>
body>
html>BootStrap前置知识（了解）
BootStrap布局容器及栅格【阶段重点】
布局容器
目标：可以掌握BootStrap中布局系统
BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。相当于一个画板。
帮助手册位置：全局CSS样式-------》概览--------》布局容器
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/bootstrap.min.js">script>
<style>
div{
border:2px solid red;
}
style>
head>
<body>
<div class="container">
要求：居中，两端有留白
div>
<div class="container-fluid">
要求：占据视口100%宽度
div>
body>
html>布局容器：相当于BootStrap的一个画板，所有的bootStrap组件都建议放置于此。
BootStrap操作时，就是使用class进行赋值，就可以引入BootStrap样式。
栅格（核心）
栅格是通过数格子来完成一行的布局的。
col-lg-? 在这一行占用?列
col-lg-? 书写顺序决定在这一行的占用位置
示例1：
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/bootstrap.min.js">script>
<style>
div{
border:1px solid red;
height:100px;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12" style="border: 1px solid blue;">
11111111111111
div>
div>
div>
body>
html>示例2：
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/bootstrap.min.js">script>
<style>
div{
border:1px solid red;
height:100px;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4" style="border: 1px solid blue;">
11111111111111
div>
<div class="col-lg-4" style="border: 1px solid blue;">
22222222222222
div>
<div class="col-lg-4" style="border: 1px solid blue;">
33333333333333
div>
div>
div>
body>
html>
改变视口，就相当于改变屏幕尺寸就会在 四个屏幕尺寸之间切换。
若需要设置一个尺寸，同步其他屏幕，就需要设置xs
若需要设置一个尺寸，不影响其他屏幕，就需要设置lg
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/bootstrap.min.js">script>
<style>
div{
border:1px solid red;
height:100px;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: 1px solid blue;">
11111111111111
div>
<div class="col-xs-4" style="border: 1px solid blue;">
22222222222222
div>
<div class="col-xs-4" style="border: 1px solid blue;">
33333333333333
div>
div>
div>
body>
html>
答案：
<div class="container">
<div class="row">
<div class="col-md-6">
11
div>
<div class="col-md-6">
22
div>
div>
div>
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/bootstrap.min.js">script>
<style>
div{
border:1px solid red;
height:100px;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">111111div>
div>
div>
body>
html>BootStrap响应式工具及列表
目标：通过学习响应式工具，熟练使用不同屏幕尺寸下，元素显示和隐藏效果
html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/bootstrap.min.js">script>
<style>
div{
border:1px solid red;
height:100px;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">111111div>
<div class="col-xs-4 visible-lg">222222div>
<div class="col-xs-4">333333div>
div>
div>
body>
html><ul class="list-inline">
<li>爱li>
<li>吃li>
<li>土li>
<li>豆li>
ul> -
相关阅读:
C++之修改结构体成员字节对齐(二百一十三)
QT摄像头采集
吃瓜神奇！企查查、天眼查、天眼销，到底哪家强？
静电模型PIC方法的Matlab仿真设计
图片如何转换成PDF格式？教你一招快速转换
输赢只是一时
使用MitmProxy离线缓存360度全景网页
图像分割算法
SpringCloud Alibaba Gateway实践与原理学习
Java默认方法的使用
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126321556