蜀﹏绣
蜀﹏绣

bootstrap花里胡哨部分笔记

由于组件部分官方整理的非常好，在这里不再整理
https://v4.bootcss.com/docs/4.0/components/alerts/

1.网格系统

v3:

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

v4:

https://v4.bootcss.com/docs/4.0/layout/grid/

container和container-fluid（v3,v4相同）

  • container两边有一定的margin
  • container-fluid占满横向全屏，无两侧margin
  • 行用row，列col
  • 一行共12份
 <div class="container">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;">div>
        <div class="col-lg-4" style="background-color: red;">div>
        <div class="col-lg-4" style="background-color: #09afff;">div>
    div>
  div>

 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;">div>
        <div class="col-lg-4" style="background-color: red;">div>
        <div class="col-lg-4" style="background-color: #09afff;">div>
    div>
  div>

container的不同之处

v3container由分成四段：

bootstrap花里胡哨部分笔记_第1张图片

v4container由分成五段：

bootstrap花里胡哨部分笔记_第2张图片

V4中可直接使用class="col-n"和class=“col”

  • 在v3中只能使用col-md(lg,sm,xs)-n，实测显示在v3中使用class="col-n"和class=“col”，每个col分别占一行
  • 在v4中假设使用col-4,则3个col-4占一行
  • 在v4中假设使用col,则不管多少个，就算超出12份，所有的col都占一行，且均分

请看代码：（v4）

<container>
  <div class="row">
    <div class="col-4" style="background-color: red;">div>
    <div class="col-4" style="background-color: blue;">div>
    <div class="col-4" style="background-color: yellow;">div>
    <div class="col-4" style="background-color: yellow;">div>
    <div class="col-4" style="background-color: green;">div>
    <div class="col-4" style="background-color: red;">div>
  div>
container>

效果:

[外链图片转存失败(img-7GsuWYBS-1564649104368)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410881971.png)]

<container>
  <div class="row">
    <div class="col" style="background-color: red;">div>
    <div class="col" style="background-color: blue;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="col" style="background-color: green;">div>
    <div class="col" style="background-color: red;">div>
  div>
container>

效果：

[外链图片转存失败(img-jG3KkkbQ-1564649104369)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410893487.png)]

  • 如果想要换行，可以加一个类 .w-100,意思是width:100%;
<container>
  <div class="row">
    <div class="col" style="background-color: red;">div>
    <div class="col" style="background-color: blue;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="w-100" style="background-color: green;">div>
    <div class="col" style="background-color: red;">div>
  div>
container>

bootstrap花里胡哨部分笔记_第3张图片

  • 根据内容多少改变列的宽度col-auto
  <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3" style="background-color: #09afff;">div>
      <div class="col-lg-auto mr-auto" style="background-color: red;">1111111111111div>
      <div class="col-lg-3" style="background-color: #09afff;">div>
    div>

[外链图片转存失败(img-i6FclZLA-1564649104371)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410916625.png)]

v4中的对齐方式（类似flex布局）

垂直对齐

  • 想让里面的列改变垂直对齐的方式,给父元素添加一个叫align-item-***的类
  • align-item-start(上对齐)align-item-center(中间对齐)align-item-end(下对齐)
  • 某列想要改变自己的对齐方式，align-self-***
  <div class="row align-items-end" style="height:100px;border:1px solid red;">
      <div class="col align-self-center" style="background-color: #09afff;">div>
      <div class="col" style="background-color: red;">div>
      <div class="col" style="background-color: #09afff;">div>
    div>

bootstrap花里胡哨部分笔记_第4张图片

水平对齐

  • 想让里面的列改变垂直对齐的方式,给父元素添加一个叫justify-content-***的类
  • justify-content-start(左对齐)justify-content-center(中间对齐)justify-content-end(右对齐)justify-content-around(每个元素两端均匀分布)justify-content-between(两端对齐，中间均匀分布)
 <div class="row justify-content-end" style="height:100px;border:1px solid red;">
      <div class="col-md-3" style="background-color: #09afff;">div>
      <div class="col-md-3 " style="background-color: red;">div>
      <div class="col-md-3" style="background-color: #09afff;">div>
    div>

[外链图片转存失败(img-ZAo2iX5v-1564649104372)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410952301.png)]

没有排水沟？？

  • 给.row添加no-gutters,去除col两端默认的15px的padding
 <div class="row justify-content-end no-gutters" style="height:100px;border:1px solid red;">
      <div class="col-md-3" style="background-color: #09afff;">div>
      <div class="col-md-3 " style="background-color: red;">div>
      <div class="col-md-3" style="background-color: #09afff;">div>
    div>

排序

  • order-n(默认为0，数值越大，越靠右)
  • order-first放在最左
  • order-last放最右
<div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3" style="background-color: #1c7430;">div>
      <div class="col-lg-auto order-1" style="background-color: red;">1111111111111div>
      <div class="col-lg-3 order-first" style="background-color: #09afff;">div>
    div>

[外链图片转存失败(img-WvFpqnEL-1564649104372)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410967257.png)]

列偏移

v3:

  • col-md-push-n向右偏移
  • col-lg-pull-n向左偏移
  • 可以覆盖冲突的部分
  <div class="container">
    <div class="row">
      <div class="row align-items-end" style="height:100px;border:1px solid red;">
        
        <div class="col-lg-3 col-lg-push-1 align-self-center" style="background-color: #09afff;">div>
        <div class="col-lg-3 col-lg-pull-1" style="background-color: red;">div>
        <div class="col-lg-3" style="background-color: #09afff;">div>
      div>
    div>
  div>

[外链图片转存失败(img-zWHDThpQ-1564649104373)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410974962.png)]

v4:

  • offset-n向右偏移
  • mr-auto 加此类的元素右侧全部右靠齐
  • ml-auto 加此类的元素右侧全部左靠齐
    <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3 mr-auto  offset-1" style="background-color: #1c7430;">div>
      <div class="col-lg-auto" style="background-color: red;">1111111111111div>
      <div class="col-lg-3" style="background-color: #09afff;">div>
    div>

[外链图片转存失败(img-C0douwaw-1564649104374)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410986337.png)]

嵌套（v4v3相同）

    <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-4" style="background-color: #1c7430;">div>
      <div class="col-lg-4">
        <div class="row">
        <div class="col-lg-6" style="background-color: #09afff;">div>
        <div class="col-lg-6" style="background-color: yellow;">div>
      div>
      div>
      <div class="col-lg-4" style="background-color: #09afff;">div>
    div>

[外链图片转存失败(img-T5ggox83-1564649104374)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410997936.png)]

2.bootstrap文本

缩略语

 <abbr title="这是一个缩略语">emailabbr>

现实的样式：出现虚线下划线

文本转大小写

 <div class="container">
      <abbr title="这是一个缩略语">emailabbr>
      <br>
      <abbr title="这是一个缩略语" class="text-uppercase">emailabbr>
      <abbr title="这是一个缩略语" class="text-lowercase">EMAILabbr>
      <abbr title="这是一个缩略语" class="text-capitalize">email from liabbr>
 div>

运行结果：

bootstrap花里胡哨部分笔记_第5张图片

来源备注与引用

欲想达成下面的效果：

bootstrap花里胡哨部分笔记_第6张图片

 <blockquote class="blockquote">
         <p class="mb-0">对酒当个人生几何p>
         
         <footer class="blockquote-footer">曹操<cite>《短歌行》cite>footer>
 blockquote>

列表

  • 清除前面的序号

     <ul class="list-unstyled">
            <li>111li>
            <li>111li>
            <li>111li>
ul>

  • 嵌套情况

    <ul class="list-unstyled">
            <li>111li>
            <li>111li>
            <li>111li>
            <ul>
                <li>2222li>
                <li>2222li>
                <li>2222li>
            ul>
ul>

    bootstrap花里胡哨部分笔记_第7张图片

  • 分行或单行显示

    • list-inline list-inline-item

       <ul class="list-inline">
            <li class="list-inline-item">111li>
            <li class="list-inline-item">111li>
            <li class="list-inline-item">111li>
ul>

    • float

      <ul class="list-unstyled clearfix">
            <li class="float-left">222li>
            <li class="float-left">222li>
            <li class="float-left">222li>
ul>

    效果对比：上为inline下位float

    bootstrap花里胡哨部分笔记_第8张图片

键盘动作提示

使用kbd标签，表明这是一个键盘输入操作

  • 黑底白字，不知道有何用，花里胡哨
<kbd>Loremkbd> ipsum dolor, sit <kbd>ametkbd> consectetur adipisicing elit. Commodi

[外链图片转存失败(img-Q5tpHH02-1564649104376)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564361543645.png)]

3.boostrap图片

img-fluid

  • img-fluid等同于width:100%;
  • no-gutters 去除15px的padding 加在row上
<div class="container">
        <div class="row no-gutters">
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="img-fluid">
            div>
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="w-100">
            div>
        div>
div>

bootstrap花里胡哨部分笔记_第9张图片

img-thumbnail 缩略图

无非加点边框

<div class="container">
        <div class="row no-gutters">
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="img-fluid">
            div>
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="w-100">
            div>
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="img-fluid img-thumbnail">
            div>
        div>
div>

bootstrap花里胡哨部分笔记_第10张图片

rounded mx-auto

  • rounded 图片添加0.25rem的圆角
  • mx-auto => margin:0 auto;
 <div class="container">
        <img src="./1.jpg" alt="" class="mx-auto d-block w-25">
        <div class="text-center">
        <img src="./1.jpg" alt="" class="w-25 rounded">
        div>
 div>

效果为图片居中

picture

需求：大屏幕时显示1.jpg 中等屏幕显示2.jpg 其他屏幕显示3.jpg

 <picture>
            <source srcset="1.jpg" media="(min-width:992px)">
            <source srcset="2.jpg" media="(min-width:576px)">
            <img src="3.jpg" alt="">
picture>

4.bootstrap 表格

https://v4.bootcss.com/docs/4.0/content/tables/

table相关样式

  • table 变为bootstrap表格
    bootstrap花里胡哨部分笔记_第11张图片

  • table-dark 背景为黑色
    bootstrap花里胡哨部分笔记_第12张图片

  • table-danger 背景为红色

  • table-striped 添加斑马条纹
    bootstrap花里胡哨部分笔记_第13张图片

  • table-bordered 表格添加外边框
    bootstrap花里胡哨部分笔记_第14张图片

  • table-hover 鼠标经过本行高亮
    bootstrap花里胡哨部分笔记_第15张图片

  • table-sm 表格整体变小
    bootstrap花里胡哨部分笔记_第16张图片

caption

表格添加标题

 <table class="table table-sm ">
            <caption>表格标题caption>
            <thead>

bootstrap花里胡哨部分笔记_第17张图片

thead相关样式

  • thead-dark

    [外链图片转存失败(img-uEk1x56a-1564649104381)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365269859.png)]

  • thead-light
    [外链图片转存失败(img-34Rm6DxV-1564649104381)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365287536.png)]

颜色1

<tr class="table-active">...tr>
<tr class="table-primary">...tr>
<tr class="table-secondary">...tr>
<tr class="table-success">...tr>
<tr class="table-danger">...tr>
<tr class="table-warning">...tr>
<tr class="table-info">...tr>
<tr class="table-light">...tr>
<tr class="table-dark">...tr>

bootstrap花里胡哨部分笔记_第18张图片

颜色2（此五颜色熟记）

  • bg-primary
  • bg-success
  • bg-danger
  • bg-warning
  • bg-info

bootstrap花里胡哨部分笔记_第19张图片

响应式表格

在

外使用table-responsive

[外链图片转存失败(img-Z9AQTcHD-1564649104383)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365756185.png)]

5.bootstrap边框

添加边框属性

默认添加一行 border: 1px solid #dee2e6!important;

这个属性好像是没什么卵用？？？？

  • border
  • border-bottom
  • boirder-top
  • border-left
  • border-right

清除边框属性

  • border-0
  • border-top-0
  • border-bottom-0
  • border-left-0
  • border-right-0

添加边框颜色

  • border-info
  • border-danger
  • border-success
  • border-primary
  • border-warning
  • border-light
  • border-dark
  • border-white

rounded

  • rounded-circle

<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .container {
            margin-top:100px;
        }
        span {
            display: inline-block;
            width: 75px;
            height: 75px;
            background-color: #eee;
            border:1px solid #000;
        }
    style>
head>
<body>
    <div class="container">
        <span class="border">span>
        <span class="border-bottom">span>
        <span class="border-top">span>
        <span class="border-left">span>
        <span class="border-right">span>
    div>
    <div class="container">
            <span class="border-0">span>
            <span class="border-bottom-0">span>
            <span class="border-top-0">span>
            <span class="border-left-0">span>
            <span class="border-right-0">span>
    div>
    <div class="container">
            <span class="border-success">span>
            <span class="border-primary">span>
            <span class="border-danger">span>
            <span class="border-warning">span>
            <span class="border-info">span>
            <span class="border-light">span>
            <span class="border-dark">span>
            <span class="border-white">span>
    div>
    <div class="container">
        <span class="rounded">span>
        <span class="rounded-circle">span>
    div>
body>
html>

bootstrap花里胡哨部分笔记_第20张图片

6.display + text + mw-100 mh-100

display

  • display-[value]-none (important!!!)
  • display-inline-block
  • display-table
  • …

text

  • text-truncate 当行超出部分以省略号显示
  • text-nowrap 超出不换行
  • text-justify 消除行末空白的情况

mw-100 mh-100

  • mw-100 => max-width:100;
  • mh-100 => max-height:100;
<body>
    <div class="container">
        <p class="w-25 text-nowrap border">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint officiis
            natus, sit dolor incidunt ducimus explicabo, eum possimus totam quasi, repellendus corrupti. Cumque tenetur
            animi quas, non a harum eligendi?p>
        <p class="w-25 text-truncate border">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint officiis
            natus, sit dolor incidunt ducimus explicabo, eum possimus totam quasi, repellendus corrupti. Cumque tenetur
            animi quas, non a harum eligendi?p>

        <div style="height: 200px;width:200px;">
            <div style="height: 400px;width:400px;background: violet;" class="mw-100 mh-100">div>
        div>
    div>
body>

bootstrap花里胡哨部分笔记_第21张图片

7.bootstrap边距和阴影

边距

https://v4.bootcss.com/docs/4.0/utilities/spacing/

内边距

t-top, l-left, r-right, b-bottom, x-水平 ，y-垂直

  • p-[断点]-[边距的值]
    • 边距值为0-5和auto
  • p-xl-1 大屏幕下所有内边距为0.25rem
  • pt-md-5 中等屏幕上内边距为3rem
  • px-auto 水平为padding:auto;
 <div class="container">
      <div class="w-25 bg-danger mx-auto pt-3" style="height: 100px;">123div>
      <div class="w-25 bg-success m-5 p-3">123div>
 div>

bootstrap花里胡哨部分笔记_第22张图片

外边距

同内边距，把p变为m即可

阴影？（？效果进不来）

8.定位 + 显示隐藏 + 关闭图标

定位

position

  • class=“position-relative/position…”
 <div class="position-relative border" style="width: 200px;height: 200px;">
    <div class="position-absolute bg-success" style="width: 100px;height: 100px;top:0;right:0;">div>
div>

bootstrap花里胡哨部分笔记_第23张图片

固定于顶部

 <div style="padding:100px 0; ">
            <header class="bg-danger fixed-top" style="height: 100px;"><div class="container">headerdiv>header>
            <div class="container">
                1<br>2<br>3<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                111<br>222<br>333<br>
            div>
          <footer class="bg-danger fixed-bottom" style="height: 100px;"><div class="container">footerdiv>footer>
div>

bootstrap花里胡哨部分笔记_第24张图片

贴齐于顶部

<h1 class="text-center">大标题h1>
        <header class="bg-danger sticky-top" style="height: 100px;">
            <div class="container">headerdiv>
        header>
        <div class="container">
            1<br>2<br>3<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            111<br>222<br>333<br>
        div>
        <footer class="bg-danger" style="height: 100px;">
            <div class="container">footerdiv>
 footer>

效果同上,且可以在上面 增加内容

invisible 依旧占有位置

 <h1 class="text-center invisible">大标题h1>

关闭图标close

  <button class="close">xbutton>

.close {

  1. ​ float: right;
  2. ​ font-size: 1.5rem;
  3. ​ font-weight: 700;
  4. ​ line-height: 1;
  5. ​ color: #000;
  6. ​ text-shadow: 0 1px 0 #fff;
  7. ​ opacity: .5;

}

9.嵌入


<div class="embed-responsive embed-responsive-1by1">
   <iframe src="http://www.taobao.com" class="embed-responsive-item">iframe>
div>

10.图像替换

  • 利于搜索引擎优化
  • example:将图片替换成标题
 <h1 class="text-hide" style="background:url('./1.jpg');height: 100px;width: 100px;">这里的文字显示不出来，被text-hide掉h1>

你可能感兴趣的:(bootstrap花里胡哨部分笔记)

  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • 消息中间件有哪些常见类型 xmh-sxh-1314 java
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • git常用命令笔记 咩酱-小羊 git笔记
    ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言
    目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
  • 【夜读】提升生活品质的8个建议 茳淮秀水
    停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 如何部分格式化提示模板:LangChain中的高级技巧 nseejrukjhad langchainjava服务器python
    标题:如何部分格式化提示模板:LangChain中的高级技巧内容:如何部分格式化提示模板:LangChain中的高级技巧引言在使用大型语言模型(LLM)时,提示工程是一个关键环节。LangChain提供了强大的提示模板功能,让我们能更灵活地构建和管理提示。本文将介绍LangChain中一个高级特性-部分格式化提示模板,这个技巧可以让你的提示管理更加高效和灵活。什么是部分格式化提示模板?部分格式化提
  • 没有一件绝对好看的衣服 段童
    没有一件绝对好看的衣服只有好看的人没有绝对好看的人只有你可能会爱上的他没有你绝对会爱上的他只有你从来就缺少的那一部分的自己爱是本能的脆弱是欲望的茧——《没有一件绝对好看的衣服》
  • 把握“三度”打造“三有”干部队伍 辛德瑞拉卡卡卡
    “胜败兴亡之分，不得不归咎于人事也”。干部队伍建设工作的好坏，关系到党和国家的发展全局。近日，新疆维吾尔自治区党委书记马兴瑞在部分党群单位走访调研时强调，要努力培养造就忠诚干净担当的高素质专业化干部队伍。各级组织部门应当在培养选拔干部、吸收优秀青年到党内来、培养造就优秀人才上下功夫，切实增强干部投身实践、解决问题、推进工作的能力，着力打造高素质专业化干部队伍。“天生我材必有用”，增强选育有“准度”
  • Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
    高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • 人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
    随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 数据仓库——维度表一致性 墨染丶eye 背诵数据仓库
    数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • docker igotyback eureka云原生
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
  • 18、架构-可观测性之聚合度量 大树~~ 架构javapython后端架构
    聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标
  • 【Git】常见命令(仅笔记) 好想有猫猫 GitLinux学习笔记git笔记elasticsearchlinuxc++
    文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
  • 教育 用心灵温暖心灵
    @陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
  • 读《人间鲁迅》有感 琳语读书
    上周读完《闻一多传》后，我对中国近代知识分子产生了兴趣，这周继续读了《人间鲁迅》。厚厚的两本书，记录了一个人的一生，苦痛，彷徨和挣扎，虽然只读了一小部分，却也心潮澎湃。闻一多和鲁迅是完全不同的。鲁迅是沉郁的，现实的，寂寞的，抗争的。除了天生性格的不同外，环境的塑造也是非常之大。鲁迅少年经历了家庭的变故，看尽了人间冷暖，世态炎凉。这种经历促使他很早就观察思考人生，立志用文学来改变中国国民的劣根。闻一
  • 在Ubuntu中编译含有JSON的文件出现报错 芝麻糊76 Linuxkill_buglinuxubuntujson
    在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
  • 安装数据库首次应用 Array_06 javaoraclesql
    可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面 这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！ 注意第一次，使用SQL D
  • Weblogic Server Console密码修改和遗忘解决方法 bijian1013 Welogic
            在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。 一.修改Console密码         打开weblogic控制台，安全领域 --> myrealm -->&n
  • IllegalStateException: Cannot forward a response that is already committed Cwind javaServlets
    对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。 示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi
  • 基于流的装饰设计模式 木zi_鸣 设计模式
    当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。 自定义的类成为装饰类 模仿BufferedReader，对Reader进行包装，体现装饰设计模式 装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。 装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系 装饰类因为增强已有对象，具备的功能该
  • Linux中的uniq命令 被触发 linux
    Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情 况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件 说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个
  • 正则表达式Pattern 肆无忌惮_ Pattern
    正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。   例如，我们需要对QQ号码格式进行检验 规则是长度6~12位  不能0开头  只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs
  • Oracle高级查询之OVER (PARTITION BY ..) 知了ing oraclesql
    一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se
  • Python调试 矮蛋蛋 pythonpdb
    原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d
  • webservice传递自定义对象时函数为空，以及boolean不对应的问题 alleni123 webservice
    今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。 进行debug之后，发现服务器端返回的确实是有值的对象。 后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。 本来是因为逻辑上不需要在客户端使用setter， 结果改了之后竟然不能获取带属性值的
  • java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针 百合不是茶
    C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：   定义一个指针p来指向a的地址（&是地址符号）：        
  • Eclipse打不开，提示“An error has occurred.See the log file ***/.log” bijian1013 eclipse
    打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
  • spring aop实例annotation方法实现 bijian1013 javaspringAOPannotation
            在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav
  • [Velocity一]Velocity语法基础入门 bit1129 velocity
    用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html   注释 1.行级注释## 2.多行注释#*  *#   变量定义 使用$开头的字符串是变量定义，例如$var1, $var2,   赋值 使用#set为变量赋值，例
  • 【Kafka十一】关于Kafka的副本管理 bit1129 kafka
    1. 关于request.required.acks   request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在   Th
  • lua统计nginx内部变量数据 ronin47 lua nginx　 统计
    server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(
  • java-11.二叉树中节点的最大距离 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root"
  • Netty源码学习-ReadTimeoutHandler bylijinnan javanetty
    ReadTimeoutHandler的实现思路： 开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim
  • jquery验证上传文件样式及大小(好用) cngolon 文件上传jquery验证
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.
  • 浏览器兼容【转】 cuishikuan css浏览器IE
    浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
  • Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数 daizj shell$#$?特殊变量
    前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949   特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个
  • 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID! dcj3sjt126com unix
    翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原
  • android Activity间List传值 dcj3sjt126com Activity
    第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
  • tomcat 设置java虚拟机内存 eksliang tomcat 内存设置
    转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space   ------------
  • Android 数据库事务处理 gqdy365 android
    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事
  • Java 打开浏览器 hw1287789687 打开网址open浏览器open browser打开url打开浏览器
    使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址 使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789
  • ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件 justjavac chromeGooglegoogle apichrome插件
    Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧
  • 进程VS.线程 m635674608 线程
    资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点： 多进程模式最大
  • Linux下安装MemCached 字符串 memcached
    前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
  • java设计模式之--jdk动态代理（实现aop编程） Supanccy2013 javaDAO设计模式AOP
        与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &
  • Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持 wiselyman spring 4
    2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展 使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService {