天秤座的码农
天秤座的码农

教你快速上手Bootstrap框架

目录

      • 前言
      • 一，Bootstrap 12栅格系统
        • 1.1，Bootstrap 12栅格系统原理
        • 1.2，Bootstrap 12栅格系统的使用
        • 1.3，列组合 col-md
        • 1.3，列偏移 col-md-offset
        • 1.3，列嵌套 col-md
        • 1.3，列排序 col-md-push | col-md-pull
      • 二，响应式栅格
        • 2.1，响应式栅格的使用
      • 三，CSS全局样式
        • 3.1，排版——标题
        • 3.2，排版——对齐方式
        • 3.3，排版——列表
        • 3.4，表单——基本实例
        • 3.5，表单——水平排列的表单
        • 3.6，表单——校验状态
        • 3.7，表单——控件尺寸
        • 3.8，按钮——预定义样式
        • 3.9，按钮——按钮尺寸
      • 五，图片
        • 5.1，图片——响应式图片
        • 5.2，图片——图片形状
      • 最后

前言

根据上一章博客我们讲解了Bootstrap的安装
这一章来讲解一下12栅格系统 排版等等

一，Bootstrap 12栅格系统

1.1，Bootstrap 12栅格系统原理

  • 栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中
  • 实现原理
    • 通过定义容器的大小，平分为12份
    • 调整内外边距
    • 结合媒体查询

1.2，Bootstrap 12栅格系统的使用

  • 列组合
  • 列偏移
  • 列嵌套
  • 列排序

1.3，列组合 col-md

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    }
style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" >第一行：.col-md-4div>
            <div class="col-md-8">第一行：.col-md-8div>
        div>
        <div class="row">
            <div class="col-md-2">第二行：.col-md-2div>
            <div class="col-md-10">第二行：.col-md-10div>
        div>
        <div class="row">
            <div class="col-md-6">第三行：.col-md-6div>
            <div class="col-md-6">第三行：.col-md-6div>
        div>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>
  • 通过更改数字来合并列就是列组合

教你快速上手Bootstrap框架_第1张图片

1.3，列偏移 col-md-offset

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    }
style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-1" >第一行：.col-md-4div>
            <div class="col-md-8">第一行：.col-md-8div>
        div>
        <div class="row">
            <div class="col-md-2 col-md-offset-1">第二行：.col-md-2div>
            <div class="col-md-4 col-md-offset-1">第二行：.col-md-4div>
        div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">第三行：.col-md-10div>
            <div class="col-md-4">第三行：.col-md-4div>
        div>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>
  • 使用 .col-md-offset-* 类可以将列向右侧偏移
  • 一行12占满之后会自动下一行

教你快速上手Bootstrap框架_第2张图片

1.3，列嵌套 col-md

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    }
style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-10">第一行：.col-md-10div>
            <div class="col-md-2">第一行：.col-md-2div>
        div>
        <div class="row">
            <div class="col-md-6">第二行：.col-md-6div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">1-1div>
                    <div class="col-md-6">1-2div>
                div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-6">2-1div>
                            <div class="col-md-6">2-2div>
                        div>
                        
                    div>
                    <div class="col-md-6">2-2div>
                div>
            div>
        div>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>
  • 为了使用内置的栅格系统将内容再次嵌套，可以在已存在的 .col-md-* 元素内添加一个新的 .row 元素和一系列 .col-md-* 元素。需要注意的是，被嵌套的行所包含的列的个数不能超过12

教你快速上手Bootstrap框架_第3张图片

1.3，列排序 col-md-push | col-md-pull

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    }
style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-10">第一行：.col-md-10div>
            <div class="col-md-2">第一行：.col-md-2div>
        div>
        <div class="row">
            <div class="col-md-4 col-md-push-1" >第二行：.col-md-4div>
            <div class="col-md-4 col-md-pull-1">第二行：.col-md-4div>
        div>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>
  • 通过使用col-md-push 和 col-md-pull 类就可以改变列的顺序

教你快速上手Bootstrap框架_第4张图片
教你快速上手Bootstrap框架_第5张图片

二，响应式栅格

教你快速上手Bootstrap框架_第6张图片

2.1，响应式栅格的使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <div class="col-md-8 col-xs-12">
            <h3>献给父亲身后默默支持的英雄h3>
            <div class="row">
                <ul class="col-md-6 col-xs-12">
                    <li>这是一首由董玉方作词，许飞作曲、演唱的歌曲li>
                ul>
                <ul class="col-md-6 col-xs-12">
                    省略部分HTML代码
            div>
        div>
    
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>
  • 页面方法缩小自适应

教你快速上手Bootstrap框架_第7张图片
教你快速上手Bootstrap框架_第8张图片

三，CSS全局样式

  • 又称为CSS布局，是Bootstrap三大核心内容的基础
  • 包括
    • 排版（Typography）
      • 标题、页面主体、对齐方式、列表
    • 表单（Forms）
      • 基本实例、内联表单、水平排列的表单、校验状态、控件尺寸
    • 按钮（Buttons）
      • 预定义样式、按钮尺寸
    • 图片（Images）
      • 响应式图片、图片形状

3.1，排版——标题

  • 在Bootstrap框架中，HTML的<'h1> 到 <'h6>均重新定义了标准样式，即提供了 .h1 到 .h6 类，目的是为内联属性的文本赋予标题的样式
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <h1>我是h1h1>
        <h2>我是h2h2>
        <h3>我是h3h3>
        <h4>我是h4h4>
        <h5>我是h5h5>
        <h6>我是h6h6>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

平常使用标题标签的方式
教你快速上手Bootstrap框架_第9张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <span class="h1">我是h1span><br/>
        <span class="h2">我是h2span><br/>
        <span class="h3">我是h3span><br/>
        <span class="h4">我是h4span><br/>
        <span class="h5">我是h5span><br/>
        <span class="h6">我是h6span><br/>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

在非标题标签下使用 .h1 到 .h6 类的方式

教你快速上手Bootstrap框架_第10张图片

3.2，排版——对齐方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <div class="duiqi text-center">
            居中
        div><br>
        <div class="duiqi text-left">
            左对齐
        div><br>
        <div class="duiqi text-right">
            右对齐
        div><br>
        <div class="duiqi text-justify">
            两端对齐
        div><br>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

通过文本对齐类，可以简单方便的将文字重新对齐

教你快速上手Bootstrap框架_第11张图片

3.3，排版——列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <dl class="dileibiao dl-horizontal">
            <dt>水果dt>
            <dd>苹果、香蕉、橙子、西瓜、火龙果、猕猴桃dd>
            <dt>咖啡dt>
            <dd>速溶咖啡、拿铁、美式、摩卡dd>
            <dt>茶叶dt>
            <dd>红茶、绿茶、乌龙茶、黄茶、白茶、黑茶dd>
        dl><br>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

水平定义列表

教你快速上手Bootstrap框架_第12张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <ul class="lileibiao list-inline text-center">
            <li>HTMLli>
            <li>CSSli>
            <li>JavaScriptli>
            <li>Bootstrapli>
        ul>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

内联列表

教你快速上手Bootstrap框架_第13张图片

3.4，表单——基本实例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <form class="form-inline" action="#">
            <div class="form-group">
                <label for="user">用户名:label>
                <input type="text" class="form-control" id="user" placeholder="请输入用户名">
            div>
            <div class="form-group">
                <label for="pwd">密码:label>
                <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
            div>
            <input type="submit" class="form-control" value="登录">
        form>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

在表单的默认样式基础上给表单添加 .form-control 和.form-group

教你快速上手Bootstrap框架_第14张图片

3.5，表单——水平排列的表单

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <form class="form-horizontal" action="#">
            <div class="form-group">
                <label for="user" class="col-md-1">用户名:label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                div>
            div>
            <div class="form-group">
                <label for="pwd" class="col-md-1">密码:label>
                <div class="col-md-8">
                    <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                div>
            div>
            <div class="form-group">
                <div class="col-md-offset-3 col-md-2">
                    <input type="submit" class="form-control" value="登录">
                div>
            div>
        form>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

可以通过为表单添加 .form-horizontal ，并联合使用Bootstrap预置的栅格类，可以将文字和表单控件水平排列布局

教你快速上手Bootstrap框架_第15张图片

3.6，表单——校验状态

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <form class="form-horizontal" action="#">
            <div class="form-group has-warning">
                <label for="user" class="col-md-1">用户名:label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                div>
            div>
            <div class="form-group has-error">
                <label for="pwd" class="col-md-1">密码:label>
                <div class="col-md-8">
                    <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                div>
            div>
            <div class="form-group">
                <div class="col-md-offset-3 col-md-2">
                    <input type="submit" class="form-control" value="登录">
                div>
            div>
        form>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

添加 .has-warning、.has-error 或 .has-success 到表单控件的父元素即可校验表单状态

教你快速上手Bootstrap框架_第16张图片

3.7，表单——控件尺寸

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <form class="form-horizontal" action="#">
            <div class="form-group">
                <input type="text" class="input-lg form-control" placeholder="大型输入框">
            div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="正常输入框">
            div>
            <div class="form-group">
                <input type="text" class="input-sm form-control" placeholder="小型输入框">
            div>        
        form>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

通过.input-lg和.input-sm设置表单控件的尺寸

教你快速上手Bootstrap框架_第17张图片

3.8，按钮——预定义样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <form class="form-horizontal" action="#">
            <button type="button" class="btn btn-default">（默认样式-灰色）Defaultbutton>
            <button type="button" class="btn btn-primary">（首选项-深蓝色）Primarybutton>
            <button type="button" class="btn btn-success">（成功-绿色）Successbutton>
            <button type="button" class="btn btn-info">（一般信息-天蓝色）Infobutton>
            <button type="button" class="btn btn-warning">（警告-黄色）Warningbutton>
            <button type="button" class="btn btn-danger">（危险-红色）Dangerbutton>
            <button type="button" class="btn btn-link">（链接）Linkbutton>
        form>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

Bootstrap框架提供了七种样式的按钮风格

教你快速上手Bootstrap框架_第18张图片

3.9，按钮——按钮尺寸

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <form class="form-horizontal" action="#">
            <button type="button" class="btn btn-default">（默认样式-灰色）默认大小button>
            <button type="button" class="btn btn-primary btn-lg">（首选项-深蓝色）大型按钮
        button>
            <button type="button" class="btn btn-success btn-sm">（成功-绿色）小型按钮
        button>
            <button type="button" class="btn btn-info btn-xs">（一般信息-天蓝色）超小型按钮
        button>
        form>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

可以通过.btn-lg、.btn-sm 或 .btn-xs实现按钮具有不同的尺寸

在这里插入图片描述

五，图片

5.1，图片——响应式图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <img src="../../淘宝/img/1231.png" class="img-responsive">

    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>
  • 为图片添加 .img-responsive 可以让图片支持响应式布局
  • 实质是为图片设置了max-width: 100%;、 height: auto; 和display: block; 属性，从而让图片在其父元素中更好的缩放

教你快速上手Bootstrap框架_第19张图片

5.2，图片——图片形状

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板title>
    
    <link rel="stylesheet" href="../css/bootstrap.min.css">
head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
style>
<body>
    <div class="container">
        <img src="../../淘宝/img/1231.png" class="img-rounded img-responsive" width="50%" alt=""><br>
        <img src="../../淘宝/img/1231.png" class="img-circle img-responsive" width="50%" alt=""><br>
        <img src="../../淘宝/img/1231.png" class="img-thumbnail img-responsive" width="50%" alt=""><br>
    div>
body>

<script src="../js/jquery.js">script>

<script src="../js/bootstrap.min.js">script>
html>

为 元素添加.img-rounded、.img-circle、.img-thumbnail，可以让图片呈现不同的形状

教你快速上手Bootstrap框架_第20张图片

最后

送大家一句最喜欢比阿斯的短话： 要从容地着手去做一件事，但一旦开始，就要坚持到底。

你可能感兴趣的:(bootstrap,前端,html)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • iOS http封装 374016526 ios服务器交互http网络请求
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
      那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
  • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
  • Informatica参数及变量 18289753290 Informatica参数变量
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
  • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
  • Hibernate的总结 永夜-极光 Hibernate
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
  • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
  • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
  • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
    创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
  • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
  • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
    一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
  • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
    1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
  • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
  • 提高职业素养，做好人生规划 白糖_ 人生
      培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
  • 国外的网站你都到哪边看？ bozch 技术网站国外
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
  • 编程之美-光影切割问题 bylijinnan 编程之美
    package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
  • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
            现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
  • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
    The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
  • 关于 CAS SSO 文章声明 denger SSO
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
  • 初二上学期难记单词 dcj3sjt126com englishword
    lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
  • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
    #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
  • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
    /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
  • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
    页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
  • spring中少用的注解@primary解析 jackyrong primary
    这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
  • Java几款性能分析工具的对比 lbwahoo java
    Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
  • JVM参数配置大全 nickys jvm应用服务器
    JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
  • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
    （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
  • Spring缓存注解@Cache使用 tom_seed spring
    参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他