表单 (Forms)

1. 概览 (Overview)

Bootstrap 5 官方文档

(1). 简单的入门案例

  <div class = "ms-5 w-50 align-left"><form><div class="mb-3"><label for="inputEmail" class="form-label">邮件</label><input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp"><div id="emailHelp" class="form-text">我们会确保你的隐私</div></div><div class="mb-3"><label for="inputPassword" class="form-label">密码</label><input type="password" class="form-control" id="inputPassword"></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="inputCheck"><label class="form-check-label" for="inputCheck">记住我</label></div><button type="submit" class="btn btn-primary">提交</button></form></div>

  label标签用于跟input标签一起使用, 当点击label标签的文字时, 会触发input标签, 例如点击"记住我:文字, 则会勾选checkbox, 因为label标签中的for属性的值与input标签的id属性的值是一样的, 所有实现了相互关联, 因此可以实现点击 "记住我"文字, 实现勾选框勾选

  上面的代码中, 使用了.form-control等类, 使用这些类后, 会创建Bootstrap样式的控件

(2). 表单文本 (Form text)

使用.form-text类创建块级或内联级表单文本

1). 使用块级元素

  <div class = "ms-5 w-50"><label for="inputPassword" class="form-label">密码</label><input type="password" id="inputPassword" class="form-control" aria-describedby="help"><div id="help" class="form-text">密码必须包含8-20个字符, 不允许特殊字符和表情</div><br /><label for="inputPassword1" class="form-label">密码</label><input type="password" id="inputPassword1" class="form-control" aria-describedby="help1"><div id="help1">密码必须包含8-20个字符, 不允许特殊字符和表情</div></div>

2). 使用内联HTML元素

  <div class = "ms-5 w-50"><div class="row g-3 align-items-center"><div class="col-auto"><label for="inputPassword" class="col-form-label">密码</label></div><div class="col-auto"><input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpInline"></div><div class="col-auto"><span id="passwordHelpInline" class="form-text">密码必须包含8-20个字符</span></div></div></div>

(3). 表单禁用 (Disabled forms)

1). 快捷的禁用方式 disabled

  <div class = "ms-5 w-50"><input class="form-control" type="text" placeholder="表单禁用了" disabled><br /><input class="form-control" type="text" placeholder="表单没有被禁用"></div>

2). 禁用区域

在<fieldset>标签中添加disabled属性, 禁用区域中所有的控件

  <div class = "ms-5 w-50"><form><fieldset disabled><h2>整个区域都被禁用</h2><div class="mb-3"><label for="disabledTextInput" class="form-label">被禁用的输入标签</label><input type="text" id="disabledTextInput" class="form-control" placeholder="输入被禁用了"></div><div class="mb-3"><label for="disabledSelect" class="form-label">被禁用的选择菜单</label><select id="disabledSelect" class="form-select"><option>禁用</option></select></div><div class="mb-3"><div class="form-check"><input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled><label class="form-check-label" for="disabledFieldsetCheck">禁用</label></div></div><button type="submit" class="btn btn-primary">提交</button></fieldset></form></div>

(4). 表单中使用到的类或属性

类 或 属性	效果
.form-label	指明这个控件是一个label标签
.form-check-input	用于checkbox
.form-select	用于select标签
.form-control	给input标签使用一个Bootrstrap提供的样式
placeholder属性	提示信息

2. Bootstrap 5 中的input标签 和 textarea标签 (Form controls)

Bootstrap 5 官方文档

给文本的表单控件, 像input系列的标签和textarea系列的标签, 增加一些定制的样式, 大小等

(1). 简单的例子 (Example)

使用placeholder属性, 可以添加提示信息, 当用户输入时, 提示信息消失

  <div class = "ms-5 w-50"><div class="mb-3"><label for="exampleFormControlInput1" class="form-label">Email address</label><input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"></div><div class="mb-3"><label for="exampleFormControlTextarea1" class="form-label">Textarea</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="text"></textarea></div></div>

(2). 改变输入框和文本域大小 (Sizing)

设置输入框的高度

1). 高 class = “form-control-lg”

2). 默认

3). 小 class=“form-control-sm”

4). 对比

  <div class = "ms-5 w-50"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"><input class="form-control" type="text" placeholder="默认" ><input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"></div>

(3). 输入框和文本域禁用 (Disabled)

添加disabled属性, 禁用的输入框里的内容不能复制

  <div class = "ms-5 w-50"><input class="form-control" type="text" placeholder="已禁用" disabled></div>

(4). 输入框和文本域只读 (Readonly)

添加readonly属性

  <div class = "ms-5 w-50"><input class="form-control" type="text" value="可以复制这里的文字, 但是不能输入" readonly></div>

(5). 输入框和文本域纯文本 class=“form-control-plaintext”

使input的输入框使用纯文本样式, 一般跟readonly属性一起使用

  <div class = "ms-5 w-50"><input class="form-control-plaintext" type="text" value="可以复制这里的文字, 但是不能输入" readonly></div>

(6). 上传文件

1). 单文件上传 (默认)

  <div class = "ms-5 w-50"><label for="formFile" class="form-label">单文件上传</label><input class="form-control" type="file" id="formFile"></div>

2). 多文件上传 (multiple属性)

添加multiple属性

  <div class = "ms-5 w-50"><div class="mb-3"><label for="formFileMultiple" class="form-label">多文件上传</label><input class="form-control" type="file" id="formFileMultiple" multiple></div></div>

(7). 颜色选择器 (Color)

使用.form-control-color类

  <div class = "ms-5 w-50"><label for="exampleColorInput" class="form-label">颜色选择器</label><input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color"></div>

(8). 数据列表 (Datalists)

  <div class = "ms-5 w-50"><label for="exampleDataList" class="form-label">账号</label><input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="输入要搜索的账号"><datalist id="datalistOptions"><option value="123456789" /><option value="987654321" /></datalist></div>

3. Bootstrap 5 中的Select标签 (Select)

Bootstrap 5 官方文档

(1). Bootstrap列表框 class = “form-select”

<select class = "form-select"><option selected>打开菜单</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option>
</select>

(2). 改变列表框大小 (Sizing)

1). 大的 class = “form-select-lg”

2). 小的 class = “form-select-sm”

3). 对比

  <div class = "ms-5 w-50">大的<select class="form-select form-select-lg mb-3"><option selected>打开菜单</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>小的<select class="form-select form-select-sm mb-3" ><option selected>打开菜单</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>默认的<select class="form-select mb-3" ><option selected>打开菜单</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>

(3). 列表框多选 (multiple 属性)

  <div class = "ms-5 w-50"><select class="form-select" multiple><option selected>打开菜单</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>

(4). 列表框禁用 (disabled 属性)

  <div class = "ms-5 w-50"><select class="form-select" multiple disabled><option selected>打开菜单</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>

4. Bootstrap 5 中的 复选框 和 圆形复选框标 (Checks and radios)

Bootstrap 5 官方文档

(1). Bootstrap 复选框 class = “form-check-input”

    <div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"><label class="form-check-label" for="flexCheckDefault">复选框</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked><label class="form-check-label" for="flexCheckChecked">被选中的复选框, 因为使用了 checked属性</label></div>

选中属性 checked

使用checked属性, 可以让复选框一开始处于选中状态

(2). Bootstrap 圆形复选框 class = “form-check-input”

  <div class = "ms-5 w-50"><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"><label class="form-check-label" for="flexRadioDefault1">圆形复选框</label></div><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked><label class="form-check-label" for="flexRadioDefault2">被选中的圆形复选框</label></div></div>

实际上, 两种复选框的区别只是 type 不一样

(3). 复选框禁用 (disabled 属性)

  <div class = "ms-5 w-50"><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" disabled><label class="form-check-label" for="flexRadioDefault1">圆形复选框</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled><label class="form-check-label" for="flexCheckDefault">复选框</label></div></div>

5. Bootstrap 5 中的 滑动条 (Range)

Bootstrap 5 官方文档

(1). Bootstrap 滑动条 class = “form-range”

  <div class = "ms-5 w-50"><label for="customRange1" class="form-label">滑动条</label><input type="range" class="form-range" id="customRange1"></div>

(2). 滑动条禁用 (disabled 属性)

  <div class = "ms-5 w-50"><label for="customRange1" class="form-label">被禁用的滑动条</label><input type="range" class="form-range" id="customRange1" disabled></div>

(3). 设置滑动条最大值和最小值 (Min and max)

  默认情况下, 最大值是100, 最小值是0
  可以通过min属性和max属性设置, 滑动条会自动根据最大值和最小值的差合理安排滑动条上小圆点的位置

下面的例子是设置0 - 10

  <div class = "ms-5 w-50"><label for="customRange2" class="form-label">0 - 10 滑动条</label><input type="range" class="form-range" min="0" max="10" id="customRange2"></div>

(3). 设置滑动条每一步 (Steps)

默认情况下, 会自动计算, 当然也可以指定, 使用step属性

  <div class = "ms-5 w-50"><label for="customRange2" class="form-label">0 - 10 滑动条</label><input type="range" class="form-range" min="0" max="10" step = "2.5" id="customRange2"></div>

6. Bootstrap 5 中的 用户输入组 (Input group)

Bootstrap 5 官方文档

  可以理解为在输入框附近添加一些其他的控件, 简单的说添加了一些修饰, 让用户输入信息的界面更为友好

(1). 官方例子 (Basic example)

  <div class = "col-6 ms-5"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">@</span><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"><span class="input-group-text" id="basic-addon2">@example.com</span></div><label for="basic-url" class="form-label">Your vanity URL</label><div class="input-group mb-3"><span class="input-group-text" id="basic-addon3">https://example.com/users/</span><input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div><div class="input-group mb-3"><span class="input-group-text">$</span><input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"><span class="input-group-text">.00</span></div><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Username" aria-label="Username"><span class="input-group-text">@</span><input type="text" class="form-control" placeholder="Server" aria-label="Server"></div><div class="input-group"><span class="input-group-text">With textarea</span><textarea class="form-control" aria-label="With textarea"></textarea></div></div>

(2). 使用

1). 使用方法

将input标签单独放到div标签中, div标签使用.input-group类, 提示的文字信息放到 span标签中, span标签使用.input-group-text类

  <div class = "col-6 ms-5"><label for="url" class="form-label">使用Bootstrap 5 输入组</label><div class="input-group mb-3"><span class="input-group-text">https://example.com/users/</span><input type="text" class="form-control" id="url" aria-describedby="basic-addon3"></div></div>

效果

span标签就是前面以灰色为背景的文字, 当然也可以放到中间

2). class = “input-group”

单使用.input-group类的效果

  <div class = "col-6 ms-5"><label for="url2" class="form-label">input-group</label><div class="input-group mb-3"><span>https://example.com/users/</span><input type="text" class="form-control" id="url2" aria-describedby="basic-addon3"></div></div>

3). class = “input-group-text”

单使用.input-group-text类的效果

结合在一起在能实现在输入框左边且以灰色为背景

  <div class = "col-6 ms-5"><label for="url3" class="form-label">input-group-text</label><div class="mb-3"><span>https://example.com/users/</span><input type="text" class="input-group-text form-control" id="url3" aria-describedby="basic-addon3"></div><br /></div>

4). 对比

  <div class = "col-6 ms-5"><label for="url" class="form-label">使用Bootstrap 5 输入组</label><div class="input-group mb-3"><span class="input-group-text">https://example.com/users/</span><input type="text" class="form-control" id="url" aria-describedby="basic-addon3"></div><br /><label for="url1" class="form-label">不适用Bootstrap 5 输入组</label><div class="mb-3"><span>https://example.com/users/</span><input type="text" class="form-control" id="url1" aria-describedby="basic-addon3"></div><br /><label for="url2" class="form-label">input-group</label><div class="input-group mb-3"><span>https://example.com/users/</span><input type="text" class="form-control" id="url2" aria-describedby="basic-addon3"></div><br /><label for="url3" class="form-label">input-group-text</label><div class="mb-3"><span>https://example.com/users/</span><input type="text" class="input-group-text form-control" id="url3" aria-describedby="basic-addon3"></div><br /></div>

(3). 设置输入组元素大小 (Sizing)

1). 小 class = “input-group-sm”

2). 大 class = “input-group-lg”

3). 大小的对比

  <div class = "col-6 ms-5"><div class="input-group input-group-sm mb-3"><span class="input-group-text" id="inputGroup-sizing-sm">小</span><input type="text" class="form-control"></div><div class="input-group mb-3"><span class="input-group-text" id="inputGroup-sizing-default">默认</span><input type="text" class="form-control"></div><div class="input-group input-group-lg"><span class="input-group-text" id="inputGroup-sizing-lg">大</span><input type="text" class="form-control"></div></div>

(4). 输入组中的复选框 (Checkboxes and radios)

注意最好要把复选框的外边距设置为0

1). 普通复选框

  <div class = "col-6 ms-5"><div class="input-group mb-3"><div class="input-group-text"><input class="form-check-input mt-0" type="checkbox" value="" ></div><input type="text" class="form-control" ></div></div>

2). 圆形复选框

  <div class = "col-6 ms-5"><div class="input-group"><div class="input-group-text"><input class="form-check-input mt-0" type="radio" value="" ></div><input type="text" class="form-control" ></div></div>

3). 两种复选框的对比

  <div class = "col-6 ms-5"><div class="input-group mb-3"><div class="input-group-text"><input class="form-check-input mt-0" type="checkbox" value="" ></div><input type="text" class="form-control" ></div><br /><div class="input-group"><div class="input-group-text"><input class="form-check-input mt-0" type="radio" value="" ></div><input type="text" class="form-control" ></div></div>

(5). 多个输入框 (Multiple inputs)

  <div class = "col-6 ms-5"><div class="input-group"><span class="input-group-text">姓名</span><input type="text" class="form-control"><input type="text" class="form-control"></div></div>

(6). 多个span标签或者label标签 (Multiple addons)

  <div class = "col-6 ms-5"><div class="input-group mb-3"><span class="input-group-text">美元 $ </span><span class="input-group-text">0.00</span><input type="text" class="form-control" ></div></div>

(7). 按钮控件 (Button)

  <div class = "col-6 ms-5"><div class="input-group mb-3"><button class="btn btn-outline-secondary" type="button">按钮1</button><button class="btn btn-outline-primary" type="button">按钮2</button><input type="text" class="form-control" placeholder="请输入内容" ></div></div>

(8). 下拉菜单按钮 (Buttons with dropdowns)

1). 合在一起的

  <div class = "col-6 ms-5"><div class="input-group"><button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">下拉菜单</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">超链接1</a></li><li><a class="dropdown-item" href="#">超链接2</a></li><li><a class="dropdown-item" href="#">超链接3</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">超链接4</a></li></ul><input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"><button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">下拉菜单</button><ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item" href="#">超链接1</a></li><li><a class="dropdown-item" href="#">超链接2</a></li><li><a class="dropdown-item" href="#">超链接3</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">超链接4</a></li></ul></div></div>

2). 分离的

  <div class = "col-6 ms-5"><div class="input-group mb-3"><button type="button" class="btn btn-outline-secondary">Action</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">超链接1</a></li><li><a class="dropdown-item" href="#">超链接2</a></li><li><a class="dropdown-item" href="#">超链接3</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">超链接4</a></li></ul><input type="text" class="form-control" aria-label="Text input with segmented dropdown button"></div></div>

7. 浮动标签 (Floating labels)

Bootstrap 5 官方文档

(1). 浮动标签 class = “form-floating”

• 输入框
  
  

  <div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput" placeholder="xxx@qq.com"><label for="floatingInput">电子邮箱</label></div><div class="form-floating"><input type="password" class="form-control" id="floatingPassword" placeholder="Password"><label for="floatingPassword">密码</label></div></div>

• 文本域
  
  

  <div class = "col-6 ms-5"><div class="form-floating"><textarea class="form-control" placeholder="在这里评论" id="floatingTextarea2" style="height: 100px"></textarea><label for="floatingTextarea2">评论</label></div></div>

1). placeholder属性

如果不使用placeholder属性, 输入框不会出现鼠标点击文字变换的效果

  <div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput"><label for="floatingInput">电子邮箱</label></div><div class="form-floating"><input type="password" class="form-control" id="floatingPassword"><label for="floatingPassword">密码</label></div></div>

2). 设置初始值 value属性

  <div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput" value = "xxx@qq.com"><label for="floatingInput">电子邮箱</label></div><div class="form-floating"><input type="password" class="form-control" id="floatingPassword"  value = "123456"><label for="floatingPassword">密码</label></div></div>

3). 设置无效的样式 class = “is-invalid”

  <div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput" value = "xxx@qq.com"><label for="floatingInput">电子邮箱</label></div><div class="form-floating"><input type="password" class="form-control is-invalid" id="floatingPassword"  value = "123456"><label for="floatingPassword">密码</label></div></div>

3). 设置有效的样式 class = “is-valid”

  <div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control is-valid" id="floatingInput" value = "xxx@qq.com"><label for="floatingInput">电子邮箱</label></div><div class="form-floating"><input type="password" class="form-control is-valid" id="floatingPassword"  value = "123456"><label for="floatingPassword">密码</label></div></div>

学习 Bootstrap 5 之 Forms相关推荐

1. bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南

   bootstrap快速入门 了解世界上最受欢迎的前端组件库的最新版本. (Get to know the newest version of the worlds most popular front ...

2. [译] 用 30 分钟建立一个网站的方式来学习 Bootstrap 4

   原文地址:Learn Bootstrap 4 in 30 minutes by building a landing page website 原文作者:SaidHayani@ 译文出自:掘金翻译计划 ...

3. 学习 Bootstrap 5 之 Text

   学习 Bootstrap 5 之 文本 文本 (Text) 1. 文本对齐方式 (Text alignment) (1). 居左 (text-start) (2). 居中 (text-center) ...

4. 学习 Bootstrap 5 之 Typography

   学习 Bootstrap 5 之 排版 排版 (Typography) 1. 标题 (Headings) (1). 使用原生的标题标签 (2). 使用Bootstrap 5 的提供的标题标签类 (3) ...

5. 系统学习——Bootstrap

   学习目录 环境安装 全局CSS样式 概述 排版样式 页面排版 代码 表格 按钮 栅格系统 表单 图片 辅助类 响应式工具 Bootstrap组件 图标菜单按钮组件 字体图标 下拉菜单 按钮组 输入框组 ...

6. Web前端框架学习—Bootstrap

   零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...

7. 从优站精选上学习Bootstrap案例总结(一)

   作为一个小白,实在找不到该从何处入手练项目,只有自己去Bootstrap官网找点好看的界面来练习练习.虽说Bootstrap是一个UI框架,但是我还是要自己去更改里面有些样式.在设计方面还是没有前辈们 ...

8. 第一天开始写博客，从学习BootStrap开始吧，努力加油

   开始BootStrap学习 [一 ] 了解BootStrap 1.BootStrap是什么? 用于快速开发web应用程序和网站的前端框架.BootStrap是基于HTML.CSS.JAVASCRIPT ...

9. 一步一步学习Bootstrap系列--表单布局

   前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

最新文章

1. 2021-11-18Collections
2. 【机器学习基础】数学推导+纯Python实现机器学习算法27：EM算法
3. 千元显卡玩转百亿大模型，清华推出工具包BMInf让模型推理轻而易举
4. 【004】vim 和 他的辅助工具们
5. springboot内置tomcat，会和Oracle端口冲突，所以需要配置新的端口号
6. Exchange Server 2016 独立部署/共存部署 （八）—— 边缘角色服务器
7. Linux编程(7)_gdb
8. 【赛时总结】 ◇赛时·II◇ AtCoder ABC-100
9. 酒店客房管理系统源代码 java_《宾馆客房管理系统》JAVA源代码
10. MATLAB运行程序后workspace是空的
11. nest 模拟器_如何将Nest Thermostat用作运动探测器
12. 逻辑思维语音01——麦当劳
13. 语音信号的梅尔频率倒谱系数(MFCC)的原理讲解及python实现
14. wps透视表列总计移到顶部_数据透视表总计中的错误
15. 运行LLVM Pass的两种方式
16. nth-child 实用技巧
17. ASEMI线性稳压器78M05的电路图，78M05有什么应用
18. Markdown书写软件Typora的使用--入门（基本操作）
19. 深度学习(1) ——图像分类
20. Educational Codeforces Round 147 (Rated for Div. 2) 题解

热门文章

1. html5适配屏幕,HTML5屏幕适配标签设置
2. c语言考试的说说带图片致自己,励志说说带图片致自己
3. 问题 A: Jugs BFS
4. storm是java还是python_Storm概念学习系列之什么是实时流计算？
5. 服务器没有显示器能接笔记本吗,笔记本能连显示器吗，笔记本怎么才能接显示器(图文)...
6. 【数理知识】狄利克雷函数 dirac(t)
7. 翻译小窍门－谢谢你勾引我老公
8. 惊闻“漫游成本只有一分钱”
9. 【dgl框架】dgl.metapath_reachable_graph函数解析
10. 翼灵物联工作室第一次考试总结