雲墨知秋
雲墨知秋

bootstrap5

bootstrap5

文章目录

  • bootstrap5
    • 介绍
      • 下载
    • 常用属性
    • 基础使用
      • 第一个demo
        • 移动设备优先
      • 容器类
        • **.container** 类
        • .container-fluid类
        • 容器内边距
        • 容器的边框和颜色
        • 响应式容器
      • 网格系统
        • 偏移列
      • 文字排版
        • **Bootstrap 5 默认设置**
        • \

          - \

        • \
        • \
        • \
        • \
        • **.list-inline**
      • 颜色
      • 表格
        • 条纹表格
        • 带边框表格
        • 鼠标悬停状态表格
        • 黑色背景表格
        • 无边框表格
        • 指定意义的颜色类
        • 较小的表格
        • 响应式表格
      • 图像形状
        • 圆角图片
        • 椭圆图片
        • 缩略图
        • 图片对齐方式
        • 图片居中
        • 响应式图片
      • 好使小工具
        • 背景颜色
        • 浮动与清除浮动
        • 居中对齐
        • 浮动与清除浮动
        • 居中对齐

图片为本地图片，未加载出来，需要可联系我

Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

介绍

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点

  • **容易上手：**只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。
  • **响应式设计：**Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。
  • **移动优先：**在 Bootstrap 中，自适应移动端是框架的核心部分。
  • **浏览器兼容性：**Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。 如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。

下载

两种方式

  • 使用 Bootstrap5 CDN。
  • 从官网 getbootstrap.com 下载 Bootstrap 5。

常用属性

影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。

bootstrap提供了简写的class名，名称分别以m-开头和p-开头的类。

一、影响距离大小的值有

0,1,2,3,4,5,auto

(1)、margin值有

class名 等价的style
m-0 等价于{margin:0 !important}
m-1 等价于{margin:0.25rem !important}
m-2 等价于{margin:0.5rem !important}
m-3 等价于{margin:1rem !important}
m-4 等价于{margin:1.5rem !important}
m-5 等价于{margin:3rem !important}
m-auto 等价于{margin:auto !important}

(2)、padding值有

class名 等价的style
p-0 等价于{padding:0 !important}
p-1 等价于{padding:0.25rem !important}
p-2 等价于{padding:0.5rem !important}
p-3 等价于{padding:1rem !important}
p-4 等价于{padding:1.5rem !important}
p-5 等价于{padding:3rem !important}
p-auto 等价于{padding:auto !important}

二、调整某一侧的边距

有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom

（1）、margin例子，距离大小可以0-5与auto,这里只用期中一个值来说明含义

class名 等价的style
mt-2 {margin-top: 0.5rem !important}
mb-2 {margin-bottom: 0.5rem !important}
ml-2 {margin-left: 0.5rem !important}
mr-2 {margin-right: 0.5rem !important}
mx-2 {margin-right: 0.5rem !important;margin-left: 0.5rem !important}
my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}

(2)padding例子

class名 等价的style
pt-2 {padding-top: 0.5rem !important}
pb-2 {padding-bottom: 0.5rem !important}
pl-2 {padding-left: 0.5rem !important}
pr-2 {padding-right: 0.5rem !important}
px-2 {padding-right: 0.5rem !important;margin-left: 0.5rem !important}
py-2 {padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}

基础使用

第一个demo

移动设备优先

准备工作

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

容器类

bootstrap5需要容器包裹网站内容

我们可以使用以下两个容器类：

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.min.js">
  <title>Documenttitle>
head>

<body>
  <div class="container">
    <h1>第一个demoh1>
    <p>这是一些文本。p>
  div>
body>

html>

container 和 container-fluid的区别：

container的行为复杂一些：

屏幕小于768时，容器宽度是满屏，与container-fluid效果一样

屏幕大于768小于992时，宽度设为750

屏幕大于992小于1200时，宽度为970

屏幕大于1200，宽度为1170

margin-left, margin-right都为 auto，保持container容器居中。

container-fluid的行为就简单：

margin:0 宽度：100%

.container 类

.container 类用于创建固定宽度的响应式页面。

**注意：**宽度 (max-width) 会根据屏幕宽度同比例放大或缩小

一般用这个类就行

.container-fluid类

.container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）：

容器内边距

默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距：
容器的边框和颜色

Bootstrap 也提供了一些边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式：
响应式容器

响应式是指同一个页面在不同屏幕尺寸下有着不同的布局，可以兼容不同分辨率的设备，响应式web设计就是让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法，可以利用栅格系统，将一行平均分成12个格子来实现。

你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。

容器的 max-width 属性值会根据屏幕的大小来改变。

Class 超小屏幕 <576px 小屏幕 ≥576px 中等屏幕 ≥768px 大屏幕 ≥992px 特大屏幕 ≥1200px 超级大屏幕 ≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px 
<div class="container-sm">.container-smdiv>
<div class="container-md">.container-mddiv>
<div class="container-lg">.container-lgdiv>
<div class="container-xl">.container-xldiv>
<div class="container-xxl">.container-xxldiv>

网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKbMvjFC-1667727675661)(bootstrap5.assets/image-20221106150504699.png)]

Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

请确保每一行中列的总和等于或小于 12。

Bootstrap 5 网格系统有以下 6 个类:

  • .col- 针对所有设备。
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px。
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
  • .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。
超小设备 <576px 平板 ≥576px 桌面显示器 ≥768px 大桌面显示器 ≥992px 特大桌面显示器 ≥1200px 超大桌面显示器 ≥1400px
容器最大宽度 None (auto) 540px 720px 960px 1140px 1320px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列数量和 12
间隙宽度 1.5rem （一个列的每边分别 .75rem）
可嵌套 Yes
列排序 Yes

Bootstrap5 网格系统规则:

  • 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
  • 使用行来创建水平的列组。
  • 内容需要放置在列中，并且只有列可以是行的直接子节点。
  • 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
  • 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
  • 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
  • Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

<div class="row">
  <div class="col-*-*">div>
div>
<div class="row">
  <div class="col-*-*">div>
  <div class="col-*-*">div>
  <div class="col-*-*">div>
div>
 

<div class="row">
  <div class="col">div>
  <div class="col">div>
  <div class="col">div>
div>

第一个例子：创建一行(

)。然后， 添加需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。 也可以不选择响应设备直接写数字

tip：一共分为12份，若数字和不满12则剩余部分空出，不放置元素

第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 **“col”**每个就为 33.33% 的宽度，四个 **“col”**每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

一列等宽布局（不换行）
<div class="row">
  <div class="col">.coldiv>
  <div class="col">.coldiv>
  <div class="col">.coldiv>
div>
等宽响应式列
宽度小于576px时换行
<div class="col-sm-3">.col-sm-3div>
<div class="col-sm-3">.col-sm-3div>
<div class="col-sm-3">.col-sm-3div>
<div class="col-sm-3">.col-sm-3div>
注意最后的数字之和要等于12

不等宽响应式列
宽度4:8分配，sm下，宽度低于576px换行
<div class="row">
  <div class="col-sm-4">.col-sm-4div>
  <div class="col-sm-8">.col-sm-8div>
div>

如果只设置一列的宽度，其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%：
中间盒子设置宽度占12份中的六份，其余两个盒子自动分配剩余空间，且等宽
<div class="row">
  <div class="col">coldiv>
  <div class="col-6">col-6div>
  <div class="col">coldiv>
div>


平板和桌面端
对盒子添加多组设备在不同环境下的空间占比
如下：在平板占比3:9，桌面占比1:1
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>RUNOOBp>
    div>
    <div class="col-sm-9 col-md-6">
      <p>菜鸟教程p>
    div>
  div>
div>

不同设备下宽度占比
<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.coldiv>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.coldiv>
div>

嵌套列

未写响应设备直接写数字，分配比例，且嵌套
<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6div>
      <div class="col-6">.col-6div>
    div>
  div>
  <div class="col-4">.col-4div>
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4j5q4p3-1667727675664)(bootstrap5.assets/image-20221106152504803.png)]

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.min.js">
  <title>Documenttitle>
head>

<body>
  <div class="container-fluid">
    <div class="row" style="background-color:aqua">
      <div class="col-5" style="background-color:rgb(195, 217, 217)">5<div class="row">
          <div class="col-3" style="background-color:rgb(198, 101, 109)">3div>
          <div class="col-9" style="background-color:rgb(149, 34, 101)">9div>
        div>
      div>

      <div class="col-7" style="background-color:rgb(132, 138, 138)">7<div class="row">
          <div class="col-4" style="background-color:aqua">4div>
          <div class="col-8" style="background-color:rgb(96, 102, 192)">8div>
        div>
      div>
    div>
  div>
  div>

  div>

body>

html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MoUNxE2H-1667727675665)(bootstrap5.assets/image-20221106153824628.png)]

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格

<div class="row">
  <div class="col-md-4">.col-md-4div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4div>
div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div>
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nY6oGmYM-1667727675666)(bootstrap5.assets/image-20221106153911585.png)]

文字排版

Bootstrap 5 默认设置

Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。

此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

-

字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果

<div class="container">
  <h1>h1 Bootstrap 标题h1>
  <h2>h2 Bootstrap 标题h2>
  <h3>h3 Bootstrap 标题h3>
  <h4>h4 Bootstrap 标题h4>
  <h5>h5 Bootstrap 标题h5>
  <h6>h6 Bootstrap 标题h6>
div>

Bootstrap 5 定义 标签及 .mark 类为黄色背景及有一定的内边距:

<div class="container">
  <h1>高亮文本h1>    
  <p>使用 mark 元素来 <mark>高亮mark> 文本。p>
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cg97r7Ga-1667727675668)(bootstrap5.assets/image-20221106155642340.png)]

对于引用的内容可以在

上添加 .blockquote 类 : 

<div class="container">
  <h1>Blockquotesh1>
  <p>The blockquote element is used to present content from another source:p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.p>
    <footer class="blockquote-footer">From WWF's websitefooter>
  blockquote>
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-znXp7zK0-1667727675669)(bootstrap5.assets/image-20221106155657130.png)]

<div class="container">   
    <h1>代码片段h1>   
    <p>可以将一些代码元素放到 code 元素里面:p>   
    <p>以下 HTML 元素: <code>spancode>, <code>sectioncode>, 和 <code>divcode> 用于定义部分文档内容。 p> 
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8gd7kNv-1667727675670)(bootstrap5.assets/image-20221106160103457.png)]


  
Keyboard Inputs

  
To indicate input that is typically entered via the keyboard, use the kbd element:

  
Use ctrl + p to open the Print dialog box.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjVp2jbS-1667727675672)(bootstrap5.assets/image-20221106160027228.png)]

.list-inline
<div class="container mt-3">
  <h2>排版h2>
  <p>The class .list-inline places all list items on a single line, when used together with the .list-inline-item:p>
  <ul class="list-inline">
    <li class="list-inline-item">Coffeeli>
    <li class="list-inline-item">Teali>
    <li class="list-inline-item">Milkli>
  ul>
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KIRDuJGs-1667727675673)(bootstrap5.assets/image-20221106160520772.png)]

类名 描述 实例
.lead 让段落更突出 尝试一下
.small 指定更小文本 (为父元素的 85% ) 尝试一下
.text-start 左对齐 尝试一下
.text-center 居中 尝试一下
.text-end 右对齐 尝试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下
.text-nowrap 段落中超出屏幕部分不换行 尝试一下
.text-lowercase 设定文本小写 尝试一下
.text-uppercase 设定文本大写 尝试一下
.text-capitalize 设定单词首字母大写 尝试一下
.initialism 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 尝试一下
.list-unstyled 移除默认的列表样式，列表项中左对齐 (
  • 和
    1. 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
尝试一下
.list-inline 将所有列表项放置同一行 尝试一下

颜色

字体颜色
<div class="container">
  <h2>代表指定意义的文本颜色h2>
  <p class="text-muted">柔和的文本。p>
  <p class="text-primary">重要的文本。p>
  <p class="text-success">执行成功的文本。p>
  <p class="text-info">代表一些提示信息的文本。p>
  <p class="text-warning">警告文本。p>
  <p class="text-danger">危险操作文本。p>
  <p class="text-secondary">副标题。p>
  <p class="text-dark">深灰色文字。p>
  <p class="text-body">默认颜色，为黑色。p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。p>
  <p class="text-white">白色文本（白色背景上看不清楚）。p>
div>

背景颜色
<div class="container">
  <h2>背景颜色h2>
  <p class="bg-primary text-white">重要的背景颜色。p>
  <p class="bg-success text-white">执行成功背景颜色。p>
  <p class="bg-info text-white">信息提示背景颜色。p>
  <p class="bg-warning text-white">警告背景颜色p>
  <p class="bg-danger text-white">危险背景颜色。p>
  <p class="bg-secondary text-white">副标题背景颜色。p>
  <p class="bg-dark text-white">深灰背景颜色。p>
  <p class="bg-light text-dark">浅灰背景颜色。p>
div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYEA0gVP-1667727675674)(bootstrap5.assets/image-20221106161534084.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1x1wkxuv-1667727675675)(bootstrap5.assets/image-20221106161604431.png)]

要使用的时候翻一下，这些颜色其实较为常用

表格

Bootstrap5 通过 .table 类来设置基础表格的样式，所有的表格种类都需要加上**.table**

下面介绍几种个人认为常用的表格

条纹表格

过添加 .table-striped 类，您将在 内的行上看到条纹，如下面的实例所示：

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstnameth>
        <th>Lastnameth>
        <th>Emailth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>Johntd>
        <td>Doetd>
        <td>[email protected]td>
      tr>
      <tr>
        <td>Marytd>
        <td>Moetd>
        <td>[email protected]td>
      tr>
      <tr>
        <td>Julytd>
        <td>Dooleytd>
        <td>[email protected]td>
      tr>
    tbody>
table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jO2dibPy-1667727675676)(bootstrap5.assets/image-20221106162444931.png)]

带边框表格

.table-bordered 类可以为表格添加边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXrdo233-1667727675677)(bootstrap5.assets/image-20221106162536297.png)]

鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：
黑色背景表格

.table-dark 类可以为表格添加黑色背景：

以上属性可以适当叠加使用

如：

黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：

<table class="table table-dark table-striped">table>
无边框表格

.table-borderless 类可以设置一个无边框的表格：

指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色,也可以给表头添加颜色。
<table class="table">
    <thead>
      <tr>
        <th>Firstnameth>
        <th>Lastnameth>
        <th>Emailth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>Defaulttd>
        <td>Defaultsontd>
        <td>[email protected]td>
      tr>      
      <tr class="table-primary">
        <td>Primarytd>
        <td>Joetd>
        <td>[email protected]td>
      tr>
      <tr class="table-success">
        <td>Successtd>
        <td>Doetd>
        <td>[email protected]td>
      tr>
      <tr class="table-danger">
        <td>Dangertd>
        <td>Moetd>
        <td>[email protected]td>
      tr>
      <tr class="table-info">
        <td>Infotd>
        <td>Dooleytd>
        <td>[email protected]td>
      tr>
      <tr class="table-warning">
        <td>Warningtd>
        <td>Refstd>
        <td>[email protected]td>
      tr>
      <tr class="table-active">
        <td>Activetd>
        <td>Activesontd>
        <td>[email protected]td>
      tr>
      <tr class="table-secondary">
        <td>Secondarytd>
        <td>Secondsontd>
        <td>[email protected]td>
      tr>
      <tr class="table-light">
        <td>Lighttd>
        <td>Angietd>
        <td>[email protected]td>
      tr>
      <tr class="table-dark text-dark">
        <td>Darktd>
        <td>Botd>
        <td>[email protected]td>
      tr>
    tbody>
table>


表头添加颜色
  <thead class="table-light">thead>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BNhnXnB-1667727675678)(bootstrap5.assets/image-20221106163026121.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTlspCXu-1667727675679)(bootstrap5.assets/image-20221106163249865.png)]

 
   
   
   
   
   
  
 
    
    
 
     类名 
     描述 
    
 
    
    
    
 
     .table-primary 
     蓝色: 指定这是一个重要的操作 
    
 
    
 
     .table-success 
     绿色: 指定这是一个允许执行的操作 
    
 
    
 
     .table-danger 
     红色: 指定这是可以危险的操作 
    
 
    
 
     .table-info 
     浅蓝色: 表示内容已变更 
    
 
    
 
     .table-warning 
     橘色: 表示需要注意的操作 
    
 
    
 
     .table-active 
     灰色: 用于鼠标悬停效果 
    
 
    
 
     .table-secondary 
     灰色: 表示内容不怎么重要 
    
 
    
 
     .table-light 
     浅灰色，可以是表格行的背景 
    
 
    
 
     .table-dark 
     深灰色，可以是表格行的背景 
    
 
    
  
 
  
较小的表格
 
  
.table-sm 类用于通过减少内边距来设置较小的表格:
 
  
响应式表格
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:



 
   
   
  
注意.table-responsive类是在div外包裹一个div实现
你可以通过以下类设定在指定屏幕宽度下显示滚动条：

 
   
   
  
 
    
    
 
     类名 
     屏幕宽度 
    
 
    
    
    
 
     .table-responsive-sm 
     < 576px 
    
 
    
 
     .table-responsive-md 
     < 768px 
    
 
    
 
     .table-responsive-lg 
     < 992px 
    
 
    
 
     .table-responsive-xl 
     < 1200px 
    
 
    
 
     .table-responsive-xxl 
     < 1400px 
    
 
    
  
 
  
都是通过外部包裹div实现
 
  
<div class="table-responsive-sm">
  <table class="table">
    ...
  table>
div>

 
  
图像形状
 
  
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AfDeuc7x-1667727675680)(bootstrap5.assets/image-20221106164913962.png)]
 
  
圆角图片
 
  
.rounded 类可以让图片显示圆角效果：
 
  
椭圆图片
 
  
.rounded-circle 类可以设置椭圆形图片:
 
  
缩略图
 
  
.img-thumbnail 类用于设置图片缩略图(图片有边框):
 
  
<img decoding="async" src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<img decoding="async" src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
<img decoding="async" src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

 
  
图片对齐方式
 
  
使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐:
 
  
图片居中
 
  
使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：
 
  


 
  
注意，是两个一起使用
 
  
响应式图片
 
  
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
 
  
我们可以通过在  标签中添加 .img-fluid 类来设置响应式图片。
 
  
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
 
  
Chania

 
  
好使小工具
 
  
背景颜色
 
  
设置不同元素的背景颜色时，需要通过 .text-* 类来设置匹配的文本颜色，告别颜色焦虑
 
  
<div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv>
<div class="p-3 mb-2 bg-success text-white">.bg-successdiv>
<div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv>
<div class="p-3 mb-2 bg-info text-dark">.bg-infodiv>
<div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv>
<div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv>
<div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv>
<div class="p-3 mb-2 bg-white text-dark">.bg-whitediv>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>

 
  
.bg-gradient 类可以设置背景颜色渐变的效果,这种渐变效果，是根据背景颜色而定
 
  
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primarydiv>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondarydiv>
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-successdiv>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-dangerdiv>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warningdiv>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-infodiv>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-lightdiv>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-darkdiv>
<div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-bodydiv>
<div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-whitediv>
<div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparentdiv>

 
  
浮动与清除浮动
 
  
元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:
 
  
<div class="clearfix">
  <span class="float-start">Float leftspan>
  <span class="float-end">Float rightspan>
div>

 
  
也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
 
  
<div class="float-sm-end">小屏幕向右浮动div><br>
<div class="float-md-end">中等屏幕向右浮动div><br>
<div class="float-lg-end">大屏幕向右浮动div><br>
<div class="float-xl-end">超大屏幕向右浮动div><br>
<div class="float-xxl-end">特大屏幕向右浮动div><br>
<div class="float-none">没有浮动div>

 
  
应对不同的屏幕可以多类共存
 
  
居中对齐
 
  
使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):
 
  
y
 
  

    .bg-white 
  
 
  

    .bg-transparent 
  
 ``` 
  
浮动与清除浮动
 
  
元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:
 
  
<div class="clearfix">
  <span class="float-start">Float leftspan>
  <span class="float-end">Float rightspan>
div>

 
  
也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
 
  
<div class="float-sm-end">小屏幕向右浮动div><br>
<div class="float-md-end">中等屏幕向右浮动div><br>
<div class="float-lg-end">大屏幕向右浮动div><br>
<div class="float-xl-end">超大屏幕向右浮动div><br>
<div class="float-xxl-end">特大屏幕向右浮动div><br>
<div class="float-none">没有浮动div>

 
  
应对不同的屏幕可以多类共存
 
  
居中对齐
 
  
使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):
 
  
剩余更多请到官方查看，用什么找什么

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

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 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：做与用户的交互行为文章目录前端学习路线
  • 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的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 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
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端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
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • html页面js获取参数值 0624chenhong html
    1.js获取参数值js function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");      var r = windo
  • MongoDB 在多线程高并发下的问题 BigCat2013 mongodbDB高并发重复数据
    最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫 展，重复去看 MongoDB 的 API , 终于有了新发现 ： com.mongodb.DB 这个类有
  • c++ 用类模版实现链表(c++语言程序设计第四版示例代码) CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T> class Node { private: Node<T> * next; public: T data;
  • 最近情况 麦田的设计者 感慨考试生活
       在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。   
  • linux系统中用pkill踢出在线登录用户 被触发 linux
    由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户 1/#who   查出当前有那些终端登录（用 w 命令更详细） # who root     pts/0        2010-10-28 09:36 (192
  • 仿QQ聊天第二版 肆无忌惮_ qq
    在第一版之上的改进内容:  第一版链接: http://479001499.iteye.com/admin/blogs/2100893   用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑.   信息修改后上传至服务器再告诉所有用户,自己的窗口
  • java读取配置文件 知了ing
    1，java读取.properties配置文件 InputStream in; try { in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径 Properties p = new Properties()
  • __attribute__ 你知多少？ 矮蛋蛋 C++gcc
    原文地址: http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。 __attribute__ 书写特征是：
  • jsoup使用笔记 alleni123 java爬虫JSoup
    <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency> 2014/08/28 今天遇到这种形式，
  • JAVA中的集合 Collectio 和Map的简单使用及方法 百合不是茶 listmapset
             List ,set ,map的使用方法和区别 java容器类类库的用途是保存对象，并将其分为两个概念：     Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素  ，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的
  • 杀LINUX的JOB进程 bijian1013 linuxunix
    今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉   系统环境：    ORACLE 10G    Linux操作系统   操作步骤如下： 第一步.查询出来那个job在运行，找个对应的SID字段 select * from dba_jobs_running--找到job对应的sid &n
  • Spring AOP详解 bijian1013 javaspringAOP
            最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。 1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用
  • [Gson六]Gson类型适配器(TypeAdapter) bit1129 Adapter
    TypeAdapter的使用动机  Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。   以Date为例，在序列化和反序列化时，Gson默认使用java.
  • 【spark八十七】给定Driver Program， 如何判断哪些代码在Driver运行，哪些代码在Worker上执行 bit1129 driver
    Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分 作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。 计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务
  • nginx 经验总结 ronin47 nginx 总结
    　　　深感nginx的强大，只学了皮毛，把学下的记录。 　　　获取Header 信息，一般是以$http_XX（ＸＸ是小写）            获取body,通过接口，再展开，根据Ｋ取Ｖ 　　　获取uri,以$arg_XX      &n
  • 轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点 bylijinnan 数组
    import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ExoWeb { public static void main(String[] args) { ExoWeb ew=new ExoWeb(); System.out.pri
  • Netty源码学习-Java-NIO-Reactor bylijinnan java多线程netty
    Netty里面采用了NIO-based Reactor Pattern 了解这个模式对学习Netty非常有帮助 参考以下两篇文章： http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf
  • AOP通俗理解 cngolon springAOP
    1.我所知道的aop     初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和 我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而 已。 2.为什么用aop&nb
  • cursor variable 实例 ctrain variable
    create or replace procedure proc_test01 as type emp_row is record( empno emp.empno%type, ename emp.ename%type, job emp.job%type, mgr emp.mgr%type, hiberdate emp.hiredate%type, sal emp.sal%t
  • shell报bash: service: command not found解决方法 daizj linuxshellservicejps
    今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下：   脚本报错如下： ./olap_quick_intall.sh: line 57: service: command not found ./olap_quick_intall.sh: line 59
  • 40个迹象表明你还是PHP菜鸟 dcj3sjt126com 设计模式PHP正则表达式oop
    你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准 ，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函
  • Android逐帧动画的实现 dcj3sjt126com android
    一、代码实现： private ImageView iv; private AnimationDrawable ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout
  • java远程调用linux的命令或者脚本 eksliang linuxganymed-ssh2
    转载请出自出处： http://eksliang.iteye.com/blog/2105862        Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)   使用步骤如下： 1.导包 官网下载: http://www.ganymed.ethz.ch/ssh2/ ma
  • adb端口被占用问题 gqdy365 adb
    最近重新安装的电脑，配置了新环境，老是出现： adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * 百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。 一个比较彻底的解决办法就是修改
  • ASP.NET使用FileUpload上传文件 hvt .netC#hovertreeasp.netwebform
    前台代码： <asp:FileUpload ID="fuKeleyi" runat="server" /> <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" />
  • 代码之谜（四）- 浮点数（从惊讶到思考） justjavac 浮点数精度代码之谜IEEE
    在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。 浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说， 一点都不简单。 单单是说明 IEEE浮点数 就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。 一次面试 记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试， 多年以后，他已经称为了一名很出色的
  • 数据结构随记_1 lx.asymmetric 数据结构笔记
    第一章   1.数据结构包括数据的 逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是 顺序存储、链式存储 、索引存储 和 散列存储。 3.数据运算最常用的有五种，分别是  查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性：  输入、输出、可行性、确定性和有穷性。 5.算法分析的
  • linux的会话和进程组 网络接口 linux
    会话： 一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？ 先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se
  • 二维数组 元素的连续求解 1140566087 二维数组ACM
    import java.util.HashMap; public class Title { public static void main(String[] args){ f(); } // 二位数组的应用 //12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。 public static void f(){
  • 也谈什么时候Java比C++快 windshome javaC++
      刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。   你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？   我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他