2024-10-11 11:58:39 +08:00
<!DOCTYPE html>
2024-10-11 12:36:46 +08:00
< html lang = "zh" >
2024-10-11 11:58:39 +08:00
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-10-11 12:36:46 +08:00
< title > Chapter03 Example< / title >
2024-10-11 11:58:39 +08:00
<!-- 引入 Bootstrap -->
< link href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel = "stylesheet" >
< script src = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js" > < / script >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" >
2024-10-11 12:09:52 +08:00
< style >
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
< / style >
2024-10-13 11:35:20 +08:00
< script src = "index.js" > < / script >
2024-10-11 11:58:39 +08:00
< / head >
< body >
< div class = "container mt-8" id = "top-post" >
< div class = "card mt-5 mb-5" >
< a href = "#!" > < img class = "card-img-top" src = "https://loremflickr.com/640/320" alt = "..." / > < / a >
< div class = "card-body" >
< div class = "small text-muted" > < i class = "fas fa-clock m-1" > < / i > 2024-10-10 09:09:00< / div >
< h2 class = "card-title" > Featured Post Title< / h2 >
< p class = "card-text" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!< / p >
< div class = "row align-items-start" >
< div class = "col-5" >
< / div >
< div class = "col-3" >
< i class = "fas fa-comments" > < / i > < a href = "#" class = "card-link p-1" > 评论(8)< / a >
< / div >
< div class = "col-3" >
< i class = "fas fa-user" > < / i > < a href = "#" class = "card-link p-1" > jone mike< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
2024-10-11 12:36:46 +08:00
< div class = "container mt-8 bg-light" id = "posts" >
2024-10-11 11:58:39 +08:00
< div class = "card mb-5" >
< div class = "row g-0" >
< div class = "col-md-3" >
< img src = "https://loremflickr.com/240/320" class = "img-fluid rounded-start" alt = "..." >
< / div >
< div class = "col-md-6" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2024-10-11 12:09:52 +08:00
< p class = "card-text text-muted" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
< / p >
2024-10-11 11:58:39 +08:00
< p class = "card-text" > < small > 2024-10-10 08:08:10< / small > < small class = "p-1" > 小明< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< div class = "card mb-5" >
< div class = "row g-0" >
< div class = "col-md-3" >
< img src = "https://loremflickr.com/240/320" class = "img-fluid rounded-start" alt = "..." >
< / div >
< div class = "col-md-6" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text text-muted" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< p class = "card-text" > < small > 2024-10-10 08:08:10< / small > < small class = "p-1" > 小明< / small > < / p >
< / div >
< / div >
< / div >
< / div >
2024-10-11 12:09:52 +08:00
2024-10-11 11:58:39 +08:00
< / div >
2024-10-11 12:36:46 +08:00
< div class = "container mb-5 bg-body-tertiary" >
2024-10-11 11:58:39 +08:00
<!-- POST 请求表单 -->
< form class = "mt-5" action = "#" >
< h2 > 发布新帖子< / h2 >
< div class = "mb-3" >
< label for = "title" class = "form-label" > 标题< / label >
< input type = "text" class = "form-control" id = "title" placeholder = "输入帖子标题" >
< / div >
< div class = "mb-3" >
< label for = "body" class = "form-label" > 内容< / label >
< textarea class = "form-control" id = "body" rows = "3" placeholder = "输入帖子内容" > < / textarea >
< / div >
< div class = "mb-3" >
2024-10-11 12:16:23 +08:00
< label for = "cover" class = "form-label" > 封面图片< / label >
2024-10-11 11:58:39 +08:00
< input type = "text" class = "form-control" id = "cover" placeholder = "image" / >
< / div >
2024-10-11 12:16:23 +08:00
< div class = "mb-3" >
2024-10-13 11:35:20 +08:00
< label for = "thumbnail" class = "form-label" > 图片< / label >
< input class = "form-control" id = "thumbnail" placeholder = "image" / >
2024-10-11 12:16:23 +08:00
< / div >
2024-10-11 11:58:39 +08:00
< div class = "mb-3" >
< label for = "userId" class = "form-label" > 用户ID< / label >
< input type = "text" class = "form-control" id = "userId" placeholder = "输入用户id" >
< / div >
< button class = "btn btn-primary" id = "submit" > 发布< / button >
< / form >
< / div >
2024-10-11 12:36:46 +08:00
< div class = "container bg-body-secondary" >
< div class = "row" >
< div class = "col-12" >
< p class = "text-center" > Copyright © 2024. All rights reserved.< / p >
< / div >
< / div >
< / div >
2024-10-11 11:58:39 +08:00
< / body >
< / html >
