2 快速前端开发

CSS快速入门

    • 1.CSS案例
      • 1.1 内容回顾
      • 1.2 案例：二级菜单
        • 1.2.1 划分区域
        • 1.2.2 搭建骨架
        • 1.2.3 Logo区域
        • 1.2.4 菜单部分
      • 1.3 案例：顶部菜单 + 二级菜单
        • 小结
      • 1.4 案例：推荐区域
        • 1.4.1 划分区域
        • 1.4.2 搭建骨架
        • 1.4.3 案例的实现
        • 小结
    • 2. CSS知识点
      • 2.1 hover（伪类）
      • 2.2 after（伪类）
      • 2.3 position
        • 1. fixed
          • 案例：返回顶部
          • 案例：对话框
        • 2. relative和absolute
        • 案例：小米商城下载app
      • 2.4 border
      • 2.5 背景色
    • 总结
    • 3.BootStrap
      • 3.1 初识
      • 3.2 导航
      • 3.3 栅格系统
      • 3.4 container
      • 3.5 面板
      • 案例：博客
      • 案例：登录
      • 案例：后台管理
      • 案例：后台管理+面板
      • 3.6 图标
      • 3.7 BootStrap依赖
    • 4.提前聊JavaScript

1.CSS案例

1.1 内容回顾

  • HTML标签

    固定格式，记住标签长什么样子，例如：
h/div/span/a/img/ul/li/table/input/form

  • CSS样式

    • 引用CSS：标签、头部、文件

      .xx{...
}<div class='xx xx'></div>

    • CSS样式

      高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：- body- 区域居中

    • 页面布局

      根据你看到的页面把他们划分成很多的小区域，再去填充样式。

1.2 案例：二级菜单

在这里插入图片描述

1.2.1 划分区域

在这里插入图片描述

1.2.2 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.sub-header{height: 100px;background-color: #b0b0b0;}.container{width: 1128px;margin: 0 auto;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;}.sub-header .menu-list{float: left;}.sub-header .search{float: right;}</style>
</head>
<body>
<div class="sub-header"><div class="container"><div class="ht logo">1</div><div class="ht menu-list">2</div><div class="ht search">3</div><div class="clear:both;"></div></div>
</div></body>
</html>
1.2.3 Logo区域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.sub-header {height: 100px;background-color: #b0b0b0;}.container {width: 1128px;margin: 0 auto;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;border: 1px solid red;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;}.sub-header .search {float: right;}</style>
</head>
<body>
<div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list">2</div><div class="ht search">3</div><div class="clear:both;"></div></div>
</div></body>
</html>
1.2.4 菜单部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.sub-header {height: 100px;}.container {width: 1128px;margin: 0 auto;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search {float: right;}</style>
</head>
<body>
<div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div></body>
</html>

1.3 案例：顶部菜单 + 二级菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div></body>
</html>
小结

  • a标签是行内标签，行内标签的高度、内外边距，默认无效。

  • 垂直方向居中

    • 本文 + line-height
    • 图片 + 边距

  • a标签默认有下划线。

  • 鼠标放上去之后hover

    .c1:hover{...
}
a:hover{}

1.4 案例：推荐区域

在这里插入图片描述

1.4.1 划分区域

在这里插入图片描述

1.4.2 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}img {width: 100%;height: 100%;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover {color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}.slider .sd-img {width: 1226px;height: 460px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpeg" alt=""></div></div>
</div><div class="news"><div class="container"><div class="channel"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div></div>
</div></body>
</html>
1.4.3 案例的实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}img {width: 100%;height: 100%;}.left {float: left;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover {color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}.slider .sd-img {width: 1226px;height: 460px;}.news{margin-top: 14px;}.news .channel {width: 228px;height: 164px;background-color: #5f5750;padding: 3px;}.news .channel .item {height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a{display: inline-block;font-size: 12px;padding-top: 18px;color: #fff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover{opacity: 1;}.news .channel .item  img{height: 24px;width: 24px;display: block;margin: 0 auto 4px;}.news .list-item {width: 316px;height: 170px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpeg" alt=""></div></div>
</div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="images/w1.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w2.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w3.jpeg"/></div><div class="clear:both"></div></div>
</div></body>
</html>

在这里插入图片描述

小结

  • 设置透明度

    opacity:0.5;    /* 0 ~ 1 */

    在这里插入图片描述

2. CSS知识点

2.1 hover（伪类）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1 {color: red;font-size: 18px;}.c1:hover {color: green;font-size: 50px;}.c2 {height: 300px;width: 500px;border: 3px solid red;}.c2:hover {border: 3px solid green;}.download {display: none;}.app:hover .download {display: block;}.app:hover .title{color: red;}</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div><div class="app"><div class="title">下载APP</div><div class="download"><img src="images/qcode.png" alt=""></div>
</div></body>
</html>

2.2 after（伪类）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1:after{content: "大帅哥";}</style>
</head>
<body><div class="c1">吴阳军</div><div class="c1">梁吉宁</div>
</body>
</html>

很重要的应用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content: "";display: block;clear: both;}.item{float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

2.3 position

  • fixed
  • relative
  • absolute
1. fixed

固定在窗口的某个位置。

案例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 10px;bottom: 50px;}</style>
</head>
<body><div style="height: 1000px;background-color: #5f5750"></div><div class="back"></div></body>
</html>
案例：对话框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.dialog {position: fixed;height: 300px;width: 500px;background-color: white;left: 0;right: 0;margin: 0 auto;top: 200px;z-index: 1000;}.mask {background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;z-index: 999;}</style>
</head>
<body><div style="height: 1000px">asdfasdfasd</div><div class="mask"></div>
<div class="dialog"></div></body>
</html>
2. relative和absolute
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 1px solid red;margin: 100px;position: relative;}.c1 .c2{height: 59px;width: 59px;background-color: #00FF7F;position: absolute;right: 20px;bottom: 10px;}</style>
</head>
<body><div class="c1"><div class="c2"></div></div>
</body>
</html>
案例：小米商城下载app
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}img {width: 100%;height: 100%;}.left {float: left;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover {color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}.slider .sd-img {width: 1226px;height: 460px;}.news {margin-top: 14px;}.news .channel {width: 228px;height: 164px;background-color: #5f5750;padding: 3px;}.news .channel .item {height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a {display: inline-block;font-size: 12px;padding-top: 18px;color: #fff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover {opacity: 1;}.news .channel .item img {height: 24px;width: 24px;display: block;margin: 0 auto 4px;}.news .list-item {width: 316px;height: 170px;}.app {position: relative}.app .download {position: absolute;height: 100px;width: 100px;display: none;}.app:hover .download{display: block;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/" class="app">下载app<div class="download"><img src="images/qcode.png" alt=""></div></a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpeg" alt=""></div></div>
</div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="images/w1.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w2.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w3.jpeg"/></div><div class="clear:both"></div></div>
</div></body>
</html>

2.4 border

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 1px solid red;border-left: 3px solid #00FF7F;margin: 100px;}</style>
</head>
<body><div class="c1"></div>
</body>
</html>

透明色：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 500px;margin: 100px;background-color: #5f5750;border-left: 2px solid transparent;}.c1:hover{border-left: 2px solid red;}</style>
</head>
<body><div class="c1">菜单</div>
</body>
</html>

2.5 背景色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 500px;margin: 100px;background-color: #5f5750;}</style>
</head>
<body><div class="c1">菜单</div>
</body>
</html>

注意：以上不是所有的CSS样式。

总结

至此，CSS部分的知识全部讲完。

  • 大家：大致了解了页面的样式和标签。
  • 模板：
    • 模板的基本使用逻辑。
    • 模板 + 自己CSS知识点（开发页面）

3.BootStrap

是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap：

  • 下载BootStrap
  • 使用
    • 在页面上引入BootStrap
    • 编写HTML时，按照BootStrap的规定来编写 + 自定制。

3.1 初识

https://v3.bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- HTML注释：开发版本 --><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><!-- 生产版本 --><!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> -->
</head>
<body><input type="button" value="提交" /><input type="button" value="提交" class="btn btn-primary" /><input type="button" value="提交" class="btn btn-success" /><input type="button" value="提交" class="btn btn-danger" /><input type="button" value="提交" class="btn btn-danger btn-xs" /></body>
</html>

在这里插入图片描述

3.2 导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body><div class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">中国联通</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">广西</a></li><li><a href="#">上海</a></li><li><a href="#">神州</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">四川</a></li><li><a href="#">上海</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</div></body>
</html>

3.3 栅格系统

https://v3.bootcss.com/css/#grid

  • 把整体划分为了12格

  • 分类

    • 响应式，根据屏幕宽度不同

      .col-lg-   1170px
.col-md-   970px
.col-sm-   750px

    • 非响应式

      <div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>

    • 列偏移

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body><div><div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div></div>
</body>
</html>

3.4 container

<div class="container-fluid"><div class="col-sm-9">左边</div><div class="col-sm-3">右边</div>
</div>

<div class="container"><div class="col-sm-9">左边</div><div class="col-sm-3">右边</div>
</div>

3.5 面板

<div class="panel panel-default"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div>
</div>

案例：博客

在这里插入图片描述

在这里插入图片描述

案例：登录

在这里插入图片描述

  • 宽度 + 居中（区域居中）
  • 内边距
  • 表单
    在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.account {width: 400px;border: 1px solid #dddddd;border-radius: 5px;box-shadow: 5px 5px 20px #aaa;margin-left: auto;margin-right: auto;margin-top: 100px;padding: 20px 40px;}.account h2 {margin-top: 10px;text-align: center;}</style>
</head>
<body>
<div class="account"><h2>用户登录</h2><form><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></div><input type="submit" value="登 录" class="btn btn-primary"></form>
</div>
</body>
</html>

案例：后台管理

在这里插入图片描述

  • 导航
  • 新建，按钮。
  • 表格，
    在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body>
<div class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">中国联通xx系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">广西</a></li><li><a href="#">上海</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div></div>
</div><div class="container"><div><input type="button" value="新 建" class="btn btn-primary"/></div><div style="margin-top: 20px"><table class="table table-bordered table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div></div></body>
</html>

案例：后台管理+面板

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body>
<div class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">中国联通xx系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">广西</a></li><li><a href="#">上海</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div></div>
</div><div class="container"><div class="panel panel-default"><div class="panel-heading">表单区域</div><div class="panel-body"><form class="form-inline"><div class="form-group"><label class="sr-only" for="exampleInputEmail3">Email address</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"></div><div class="form-group"><label class="sr-only" for="exampleInputPassword3">Password</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"></div><button type="submit" class="btn btn-success">保 存</button></form></div></div><div class="panel panel-default"><div class="panel-heading">数据列表</div><!--<div class="panel-body">注意：以下我们经过筛选出来的重要数据。</div>--><table class="table table-bordered table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td><a class="btn btn-primary btn-xs">编辑</a><a class="btn btn-danger btn-xs">删除</a></td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td><a class="btn btn-primary btn-xs">编辑</a><a class="btn btn-danger btn-xs">删除</a></td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td><a class="btn btn-primary btn-xs">编辑</a><a class="btn btn-danger btn-xs">删除</a></td></tr></tbody></table></div><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></div></body>
</html>

3.6 图标

  • bootstrap提供，不多。

  • fontawesome组件

    https://fontawesome.dashgame.com/

    • 下载

    • 引入

      <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">

    • 使用
      在这里插入图片描述

示例见：

  • 博客
  • 后台管理 + 面板

3.7 BootStrap依赖

BootStrap依赖JavaScript的类库，jQuery。

  • 下载 jQuery，在页面上应用上jQuery。
  • 在页面上应用BootStrap的JavaScript类库。

在这里插入图片描述

4.提前聊JavaScript

  • HTML，静态
  • CSS，好看
  • JavaScript，动态。
    • 编程语言
    • 类库（模块）【jQuery是javaScript的类库】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/340771.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SAP PP配置学习（五）

SAP PP配置学习（五）

查找 四、 其它 设置 MM 过帐号码范围 定义凭证号码范围 OB52 打开期间 MMPV 开帐 &#xff08;下篇见&#xff09;
阅读更多...
pytorch07：损失函数与优化器

pytorch07：损失函数与优化器

目录 一、损失函数是什么二、常见的损失函数2.1 nn.CrossEntropyLoss交叉熵损失函数2.1.1 交叉熵的概念2.2.2 交叉熵代码实现2.2.3 加权重损失 2.2 nn.NLLLoss2.2.1 代码实现 2.3 nn.BCELoss2.3.1 代码实现 2.4 nn.BCEWithLogitsLoss2.4.1 代码实现 三、优化器Optimizer3.1 什么…
阅读更多...
激活/注册navicat15

激活/注册navicat15

一、获取软件 链接&#xff1a;https://pan.baidu.com/s/1F_tiLuLvVFMEz8pDfIvDjw?pwdjjfj 提取码&#xff1a;jjfj 二、安装 安装的过程我就不放了&#xff0c;重点如下 安装完不要打开软件&#xff01; 安装完不要打开软件&#xff01; 安装完不要打开软件&#xff01;…
阅读更多...
谁说贵的就好？揭秘性价比最高的指纹识别模块！

谁说贵的就好？揭秘性价比最高的指纹识别模块！

消费者在购买产品时的一种常见误区&#xff0c;即认为价格高就一定意味着品质好。在指纹识别模块的市场上&#xff0c;这种观念同样存在。但实际上&#xff0c;性价比高并不代表产品价格低&#xff0c;而是指产品在性能、质量、服务等多方面都达到较高标准&#xff0c;且价格合…
阅读更多...
微软Office 2019 批量授权版

微软Office 2019 批量授权版

软件介绍 微软办公软件套件Microsoft Office 2019 专业增强版2024年1月批量许可版更新推送&#xff01;Office2019正式版2018年10月份推出&#xff0c;主要为多人跨平台办公与团队协作打造。Office2019整合对过去三年在Office365里所有功能&#xff0c;包括对Word、Excel、Pow…
阅读更多...
【计算机网络】TCP原理 | 可靠性机制分析（三）

【计算机网络】TCP原理 | 可靠性机制分析（三）

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程、计算机网络的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…
阅读更多...
【.NET Core】可为null类型详解

【.NET Core】可为null类型详解

【.NET Core】可为null类型详解 文章目录 【.NET Core】可为null类型详解一、概述二、可为空的值类型2.1 声明和赋值2.2 检查可为空值类型2.3 基础类型与可为空的值类型互换2.4 可为空的值类型装箱和取消装箱2.5 如何确定可为空的值类型 三、可为 null 的引用类型 一、概述 nu…
阅读更多...
低压系统母线为什么必须装设弧光保护

低压系统母线为什么必须装设弧光保护

安科瑞武陈燕acrelcy 1 重视中低压母线故障的原因 我国电力发展建设的速度超前&#xff0c;它已经进入人电网、大机组、压输电阶段&#xff0c;并且对发电机组的容量要求越来越高&#xff0c;这时就需要在安全运行方面要跟上要求&#xff0c;因为单台大机组的运行情况&#x…
阅读更多...
UG装配-动态干涉检查

UG装配-动态干涉检查

如果设计的产品有运动部件&#xff0c;除了做静态干涉检查外&#xff0c;通常还要做动态干涉检查 动态检查可以使用如下命令&#xff1a;移动组件&#xff0c;序列 在动态干涉检查前&#xff0c;先装配好组件&#xff0c;并且是可运动状态 在使用移动组件命令对运动部件进行…
阅读更多...
java实现AES256对称加解密工具类

java实现AES256对称加解密工具类

一、引入依赖包 引入相关依赖包 <dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.70</version> </dependency> <!--lombok用于简化实体类开发--> <dependency&g…
阅读更多...
RT-Thread入门笔记3-线程的创建

RT-Thread入门笔记3-线程的创建

线程 RT-Thread 中&#xff0c;线程由三部分组成&#xff1a;线程代码&#xff08;入口函数&#xff09;、线程控制块、线程堆栈. 线程代码: 线程控制块 : 线程控制块是操作系统用于管理线程的一个数据结构&#xff0c; 它会存放线程的一些信息&#xff0c; 例如优先级、 线程…
阅读更多...
Python知识点（史上最全）

Python知识点（史上最全）

Python期末考试知识点&#xff08;史上最全&#xff09; python简介 Python是一种解释型语言 Python使用缩进对齐组织代码执行&#xff0c;所以没有缩进的代码&#xff0c;都会在载入时自动执行 数据类型&#xff1a;整形 int 无限大 浮点型 float…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023