bootstrap migrate
This commit is contained in:
Aleksandr Trushkin
0
htmlexamples/assets/style.css
Normal file
0
htmlexamples/assets/style.css
Normal file
182
htmlexamples/core.html
Normal file
182
htmlexamples/core.html
Normal file
@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Test page</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
<body data-bs-theme="dark">
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Kurious</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNavAltMarkup"
|
||||
aria-controls="navbarNavAltMarkup"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
<a class="nav-link" href="#">About us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item" aria-current="page">
|
||||
<a href="#">Course</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Theme</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row row-cols-1 row-cols-md-4 g-4">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img
|
||||
src="https://placehold.co/128x128"
|
||||
class="card-img-top"
|
||||
alt=""
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</h5>
|
||||
<p class="card-text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
|
||||
omnis vero, reiciendis obcaecati perferendis excepturi nostrum
|
||||
nobis itaque modi dignissimos ...
|
||||
</p>
|
||||
<!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
|
||||
</div>
|
||||
<div class="list-group">
|
||||
<a href="#" class="btn btn-primary">Buy for 399.99$</a>
|
||||
<small class="text-body-secondary"></small>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<small class="text-body-secondary col">399.99$</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img
|
||||
src="https://placehold.co/128x128"
|
||||
class="card-img-top"
|
||||
alt=""
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</h5>
|
||||
<p class="card-text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
|
||||
omnis vero, reiciendis obcaecati perferendis excepturi nostrum
|
||||
nobis itaque modi dignissimos ...
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<small class="text-body-secondary">399.99$</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img
|
||||
src="https://placehold.co/128x128"
|
||||
class="card-img-top"
|
||||
alt=""
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</h5>
|
||||
<p class="card-text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
|
||||
omnis vero, reiciendis obcaecati perferendis excepturi nostrum
|
||||
nobis itaque modi dignissimos ...
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<small class="text-body-secondary">399.99$</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img
|
||||
src="https://placehold.co/128x128"
|
||||
class="card-img-top"
|
||||
alt=""
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</h5>
|
||||
<p class="card-text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
|
||||
omnis vero, reiciendis obcaecati perferendis excepturi nostrum
|
||||
nobis itaque modi dignissimos ...
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<small class="text-body-secondary">399.99$</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img
|
||||
src="https://placehold.co/128x128"
|
||||
class="card-img-top"
|
||||
alt=""
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</h5>
|
||||
<p class="card-text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
|
||||
omnis vero, reiciendis obcaecati perferendis excepturi nostrum
|
||||
nobis itaque modi dignissimos ...
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<small class="text-body-secondary">399.99$</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
126
htmlexamples/index.html
Normal file
126
htmlexamples/index.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
clifford: '#da373d',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="text-3xl font-bold underline text-clifford">
|
||||
Привет мир!
|
||||
</h1>
|
||||
|
||||
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
|
||||
<div class="shrink-0">
|
||||
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xl font-medium text-black">ChitChat</div>
|
||||
<p class="text-slate-500">У вас новое сообщение!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
|
||||
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Женское лицо" />
|
||||
<div class="text-center space-y-2 sm:text-left">
|
||||
<div class="space-y-0.5">
|
||||
<p class="text-lg text-black font-semibold">
|
||||
Эрин Линдфорд
|
||||
</p>
|
||||
<p class="text-slate-500 font-medium">
|
||||
Инженер по продукту
|
||||
</p>
|
||||
</div>
|
||||
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Сообщение</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="bg-sky-500 hover:bg-sky-700 px-4 py-1 rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
|
||||
Сохранить изменения
|
||||
</button>
|
||||
|
||||
<button class="dark:md:hover:bg-fuchsia-600 px-4 py-1 rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
|
||||
Сохранить изменения
|
||||
</button>
|
||||
|
||||
<ul role="list" class="p-6 divide-y divide-slate-200">
|
||||
<li class="flex py-4 first:pt-0 last:pb-0">
|
||||
<img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<p class="text-sm font-medium text-slate-900">{person.name}</p>
|
||||
<p class="text-sm text-slate-500 truncate">{person.email}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="py-8 px-8 max-w-sm max-auto">
|
||||
<form>
|
||||
<label class="block">
|
||||
<span class="block text-sm font-medium text-slate-700">Имя пользователя</span>
|
||||
<!-- Using form state modifiers, the classes can be identical for every input -->
|
||||
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
|
||||
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
|
||||
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
|
||||
invalid:border-pink-500 invalid:text-pink-600
|
||||
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
||||
/>
|
||||
<span class="block text-sm font-medium text-slate-700">Password</span>
|
||||
<!-- Using form state modifiers, the classes can be identical for every input -->
|
||||
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
|
||||
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
|
||||
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
|
||||
invalid:border-pink-500 invalid:text-pink-600
|
||||
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
||||
/>
|
||||
</label>
|
||||
<!-- ... -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
|
||||
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">Новый проект</h3>
|
||||
</div>
|
||||
<p class="text-slate-500 group-hover:text-white text-sm">Создайте новый проект из множества начальных шаблонов.</p>
|
||||
</a>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="columns-3 gap-8">
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
139
htmlexamples/new.html
Normal file
139
htmlexamples/new.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Test page</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
|
||||
crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary w-auto">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Some text</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<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="#">About us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container p-4">
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '/';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Main</a></li>
|
||||
<li class="breadcrumb-item" aria-current="page"><a href="#">Languages</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Japanese</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="input-group mb-3 w-75">
|
||||
|
||||
<span class="input-group-text">Filter categories</span>
|
||||
|
||||
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>All</option>
|
||||
<option value="1">Programming</option>
|
||||
<option value="2">Design</option>
|
||||
<option value="3">Business</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>All</option>
|
||||
<option value="1">Web development</option>
|
||||
<option value="2">Backend</option>
|
||||
<option value="3">Frontend</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-outline-secondary" type="button">> Go</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1 class="title">Languages</h1>
|
||||
<span>A languages category provides all courses to help learn language</span>
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
<div class="col">
|
||||
<select class="form-select col-4" id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>Pick a school</option>
|
||||
<option value="1">First school in the row</option>
|
||||
<option value="2">Second but not the shortest named school</option>
|
||||
<option value="3">Third small</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<select class="form-select col-4" id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>Sort by</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col"></div>
|
||||
<div class="col-2 text-end">
|
||||
<div class="btn btn-primary">Promocodes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h2 class="title">Japanese</h2>
|
||||
<span>Looking for a course to learn japanese language?</span>
|
||||
|
||||
<div class="container p-2">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="g-sm-4 g-2 col-12 col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<img src="https://placehold.co/128x128" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title with a long naming</h5>
|
||||
<div class="input-group">
|
||||
<a href="#" class="btn text btn-outline-primary">Open ></a>
|
||||
<span class="input-group-text justify-content-end flex-fill">500$</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="container">
|
||||
<div class="text-end">
|
||||
<p>(c) All right reserved</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
Reference in New Issue
Block a user