前端框架Bootstrap
一:前端框架Bootstrap
1.BOOtstrap框架介绍
1.该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
2.使用框架调整页面样式一般都是操作标签的class属性即可
bootstrap需要依赖于jQuery才能正常执行(动态效果)
2.下载Bootstrap链接
下载链接:https://www.cnblogs.com/goOJBK/p/15902864.html
二:响应式布局
1.什么是响应式布局？
响应式布局，根据浏览器窗口的大小来自动调整个个标签，所占的比例 如:
pc端与手机端！
扩展:
Google支持同时开发pc端与手机端页面
左下角
三:实战初体验(C V大法 轮播图)
1.需求将网页下面的轮播图Ctrl+V，复制到自己的HTML文档中使用。
2.打开检查，左标头选择轮播图，确定所在div标签，右键点击，选择Copy，选择Copy HTML代码，复制到Pycharm中HTML文件。
3.复制到HTML文件
4.成功
四:CV大法(博客)
1.选择你中意的博客，帖子，进行Copy。
2.选择HTML源码编辑器
五:布局容器
1.什么是布局容器？
布局容器就是左右两侧留白，只在中间使用bootstrap显示页面，在视觉上会显得更加美观，简洁，给用户一种清晰，简洁美的感觉，包括现在主流大型网站页面都在使用，布局容器。
container :左右留白
container-fluid :左右不留白
2.左右两侧有留白
<div class="container c1"> // 类用于固定宽度并支持响应式布局的容器。
// 在左右两边留白 div网页内写内容
</div>
3.左右两侧没有留白
<div class="container-fluid"> // 类用于100%宽度，占据全部视口（viewport）的器。
</div>
4.总结:
后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
六:栅格系统
1.什么是栅格系统？
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
2.简介:
row作用:
1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.一个row就是一行,这一行会均分成12份。
最小1份 最多12份
3.占份
row 行 : 一个row就是一行 一行是固定的12份
col-md-1 占几份
col-sm-1 占几份
col-xs-1 占几份
col-lg-1 占几份
4.写一个row就是将所在的区域划分成12份
<div class="row"></div>
5.在使用bootstrap的时候 脑子里面一定要做12的加减法
<div class="col-md-6 "> // 获取你所要的份数
6.栅格系统应用
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bootstrap引入 CSS CDN-->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap引入 Js CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.c1 {
background-color: red;
height: 100px;
border: 5px solid black;
}
</style>
</head>
<body>
<!--左右留白-->
<div class="container">
<div class="row">
<div class="col-md-6 c1">
<!--使用row 在6份里面 在均分12份-->
<div class="row">
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
</div>
</div>
<div class="col-md-6 c1"></div>
<br>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<br>
<div class="col-md-3 c1"></div>
<div class="col-md-9 c1"></div>
<br>
<div class="col-md-2 c1"></div>
<div class="col-md-8 c1"></div>
<div class="col-md-2 c1"></div>
<br>
<div class="col-md-8 c1"></div>
</div>
</div>
</body>
七:响应式布局
1.响应式布局
目前页面只是能左右布局，但是，当我们切换到手机显示器，或其他屏幕时，会出现页面整体样式变形，打乱了，所以目前该页面没有加入响应式布局。
2.实时监测浏览器屏幕大小
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bootstrap引入 CSS CDN-->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap引入 Js CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.c1 {
background-color: red;
height: 100px;
border: 5px solid black;
}
/*检查浏览器屏幕的大小 一旦浏览器窗口小于600px 就执行代码变成变成绿色*/
@media screen and (max-width: 600px) {
.c1 {
background-color: greenyellow;
height: 100px;
border: 5px solid black;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
<br>
<div class="col-md-2 c1"></div>
<div class="col-md-2 c1"></div>
<div class="col-md-2 c1"></div>
<div class="col-md-2 c1"></div>
<div class="col-md-2 c1"></div>
<div class="col-md-2 c1"></div>
<br>
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
<br>
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
<br>
<div class="col-md-8 c1"></div>
</div>
</div>
</body>
</html>
3.实验结果
实时检查浏览器屏幕大小变化，一旦浏览器窗口小于600px，就执行以下代码
将页面变成绿色。
附加:
后期可以进行相应更改，按照需求，但目前还有更好的解决方法，以下内容，解决屏幕兼容性问题。
所以我们要解决pc端到手机端页面布局的比例不能打乱。
4.解决方法:
便世道bootstrap中的栅格参数(响应式布局)
八:栅格参数(响应式布局)
1.响应式布局
针对不同的显示器 bootstrap会自动选择对应的参数
如果你想要兼容所有的显示器，你就将四个类全部加上即可
会自动做响应式布局，解决显示器的兼容性。
.col-xs- .col-sm- .col-md- .col-lg-
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
将以上四个类都添加上，响应式布局，该页面就可以兼容所有的显示器，都是正常显示。
2.响应式布局(使用格栅参数)
<style>
.c1 {
background-color: red;
height: 100px;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 c1 col-xs-6 col-sm-6 col-lg-6"></div>
<div class="col-md-6 c1 col-xs-6 .col-sm-6 col-lg-6"></div>
<br>
<div class="col-md-2 c1 col-xs-2 col-sm-2 col-lg-2"></div>
<div class="col-md-2 c1 col-xs-2 .col-sm-2 col-lg-2"></div>
<div class="col-md-2 c1 col-xs-2 col-sm-2 col-lg-2"></div>
<div class="col-md-2 c1 col-xs-2 col-sm-2 col-lg-2"></div>
<div class="col-md-2 c1 col-xs-2 col-sm-2 col-lg-2"></div>
<div class="col-md-2 c1 col-xs-2 .col-sm-2 col-lg-2"></div>
<br>
<div class="col-md-6 c1 col-xs-6 col-sm-6 col-lg-6"></div>
<div class="col-md-6 c1 col-xs-6 col-sm-6 col-lg-6"></div>
<br>
<div class="col-md-6 c1 col-xs-6 col-sm-6 col-lg-6"></div>
<div class="col-md-6 c1 col-xs-6 col-sm-6 col-lg-6"></div>
<br>
<div class="col-md-8 c1 col-xs-8 col-sm-8 col-lg-8"></div>
</div>
</div>
</body>
3.实现row只有8份居中展示
在一行如何移动位置
参数(类):
col-md-offset-
4.8份左右居中展示
解析:
默认是从左往右移动的 12-8 = 4 8%4 = 2 所有可以实现8份左右居中
所有就是掌握12以内的 加减乘除 即可，按情况进行处理。
九:实战样式
<body>
<!--标签h1-h6 small 副标签-->
<h1>我知道你 在我世界最重要！ <small>你记得我的最好</small> </h1>
<!--lead让段落突出 text-center 剧中展示-->
<p class="lead text-center">你懂你 再见!</p>
<!--缩略语 当鼠标悬停在缩写和缩写词上时就会显示完整内容-->
<abbr title="详细的解释内容(可编写)">小朋友 你是否有问号?</abbr>
<!--多种引用样式-->
<blockquote>
<p>在这个世界上 我在此遥望诗和远方!</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</body>
十:表单
1.针对表单标签 加样式就用form-control
class="form-control"
2.checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
<input type="checkbox">222
<input type="radio">333
3.针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">登录页面</h2>
<form action="">
<!--has-error 针对报错信息,form表单 input增加 全局样式 占据当前区域最大值-->
<p class="has-error">username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<p>偶像:
<select name="" id="" class="form-control">
<option value="">苍某空</option>
<option value="">三某悠亚</option>
<option value="">小某幼</option>
</select>
</p>
<p>hobby:
<input type="checkbox">快餐
<input type="checkbox">西餐
<input type="radio">游泳
</p>
<p>textarea:
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
</p>
<input type="submit" class="btn btn-primary">
</form>
</div>
</div>
十:按钮
1.可作为按钮使用的标签或元素
为 `<a>`、`<button>` 或 `<input>` 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
2.a标签与button
a标签添加按钮属性
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
button按钮
<button class="btn btn-danger">按我</button> // 红色
<button class="btn btn-default">按我</button> // 白色
<button class="btn btn-success">按我</button> // 绿色
<button class="btn btn-info">按我</button> // 蓝色
<button class="btn btn-warning">按我</button> // 黄色
注意:
按钮组只有六种颜色
3.预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
针对组件的注意事项
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
链接被作为按钮使用时的注意事项
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
跨浏览器展现
我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。
4.尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
<button class="btn btn-warning btn-lg">按我</button> // 大按钮
<button class="btn btn-warning btn-sm">按我</button> // 小按钮
<button class="btn btn-warning btn-xs">按我</button> // 超小尺寸
<input type="submit" class="btn btn-primary btn-block">
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
十一:Bootstrap组件
网址:https://v3.bootcss.com/components/#glyphicons-how-to-use
1.如何使用图标
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
2.图表
使用图标,将图标类复制粘贴到指定标签内位置，填写类。
<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
注意:
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
3.给图标添加颜色
<style>
span {
color: red;
}
</style>
十二:导航条
1.导航条颜色
默认为白色导航条
<nav class="navbar navbar-default">
更换为黑色导航条
<nav class="navbar navbar-inverse">
2.更换为黑色
3.导航条添加到底部
<nav class="navbar navbar-inverse navbar-fixed-bottom">
十三:巨幕与整合
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
浙公网安备 33010602011771号