Monroe Parker 2 hours ago
1,300
260
A 4
Steeve
What a beautiful photo! I love it.
Monroe
You captured the moment.
Bootstrap5 组件
示例——chatbox
Member
-
John Doe
Hello, Are you there?
Just now
1 -
Danny Smith
Lorem ipsum dolor sit.
5 mins ago
-
Alex Steward
Lorem ipsum dolor sit.
Yesterday
-
Ashley Olsen
Lorem ipsum dolor sit.
Yesterday
-
Kate Moss
Lorem ipsum dolor sit.
Yesterday
-
Lara Croft
Lorem ipsum dolor sit.
Yesterday
-
Brad Pitt
Lorem ipsum dolor sit.
5 mins ago
-
Brad Pitt
12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Lara Croft
13 mins ago
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-
Brad Pitt
10 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
<section>
<div class="container py-5">
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">
<h5 class="font-weight-bold mb-3 text-center text-lg-start">Member</h5>
<div class="card">
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="p-2 border-bottom bg-body-tertiary">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">John Doe</p>
<p class="small text-muted">Hello, Are you there?</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">Just now</p>
<span class="badge bg-danger float-end">1</span>
</div>
</a>
</li>
<li class="p-2 border-bottom">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">Danny Smith</p>
<p class="small text-muted">Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">5 mins ago</p>
</div>
</a>
</li>
<li class="p-2 border-bottom">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">Alex Steward</p>
<p class="small text-muted">Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">Yesterday</p>
</div>
</a>
</li>
<li class="p-2 border-bottom">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">Ashley Olsen</p>
<p class="small text-muted">Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">Yesterday</p>
</div>
</a>
</li>
<li class="p-2 border-bottom">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">Kate Moss</p>
<p class="small text-muted">Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">Yesterday</p>
</div>
</a>
</li>
<li class="p-2 border-bottom">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">Lara Croft</p>
<p class="small text-muted">Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">Yesterday</p>
</div>
</a>
</li>
<li class="p-2">
<a href="#!" class="d-flex justify-content-between">
<div class="d-flex flex-row">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
class="rounded-circle d-flex align-self-center me-3 shadow-1-strong" width="60">
<div class="pt-1">
<p class="fw-bold mb-0">Brad Pitt</p>
<p class="small text-muted">Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="pt-1">
<p class="small text-muted mb-1">5 mins ago</p>
<span class="text-muted float-end"><i class="fas fa-check" aria-hidden="true"></i></span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-7 col-xl-8">
<ul class="list-unstyled">
<li class="d-flex justify-content-between mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
class="rounded-circle d-flex align-self-start me-3 shadow-1-strong" width="60">
<div class="card">
<div class="card-header d-flex justify-content-between p-3">
<p class="fw-bold mb-0">Brad Pitt</p>
<p class="text-muted small mb-0"><i class="far fa-clock"></i> 12 mins ago</p>
</div>
<div class="card-body">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
</div>
</div>
</li>
<li class="d-flex justify-content-between mb-4">
<div class="card w-100">
<div class="card-header d-flex justify-content-between p-3">
<p class="fw-bold mb-0">Lara Croft</p>
<p class="text-muted small mb-0"><i class="far fa-clock"></i> 13 mins ago</p>
</div>
<div class="card-body">
<p class="mb-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium.
</p>
</div>
</div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar"
class="rounded-circle d-flex align-self-start ms-3 shadow-1-strong" width="60">
</li>
<li class="d-flex justify-content-between mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
class="rounded-circle d-flex align-self-start me-3 shadow-1-strong" width="60">
<div class="card">
<div class="card-header d-flex justify-content-between p-3">
<p class="fw-bold mb-0">Brad Pitt</p>
<p class="text-muted small mb-0"><i class="far fa-clock"></i> 10 mins ago</p>
</div>
<div class="card-body">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
</div>
</div>
</li>
<li class="bg-white mb-3">
<div data-mdb-input-init class="form-outline">
<textarea class="form-control bg-body-tertiary" id="textAreaExample2" rows="4"></textarea>
<label class="form-label" for="textAreaExample2">Message</label>
</div>
</li>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-rounded float-end">Send</button>
</ul>
</div>
</div>
</div>
</section>示例——fullscreen
<!-- Button trigger modal -->
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal top fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
data-mdb-backdrop="true"
data-mdb-keyboard="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>示例——Offcanvas
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
lists, etc.
<a data-mdb-ripple-init class="btn btn-primary" data-mdb-toggle="offcanvas" href="#offcanvasExample" role="button"
aria-controls="offcanvasExample">
Link with href
</a>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" type="button" data-mdb-toggle="offcanvas" data-mdb-target="#offcanvasExample"
aria-controls="offcanvasExample">
Button with data-mdb-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close text-reset" data-mdb-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
lists, etc.
</div>
<div class="dropdown mt-3">
<button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-mdb-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>示例——searchquery
<div class="input-group">
<div class="form-outline" data-mdb-input-init>
<input id="search-focus" type="search" id="form1" class="form-control" />
<label class="form-label" for="form1">Search</label>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fas fa-search"></i>
</button>
</div>示例——searchselect
<section class="w-100 p-4 d-flex justify-content-center">
<div style="width: 22rem;">
<div id="select-wrapper-980860" class="select-wrapper">
<div class="form-outline" data-mdb-input-init="" data-mdb-input-initialized="true">
<input class="form-control select-input placeholder-active" type="text" role="combobox" aria-multiselectable="true" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
<span class="select-arrow"></span>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 0px;"></div>
<div class="form-notch-trailing"></div>
</div>
</div>
<select data-mdb-select-init="" multiple="" data-mdb-filter="true" class="select-initialized" data-mdb-select-initialized="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
</div>
</section>示例——selecte with label
One
<div id="select-wrapper-322853" class="select-wrapper"><div class="form-outline" data-mdb-input-init="" data-mdb-input-initialized="true"><input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true"><label class="form-label select-label active" style="margin-left: 0px;">Example label</label><span class="select-arrow"></span><div class="form-notch"><div class="form-notch-leading" style="width: 9px;"></div><div class="form-notch-middle" style="width: 87.2px;"></div><div class="form-notch-trailing"></div></div><div class="form-label select-fake-value">One</div></div><select data-mdb-select-init="" class="select-initialized" data-mdb-select-initialized="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select></div>示例——todolist
My Todo-s
-
-
Buy groceries for next week
-
-
Renew car insurance
-
-
Sign up for online course
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card" id="list1" style="border-radius: .75rem; background-color: #eff1f2;">
<div class="card-body py-4 px-4 px-md-5">
<p class="h1 text-center mt-3 mb-4 pb-3 text-primary">
<i class="fas fa-check-square me-1"></i>
<u>My Todo-s</u>
</p>
<div class="pb-2">
<div class="card">
<div class="card-body">
<div class="d-flex flex-row align-items-center">
<input type="text" class="form-control form-control-lg" id="exampleFormControlInput1"
placeholder="Add new...">
<a href="#!" data-mdb-tooltip-init title="Set due date"><i
class="fas fa-calendar-alt fa-lg me-3"></i></a>
<div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<div class="d-flex justify-content-end align-items-center mb-4 pt-2 pb-3">
<p class="small mb-0 me-2 text-muted">Filter</p>
<select data-mdb-select-init>
<option value="1">All</option>
<option value="2">Completed</option>
<option value="3">Active</option>
<option value="4">Has due date</option>
</select>
<p class="small mb-0 ms-4 me-2 text-muted">Sort</p>
<select data-mdb-select-init>
<option value="1">Added date</option>
<option value="2">Due date</option>
</select>
<a href="#!" style="color: #23af89;" data-mdb-tooltip-init title="Ascending"><i
class="fas fa-sort-amount-down-alt ms-2"></i></a>
</div>
<ul class="list-group list-group-horizontal rounded-0 bg-transparent">
<li
class="list-group-item d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
<div class="form-check">
<input class="form-check-input me-0" type="checkbox" value="" id="flexCheckChecked1"
aria-label="..." checked />
</div>
</li>
<li
class="list-group-item px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
<p class="lead fw-normal mb-0">Buy groceries for next week</p>
</li>
<li class="list-group-item ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
<div class="d-flex flex-row justify-content-end mb-1">
<a href="#!" class="text-info" data-mdb-tooltip-init title="Edit todo"><i
class="fas fa-pencil-alt me-3"></i></a>
<a href="#!" class="text-danger" data-mdb-tooltip-init title="Delete todo"><i
class="fas fa-trash-alt"></i></a>
</div>
<div class="text-end text-muted">
<a href="#!" class="text-muted" data-mdb-tooltip-init title="Created date">
<p class="small mb-0"><i class="fas fa-info-circle me-2"></i>28th Jun 2020</p>
</a>
</div>
</li>
</ul>
<ul class="list-group list-group-horizontal rounded-0">
<li
class="list-group-item d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
<div class="form-check">
<input class="form-check-input me-0" type="checkbox" value="" id="flexCheckChecked2"
aria-label="..." />
</div>
</li>
<li
class="list-group-item px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
<p class="lead fw-normal mb-0">Renew car insurance</p>
</li>
<li class="list-group-item px-3 py-1 d-flex align-items-center border-0 bg-transparent">
<div
class="py-2 px-3 me-2 border border-warning rounded-3 d-flex align-items-center bg-body-tertiary">
<p class="small mb-0">
<a href="#!" data-mdb-tooltip-init title="Due on date">
<i class="fas fa-hourglass-half me-2 text-warning"></i>
</a>
28th Jun 2020
</p>
</div>
</li>
<li class="list-group-item ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
<div class="d-flex flex-row justify-content-end mb-1">
<a href="#!" class="text-info" data-mdb-tooltip-init title="Edit todo"><i
class="fas fa-pencil-alt me-3"></i></a>
<a href="#!" class="text-danger" data-mdb-tooltip-init title="Delete todo"><i
class="fas fa-trash-alt"></i></a>
</div>
<div class="text-end text-muted">
<a href="#!" class="text-muted" data-mdb-tooltip-init title="Created date">
<p class="small mb-0"><i class="fas fa-info-circle me-2"></i>28th Jun 2020</p>
</a>
</div>
</li>
</ul>
<ul class="list-group list-group-horizontal rounded-0 mb-2">
<li
class="list-group-item d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
<div class="form-check">
<input class="form-check-input me-0" type="checkbox" value="" id="flexCheckChecked3"
aria-label="..." />
</div>
</li>
<li
class="list-group-item px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
<p class="lead fw-normal mb-0 bg-body-tertiary w-100 ms-n2 ps-2 py-1 rounded">Sign up for online
course</p>
</li>
<li class="list-group-item ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
<div class="d-flex flex-row justify-content-end mb-1">
<a href="#!" class="text-danger" data-mdb-tooltip-init title="Delete todo"><i
class="fas fa-trash-alt"></i></a>
</div>
<div class="text-end text-muted">
<a href="#!" class="text-muted" data-mdb-tooltip-init title="Created date">
<p class="small mb-0"><i class="fas fa-info-circle me-2"></i>28th Jun 2020</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>示例——在线社区模板
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Socialite</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" href="#">Search Friends, videos.</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 bg-light sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Feed</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Groups</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Market</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Setting</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Upgrade</a>
</li>
</ul>
</div>
<div class="col-md-10 main-content">
<div class="d-flex justify-content-between align-items-center mb-3">
<h3>Monroe Parker 2 hours ago</h3>
<div>
<a href="#" class="btn btn-secondary me-2">Shortcut</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="ages/photo3.jpg" alt="Image" class="img-fluid">
<p>1,300</p>
<p>260</p>
<p>A 4</p>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Steeve</h5>
<p class="card-text">What a beautiful photo! I love it.</h5>
<h6 class="card-subtitle mb-2 text-muted">Monroe</h6>
<p class="card-text">You captured the moment.</p>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Add Comment...">
<button class="btn btn-primary" type="button">Comment</button>
</div>
</div>
</div>
<h4>Online Friends</h4>
<div class="d-flex justify-content-between">
<p>Pro Members</p>
<p>Martin Gray Alexa Park</p>
<p>12K Followers 12K Followers</p>
<p><a href="#" class="btn btn-outline-primary">Follow</a></p>
</div>
<h4>Trends for you</h4>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Artificial Intelligence (1,245,62 Post)</a>
<a href="#" class="list-group-item list-group-item-action">Web Developers (1.624 Post)</a>
<a href="#" class="list-group-item list-group-item-action">Ui Designers (820 Post)</a>
<a href="#" class="list-group-item list-group-item-action">Affliate Marketing (480 Post)</a>
</div>
</div>
</div>
</div>
</div>
</div>示例——滑块
<label class="form-label" for="customRange1">Example range</label>
<div class="range" data-mdb-range-init>
<input type="range" class="form-range" id="customRange1" />
</div>