HTML 10.20

HTML第四天

一 Bootstrap

1.1 框架

框架就是项目的基础构建的设定。 我们在做项目的时候，会有一些相同的操作，如果每个项目在开始的时候 都需要这些基础操作，但是如果每个项目都去在基础操作上浪费时间此时是得不偿失。所以 就有一帮大牛 将基础操作给我们写好了。我们就可以在他们写好的内容基础之上做二次开发。 所以我们就将其写好的内容（代码）称之为 框架。

简单的说 框架就是大牛写好的我们能直接使用的代码。 开发部 用框架研发部 写框架 开源框架

1.2官网

https://www.bootcss.com/

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

找到 BOOT3 选择入门
入门的第一件事情 是让我们下载 原因是 框架就是大牛写好的代码 所以我们要使用的时候 首先要把大牛的代码下载下来
下载的方式 A 下载源代码到我们的电脑 B BootstrapCDN远程引用

首先我们创建一个工程 link远程引入bootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>


</body>
</html>

 

 

1.3 table 组件


 此时 bootstrap给我们写好了一个table 让我们使用
​
​
<table class="table  table-striped table-bordered table-hover">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="danger">张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="warning">张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京</td>
                <td>操作</td>
            </tr>
​
​

 

1.4 button


<button type="button" class="btn btn-danger">登录</button>
<button type="button" class="btn btn-primary">修改</button>
​
<button type="button" class="btn btn-primary btn-lg">修改</button>
<button type="button" class="btn btn-primary btn-xs">修改</button>
​
<button type="button" class="btn btn-primary btn-lg btn-block">修改</button>
​
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

1.5 icon


1 找到自己喜欢的图标
2 复制码
3 在合适的位置 创建一个span标签 并且添加class属性 将码赋值给class
​
​
                 <td>
                    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>删除</button>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span>修改</button>
                </td>
​
​

 

1.6 巨幕


​
        <div class="jumbotron"   style="text-align: center;background: linear-gradient(45deg,#020031,#6d3353);color: white;">
          <h1>欢迎来到学生管理系统</h1>
          <p>本系统QY146专属</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </div>

 

1.7 栅格系统


1 栅格系统简介
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
​
就是当前流式布局的一个功能 让我们可以快速完成页面布局的搭建 将一行分成12列 我们根本实际需求 搭建合适的列 再填入相应内容即可
​
2 栅格系统基本搭建
​
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <style type="text/css">
            div{border: 1px solid red;}
        </style>
    </head>
    <body>
        
        
        <div class="row">
            <div class="col-md-5">11111</div>
            <div class="col-md-6">22222</div>
            <div class="col-md-1">33333</div>
        </div>
        
        <div class="row">
            <div  class="col-md-6">11111111</div>
            <div  class="col-md-6">22222222</div>
        </div>
        
        <div class="row">
            <div class="col-md-2"><img src="" ></div>
            <div class="col-md-8"><input type="" name="" id="" value="" /><button></button></div>
            <div class="col-md-2"><img src="" ></div>
        </div>
        
    </body>
</html>
​
​
3 响应式布局
​
​
 <div class="row">
            <div class="col-md-5   col-sm-1">11111</div>
            <div class="col-md-6   col-sm-1">22222</div>
            <div class="col-md-1   col-sm-10">33333</div>
        </div>
代表的含义就是 三个div 在电脑上面的比例是 5 6 1   如果在平台显示 就是 1 1 10
​
​
​
4 列偏移
​
    
        <div class="row">
            <div class="col-md-2  col-md-offset-2 ">11111</div>
            <div class="col-md-3  col-md-offset-4 ">22222</div>
        </div>
        
​
5 嵌套列
​
<div class="row">
            <div class="col-md-4  col-md-offset-4">
                <div class="row">
                    <div class="col-md-2">
                        <a href="">立即注册</a>
                    </div>
                    <div class="col-md-4 col-md-offset-6">
                        <a href="">修改密码</a>
                        <a href="">忘记密码</a>
                    </div>
                </div>
            </div>
        </div>

​

 

练习


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <style type="text/css">
            div{border: 0px solid red;}
        </style>
    </head>
    <body>
        <div class="row" style=" line-height: 50px; height: 50px;">
            <div class="col-md-2 col-md-offset-1">
                <img src="https://uniportal.huawei.com/uniportal/images/huawei_logo.png?version=2.0" width="150px" />
            </div>
            <div class="col-md-3 col-md-offset-6">
                <div class="row">
                <div class="col-md-3 col-md-offset-2"><a href="" style="color: white;">联系我们</a></div>
                <div class="col-md-2 col-md-offset-1"><a href="" style="color: white;">帮助</a></div>
                <div class="col-md-4"><a href="" style="color: white;">简体中文(中国)</a></div>
                
                </div>
            </div>
        </div>
        <h1 style="text-align: center; margin-top: 75px; font-weight: bold;">Uniportal帐号登录</h1>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="row" style="text-align: center; line-height: 50px; height: 50px;">
                <div class="col-md-4" style="border-bottom: 2px solid red;">
                    <a href="" style="color: black;">账号/邮箱登录</a>
                </div>
                <div class="col-md-4" style="border-bottom: 2px solid  #808080;">
                    <a href="" style="color: #808080;">手机号码登录</a>
                </div>
                <div class="col-md-4" style="border-bottom: 2px solid  #808080;">
                    <a href="" style="color: #808080;">短信登录</a>
                </div>
                </div>
            </div>
        </div>
        
        
                <div class="row" style="margin-top: 50px;">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="row" style="text-align: center;height: 50px;line-height: 50px;">
                            <form>
                              <div class="form-group">
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Uniportal帐号/邮箱/W3帐号" style="height: 50px;">
                              </div>
                              <div class="form-group">
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码" style="height: 50px;">
      </div>
      <button type="submit" class="btn btn-danger btn-block btn-lg" >登录</button>
</form>
</div>
</div>
</div>

<div class="row" style="margin-top: 150px;">
<div class="col-md-4 col-md-offset-4">
<div class="row">
<div class="col-md-2"><a href="" style="color: #9fceff;">立即注册</a></div>
<div class="col-md-4 col-md-offset-6"><a href="" style="color: #9fceff;">忘记密码</a> <a href="" style="color: #9fceff;">修改密码</a></div>
</div>
</div>
</div>
</body>
</html>
​

 

posted @ 2021-10-20 20:40  吴光熠  阅读(165)  评论(0)    收藏  举报