idea重启
步骤：
在IDEA 的菜单栏中选择 File（文件）菜单。
选择 Invalidate Caches / Restart（无效缓存/重启）选项。
在弹出的对话框中，选择重启 IntelliJ IDEA。
HTML
超文本标记语言
文件后缀，.html或.htm
声明
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>常用标签
- 标题标签
<!--，1到6级标题，从大到小依次递减-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>- 段落标签
<p>段落</p>- 换行标签
<br />- 文本样式标签
<!--size属性的取值范围为1-7，其中1表示最小字号，7表示最大字号-->
<font face="微软雅黑" size="7" color="red">七号红色，微软雅黑字体</font>- 注释标签
<!--注释内容-->- 链接标签
<a href="http://www.example.com">链接文本</a>- 图片标签
<img src="image.jpg" alt="图片描述">- 列表标签
<!--无序列表-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<!--有序列表-->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>- 表格标签
<table>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
<tr>
<td>数据单元格1</td>
<td>数据单元格2</td>
</tr>
</table>- 表单标签
<form action="/example" method="POST">
用户名：<input type="text" id="username" name="username"><br><br>
密码：<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>表格格式化表单
<form action="?" method="get">
<!--单选框-->
<tr><td>性别：<td><input type="radio" name="sex" value="male">男
<td><input type="radio" name="sex" value="male">女
<!--复选框-->
<tr><td>爱好：<td><input type="checkbox" name="hobbies" value="sing">唱歌
<td><input type="checkbox" name="hobbies" value="dance">跳舞
<td><input type="checkbox" name="hobbies" value="cooking">做饭
<td><input type="checkbox" name="hobbies" value="swimming">游泳
<!--提交按钮-->
<tr><td><td><input type="submit" value="提交">
</form>CSS
一种用于描述HTML或XML等文件如何展示在屏幕、纸质、语音等媒体上的样式语言。它可以为网页添加颜色、字体、布局、动画等样式。
一些常用的CSS属性：
- font-size：用于设置字体大小。
- color：用于设置字体颜色。
- background-color：用于设置元素的背景颜色。
- width和height：用于设置元素的宽度和高度。
- margin和padding：用于设置元素的外边距和内边距。
- border：用于设置元素的边框。
- text-align：用于设置文本的对齐方式。
- display：用于设置元素的显示方式，如块级元素、行内元素等。
- position：用于设置元素的定位方式，如静态定位、相对定位、绝对定位等。
- float：用于设置元素的浮动方式。
- 选择器
用来指定要应用样式的元素
- 标签选择器
p {
color: red;
}- 类选择器
.className {
color: red;
}- id选择器
#idName {
background-color: blue;
}- 伪类选择器
a:hover {
text-decoration: underline;
}- 通配符选择器
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}- style样式
行内式
<p style="color: blue; font-size: 16px; background-color: yellow;">Hello, World!</p>导航栏综合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#all{
width: 1200px;
margin: 0 auto;
}
</style>
</head>
<div id="all">
<body>
<style>
a{
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;/* 内容超出宽度时隐藏超出部分的内容 */
background: #333;
top:0;
width:100%;
}
li {
float: left;
}
li a {
display: block; /*设置展示效果为 方块状*/
color: white;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
.active {
background-color:cadetblue;
}
li a:hover:not(.active) { /*鼠标悬浮设置背景颜色 */
background: cadetblue;
}
</style>
<ul>
<li><a class="active" href="?">首页</a></li>
<li><a href="?">瓷器产品</a></li>
<li><a href="?">后台管理</a></li>
<li><a href="?">购物车</a></li>
<li><a href="?">更多</a></li>
<li style="float:right"><a href="?">注册</a></li>
<li style="float:right"><a href="?">登录</a></li>
</ul>
</body>
</div>
</html>JavaScript
包括变量、运算符、流程控制语句、函数、数组、对象、正则表达式等。同时，JavaScript还有一些内置的对象和方法，如Date、Math、JSON等。
- HTML引入JavaScript
方式一：直接写
<p onMouseOver="alert('欢迎您学习JavaScript!')">鼠标移过来</p>方式二：写入<script>...<script>之间<script>document.write("欢迎您学习JavaScript!");</script>
方式三：引入外部.js文件<script src="welcome.js"></script>
- 数据类型
数值型(Number)：包含整数或浮点数。
布尔型(Logical)：取值为true或false。1,0
字符型(String)：用单引号或双引号括起来的零个或多个的字符或数字所组成。
空类型(null)：表示没有值，取唯一值”null”，大小写敏感 - 数据类型转换函数
eval（字符串)：将字符串参数转换成相应的数值，如：y=eval（“15”)+8; 结果：y=23
parseInt(字符串，[底数])：将字符串转换成指定底数的数值。
parseFloat(字符串)：将字符串转换成浮点数值 - 注释
//单行注释
/*多行注释*/- 声明变量
变量声明时，不必定义类型，所有类型均由小写的 var 声明
如：var name; - 常量
字符串常量 - 布尔常量：true或false
- 条件运算符
三目运算
- 程序控制流程
选择结构
if-else if-else
switch…case…
循环结构
while
do…while
for - 数组
数组长度可变。总长度等于数组的最大索引值+1
同一数组中的元素类型可以互不相同
当访问未赋值的数组元素时，该元素值为undefined，不会数组越界
//数组定义，直接赋值
var array1=["yes",1,2.87,false];
//数组定义2
var array2=[];
array2[0]=1;
//数组定义3
var array3=new Array();
array3[3]=7;- 函数
系统函数
编码函数，escape(字符串)。字符串–>ASCII码
译码函数 ，unescape(ASCII)。ASCII码–>字符串
求值函数,eval（字符串表达式)。eva(“3”)+4=7;
数值判断函数，isNaN(测试值)。NaN即Not a Number
转成整数函数，parseInt(字符串[,底数])。x=parseInt(“27”,8);
转成浮点函数，parseFloat(字符串)。
用户自定义函数
function myFunction(a, b) {
return a * b;
}- 事件处理
事件处理程序
方式一，直接嵌入HTML标记符中
<body onLoad="alert('事件处理程序')"></body>方式二，直接写在对象后面
<script>
document.onLoad=alert('这是事件处理程序');
</script>实例
<body>
<form name="fff">
请输入基本资料：<br />
姓名：<input type="text" name="usr" size="8">
<input type="button" value="确认"
onClick="alert(fff.usr.value+' :谢谢你!')">
</body>- Date日期对象
BootStrap框架的使用
环境配置 1、下载Bootstrap5.3.0 2、下载 jQuery，根据Bootstrap版本选择对应的 jQuery版本为 3.5.1 或更高版本[3.6.3] 3、解压缩，复制粘贴到idea中，文件目录如下
在html文件中引入，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- Bootstrap -->
<!--使用本地下载好的bootstrap.min.css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!--使用本地已下载好的jquery-3.6.3.min.js文件-->
<script src="js/jquery-3.6.3.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--使用本地下载好的bootstrap.min.js文件-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>测试实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- Bootstrap -->
<!--使用本地下载好的bootstrap.min.css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!--使用本地已下载好的jquery-3.6.3.min.js文件-->
<script src="js/jquery-3.6.3.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--使用本地下载好的bootstrap.min.js文件-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bootstrap Example</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--轮播图-->
<div class="container my-4">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--卡片布局-->
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="card">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+1" class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card Title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+2" class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card Title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+3" class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card Title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>运行效果如下，说明Bootstrap引入成功
- 布局容器：
container【常用】两侧部分留白宽度
<div class="container"></div>container-fluid全屏宽度，100%宽度
<div class="container-fluid"></div>- 栅格网格系统
列组合：分为12列，超过12列，整个div自动在下一行,col-*
<div class="container"> <!--两侧留白宽度-->
<div class="row"> <!--定义一行-->
<!--列组合，列元素，
.col-* 针对所有设备
【sm小屏，平板】col-sm-数值，
【常用，md中屏，电脑】col-md-数值,
【lg大屏，电视】col-lg-数值,
class="col-md-4"电脑屏幕定义占4列，class="col-md-8"占8列-->
<div class="col-4" style="background-color: #8fd19e">4列</div>
<div class="col-8" style="background-color: #e83e8c">8列</div>
</div>
</div>运行结果
列偏移：列与列之间有间隙，offset-*，偏移取值为1-11
<div class="container"> <!--两侧留白宽度-->
<!--列偏移-->
<!--偏移前-->
<div class="row">
<div class="col-2" style="background-color: #0dcaf0">2</div>
<div class="col-2" style="background-color: #6f42c1">2</div>
<div class="col-2" style="background-color: #babbbc">2</div>
</div>
<hr />
<!--偏移后-->
<div class="row">
<div class="col-2 offset-1" style="background-color: #0dcaf0">2</div>
<div class="col-2 offset-1" style="background-color: #6f42c1">2</div>
<div class="col-2 offset-1" style="background-color: #babbbc">2</div>
</div>
</div>运行结果
列排序：order-n，排第n位
<div class="container"> <!--两侧留白宽度-->
<!--列排序
order-1，排第一位
order-2，排第二位
order-3，排第三位
-->
<div class="row">
<div class="col-2 order-3" style="background-color: #0dcaf0">1</div>
<div class="col-2 order-2" style="background-color: #6f42c1">2</div>
<div class="col-2 order-1" style="background-color: #babbbc">3</div>
</div>
</div>运行结果
列嵌套：列组合里再再套列组合，无限套娃，每行里都分成12等份
<div class="container"> <!--两侧留白宽度-->
<!-- 列嵌套-->
<div class="row">
<div class="col-8" style="background-color: #ffc720">8
<div class="row">
<div class="col-6" style="background-color: #86b7fe">6</div>
<div class="col-4" style="background-color: #d63384">4</div>
</div>
</div>
<div class="col-4" style="background-color: linen">4</div>
</div>
</div>运行结果
- 排版
标题
<h1>…<h6>
引入bootstrap后标题字体黑色变淡
引入副标题<small>…</small>
<h1>标题1<small>副标题1</small></h1>
<div class="h2">标题2<span class="small">副标题2</span> </div>运行结果
段落
<small>：小号字
<b><strong>：加粗
<i><em>：斜体
<p class="lead">
<small>明天</small><b>会不会</b><i>是</i><em>一个</em><strong>好天气</strong>？
</p>运行结果
强调，作为建议使用
<div class="text-muted">提示，使用浅灰色</div>
<div class="text-primary">主要，使用蓝色</div>
<div class="text-success">成功，使用浅绿色</div>
<div class="text-info">通知信息，使用浅蓝色</div>
<div class="text-warning">警告，使用黄色</div>
<div class="text-danger">危险，使用褐色</div>运行结果
对齐效果
<p class="text-start">默认方式，左对齐。明天会不会是一个好的天气呢？</p>
<p class="text-center">居中对齐，明天会不会是一个好的天气呢？</p>
<p class="text-end">右对齐，明天会不会是一个好的天气呢？</p>
<p class="text-justify">
两端对齐，居中对齐和两端对齐是不同的概念。在居中对齐时，文本或元素位于容器的中心位置，而在两端对齐时，文本或元素靠近容器两侧并对齐。
如果容器中的文本或元素长度不足以填满整个容器，则两者的结果会有所不同。在居中对齐时，元素会被放置在容器的中心位置，
而在两端对齐时，元素则会放置在容器两端，看起来可能会出现一些空白。
</p>运行结果
列表
无序列表，<ul><li>…</li><ul>
有序列表，<ol><li>…</li><ol>
去点列表
内联列表
<!--去点列表-->
<ul class="list-unstyled">
<li>无序列表表项1</li>
<li>无序列表表项2</li>
<li>无序列表表项3</li>
</ul>
<ol class="list-unstyled">
<li>有序列表表项1</li>
<li>有序列表表项2</li>
<li>有序列表表项3</li>
</ol>
<!--内联列表-->
<ul class="list-inline">
<li class="list-inline-item">首页</li>
<li class="list-inline-item">商品</li>
<li class="list-inline-item">购物车</li>
</ul>运行结果
代码
单行内联代码
快捷键
多行块代码
<!--单行内联代码-->
<code>This is a simple code.</code>
<code>
This is a simple code<br />
please repeat it.
</code>
<!--快捷键-->
<p>
使用快捷键<kbd>Ctrl+s</kbd>保存
</p>
<!--多行代码块-->
<pre>
public class Hello{
public static void main(String args[]){
System.out.println("hello,world!");
}
}
</pre>
<!--带标签代码显示<h1>-->
<pre>
<h1">>
</pre>运行结果
表格
bootstrap5中表格基础样式
<!--表格-->
<!--bootstrap5中表格基础样式-->
<table class="table">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
附加样式
table-striped:斑马线表格
table-bordered:带边框的表格
table-hover:鼠标悬停高亮的表格
table-dark：使表格变暗色风格
table-sm：紧凑型表格,压缩表格的单元格和字体大小，用于显示更多信息
table-responsive：使表格响应式布局，适应不同大小的屏幕
<!--斑马线表格-->
<table class="table table-striped">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
<!--带边框的表格-->
<table class="table table-bordered">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
<!--鼠标悬停高亮显示的表格-->
<table class="table table-hover">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
<!--暗色风格的表格-->
<table class="table table-dark">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
<!--紧凑型表格-->
<table class="table table-sm">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
<!--响应式表格，随页面大小自适应-->
<table class="table table-responsive">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr><td>语</td><td>物</td><td>化</td>
<tr><td>历</td><td>生</td><td>化</td>
</table>
th、tr、td样式
.table-active将悬停的颜色应用在行或者单元格上
.table-success表示成功的操作
.table-info表示信息变化的操作
.table-warning表示一个警告的操作
.table-danger表示一个危险的操作
<table class="table table-bordered">
<th>星期一</th><th>星期二</th><th>星期三</th>
<tr class="table-active">
<td>语</td><td>物</td><td>化</td>
<tr class="table-success">
<td>历</td><td>生</td><td>化</td>
<tr class="table-info">
<td>地</td><td>化</td><td>生</td>
<tr class="table-warning">
<td>历</td><td>生</td><td>化</td>
<tr class="table-danger">
<td>历</td><td>生</td><td>化</td>
</table>运行结果
表单控件
.form-control
输入框
<div class="container">
<div class="row">
<div class="col-3">
<input type="text" class="form-control" placeholder="正常大小输入框">
<input type="text" class="form-control form-control-lg" placeholder="大号输入框">
<input type="text" class="form-control form-control-sm" placeholder="小号输入框">
</div>
</div>
</div>
下拉框
单选-下拉框
<div class="row">
<div class="col-3">
<select class="form-control">
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</div>
</div>
多选-下拉框
Ctrl+点击，多选
<div class="row">
<div class="col-3">
<!--multiple="multiple"设置下拉框多选-->
<select class="form-control" multiple="multiple">
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</div>
</div>
文本域
<div class="row">
<div class="col-3">
<textarea class="form-control">
</textarea>
</div>
</div>
单选框
<!--垂直单选框-->
<div>
<div class="form-check">
<label><input class="form-check-input" type="radio" name="sex" value="男">男</label>
</div>
<div class="form-check">
<label><input class="form-check-input" type="radio" name="sex" value="女">女</label>
</div>
</div>
复选框
<!--复选框,内联，水平显示-->
<div>
<div class="form-check form-check-inline">
<label><input class="form-check-input" type="checkbox" name="hobbies" value="跑步">跑步</label>
</div>
<div class="form-check form-check-inline">
<label><input class="form-check-input" type="checkbox" name="hobbies" value="游泳">游泳</label>
</div>
<div class="form-check form-check-inline">
<label><input class="form-check-input" type="checkbox" name="hobbies" value="踢足球">踢足球</label>
</div>
</div>
按钮
- 基础样式
.btn：基础样式，可应用于任何按钮 - 附加样式
.btn-primary：主要样式，表示主要操作
.btn-secondary：次要样式，表示辅助操作
.btn-success：成功样式，表示成功操作
.btn-danger：危险样式，表示危险操作
.btn-warning：警告样式，表示警告操作
.btn-info：信息样式，表示一般信息
.btn-light：浅色样式，表示轻量级操作
.btn-dark：深色样式，表示重量级操作 - 将标签置为按钮
- 设置按钮大小
.btn-lg：大号样式，表示较大的按钮
.btn-sm：小号样式，表示较小的按钮 - 按钮禁用
.disabled：禁用样式，表示按钮不可用
<!--基础样式-->
<button class="btn">按钮</button>
<!--附加样式-->
<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>
<hr />
<!--将标签制为按钮-->
<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>
<hr />
<!--设置按钮大小-->
<button class="btn btn-secondary">按钮</button>
<button class="btn btn-secondary btn-lg">按钮</button>
<button class="btn btn-secondary btn-sm">按钮</button>
<hr />
<!--按钮禁用-->
<!--在标签中添加disabled属性-->
<button class="btn btn-danger" onclick="alert('Hello!')" disabled="disabled">按钮</button>
<!--在元素标签中添加类名disabled-->
<button class="btn btn-danger disabled" onclick="alert('Hello!')">按钮</button>
表单布局
水平表单
<div class="container">
<!-- 水平表单,mb-3设置垂直距离为3 -->
<form>
<h2 align="center">用户信息表</h2>
<div class="mb-3">
<label for="uname" class="col-form-label">姓名</label>
<input type="text" class="form-control" id="uname" placeholder="请输入姓名">
</div>
<label for="pswd" class="col-form-label">密码</label>
<input type="text" class="form-control" id="pswd" placeholder="请输入密码">
<div class="mb-3">
<label class="col-form-label">爱好</label>
<label class="form-check-inline">
<input type="checkbox" name="hobby" value="sing" />唱歌
</label>
<label class="form-check-inline">
<input type="checkbox" name="hobby" value="dance" />跳舞
</label>
</div>
<label class="col-form-label">城市</label>
<select class="form-control">
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<div class="mb-3">
<label for="remark" class="col-form-label">简介</label>
<textarea id="remark" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
缩略图
<div class="container">
<div class="row">
<!--缩略图-->
<div class="col-md-3">
<div class="img-thumbnail">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+1" style="width: 240px;height: 360px">
<h3>张三</h3>
<p>出生于香港，歌手</p>
<button class="btn btn-outline-secondary">喜欢</button>
<button class="btn btn-outline-secondary">评论</button>
</div>
</div>
<div class="col-md-3">
<div class="img-thumbnail">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+2" style="width: 240px;height: 360px">
<h3>李四</h3>
<p>出生于江苏，演员</p>
<button class="btn btn-outline-secondary">喜欢</button>
<button class="btn btn-outline-secondary">评论</button>
</div>
</div>
<div class="col-md-3">
<div class="img-thumbnail">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+3" style="width: 240px;height: 360px">
<h3>王五</h3>
<p>出生于海南，歌手</p>
<button class="btn btn-outline-secondary">喜欢</button>
<button class="btn btn-outline-secondary">评论</button>
</div>
</div>
<div class="col-md-3">
<div class="img-thumbnail">
<img src="https://dummyimage.com/300x200/000/fff.png&text=Image+4" style="width: 240px;height: 360px">
<h3>赵六</h3>
<p>出生于东北，歌手</p>
<button class="btn btn-outline-secondary">喜欢</button>
<button class="btn btn-outline-secondary">评论</button>
</div>
</div>
</div>
</div>
卡片
<div class="container">
<div class="card">
<div class="card-header">
卡片头
</div>
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">Card content goes here.</p>
</div>
<div class="card-footer">
卡片尾
</div>
</div>
</div>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
