YoshFrontend

Tepadagi bo'limlarda siz dasturlashni (Frontentni) asoslarini ko'rasiz

HTML Asoslari

Bu bo‘lim HTML asoslari va misollarini o‘z ichiga oladi:

<!DOCTYPE html> — hujjat turi
<html lang="uz"></html>
<head></head>
<title>Sahifa nomi</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body></body>
<h1>Sarlavha 1</h1>
<h2>Sarlavha 2</h2>
<h3>Sarlavha 3</h3>
<p>Paragraf matni</p>
<a href="#">Link matni</a>
<img src="image.jpg" alt="rasm">
<ul></ul> — ro‘yxat
<li>Element</li>
<ol></ol>
<div></div>
<span></span>
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<form></form>
<input type="text">
<input type="password">
<button>Tugma</button>
<label>Matn</label>
<select></select>
<option>Variant</option>
<textarea></textarea>
<table></table>
<tr></tr>
<td></td>
<th></th>
<caption></caption>
<iframe src="url"></iframe>
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
<canvas id="canvas"></canvas>
<svg></svg>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="description" content="Tavsif">
<meta name="keywords" content="HTML,CSS,JS">
<meta name="author" content="Ism">
<strong>Qalin matn</strong>
<em>Ta’kidlangan matn</em>
<b>Qalin matn (b)</b>
<i>Italic matn</i>
<u>O‘tkazilgan matn</u>
<small>Kichik matn</small>
<mark>Belgilangan matn</mark>
<abbr title="Abbreviatura">HTML</abbr>
<cite>Manba</cite>
<code>Kod</code>
<kbd>Klaviatura</kbd>
<samp>Natija</samp>
<var>O‘zgaruvchi</var>
<time datetime="2026-02-07">Sana</time>
<progress value="70" max="100"></progress>
<meter value="0.6"></meter>
<details></details>
<summary>Kirish</summary>
<dialog></dialog>
<fieldset></fieldset>
<legend>Sarlavha</legend>
<optgroup label="Guruh"></optgroup>
<output>Natija</output>
<picture></picture>
<source srcset="img.jpg">
<template></template>
<slot></slot>
<main></main>
<meta http-equiv="refresh" content="30">
<base href="url">
<link rel="icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#ffffff">
<address>Manzil</address>
<h4>Sarlavha 4</h4>
<h5>Sarlavha 5</h5>
<h6>Sarlavha 6</h6>
<abbr title="Hypertext Markup Language">HTML</abbr>
<bdi>Bidirectional text</bdi>
<bdo dir="rtl">Matn yo‘nalishi</bdo>
<br>
<colgroup></colgroup>
<col></col>
<data value="10">10</data>
<datalist></datalist>
<dialog open></dialog>
<embed src="file.pdf">
<hr>
<i>Italic matn</i>
<ins>Qo‘shilgan matn</ins>
<link rel="preload" href="style.css">
<meta name="robots" content="index, follow">
<noscript></noscript>
<object data="file.swf"></object>
<param name="param1" value="value1">
<picture></picture>
<source media="(min-width:650px)" srcset="img.jpg">
<track kind="subtitles">
<wbr>

CSS Asoslari

Bu bo‘lim CSS asoslari va misollarini o‘z ichiga oladi:

body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
h1 { font-size: 32px; color: #333; }
h2 { font-size: 28px; color: #444; }
h3 { font-size: 24px; color: #555; }
p { line-height: 1.6; color: #666; }
a { text-decoration: none; color: #3498db; }
a:hover { color: #2980b9; }
ul { list-style: disc; margin-left: 20px; }
ol { list-style: decimal; margin-left: 20px; }
li { margin-bottom: 5px; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: auto; padding: 20px; }
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.btn-primary { background: #3498db; color: white; }
.btn-secondary { background: #2ecc71; color: white; }
.btn-danger { background: #e74c3c; color: white; }
.card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.card-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.card-text { font-size: 16px; color: #555; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.bg-primary { background: #3498db; color: white; }
.bg-secondary { background: #2ecc71; color: white; }
.bg-danger { background: #e74c3c; color: white; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 10px; }
.shadow { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.m-4 { margin: 20px; }
.display-none { display: none; }
.display-block { display: block; }
.display-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-index-1 { z-index: 1; }
.z-index-10 { z-index: 10; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-light { font-weight: 300; }
.line-height-1 { line-height: 1; }
.line-height-15 { line-height: 1.5; }
.line-height-2 { line-height: 2; }
.letter-spacing-1 { letter-spacing: 1px; }
.letter-spacing-2 { letter-spacing: 2px; }
.bg-gradient { background: linear-gradient(45deg, #1e3c72, #2a5298); }
.bg-dark { background: #222; color: white; }
.bg-light { background: #f9f9f9; color: #333; }
.hover-underline:hover { text-decoration: underline; }
.transition { transition: 0.3s; }
.transition-fast { transition: 0.1s; }
.transition-slow { transition: 0.5s; }
.cursor-pointer { cursor: pointer; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.max-width-100 { max-width: 100%; }
.min-width-100 { min-width: 100%; }
.max-height-100 { max-height: 100%; }
.min-height-100 { min-height: 100%; }
.border-top { border-top: 1px solid #ddd; }
.border-bottom { border-bottom: 1px solid #ddd; }
.border-left { border-left: 1px solid #ddd; }
.border-right { border-right: 1px solid #ddd; }
.rounded-circle { border-radius: 50%; }
.rounded-sm { border-radius: 5px; }
.rounded-md { border-radius: 10px; }
.rounded-lg { border-radius: 20px; }
.text-white { color: white; }
.text-black { color: black; }
.text-gray { color: gray; }
.bg-red { background: red; }
.bg-green { background: green; }
.bg-blue { background: blue; }
.bg-yellow { background: yellow; }
.bg-orange { background: orange; }
.bg-purple { background: purple; }
.bg-pink { background: pink; }
.bg-teal { background: teal; }
.bg-cyan { background: cyan; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.m-auto { margin: auto; }
.p-auto { padding: auto; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-1 { gap: 5px; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 15px; }
.gap-4 { gap: 20px; }
.hover-scale:hover { transform: scale(1.05); }
.transition-all { transition: all 0.3s; }
.overflow-auto { overflow: auto; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clearfix::after { content: ""; display: table; clear: both; }
.position-sticky { position: sticky; top: 0; }
.z-top { z-index: 999; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.hover-opacity:hover { opacity: 0.7; }
.bg-gradient-dark { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); }
.bg-gradient-light { background: linear-gradient(135deg, #1e3c72, #2a5298); }
.text-gradient { background: linear-gradient(90deg, #ff6a00, #ee0979); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.text-nowrap { white-space: nowrap; }
.word-break { word-break: break-word; }
.overflow-hidden { overflow: hidden; }
.hover-bg-dark:hover { background: #333; }
.hover-bg-light:hover { background: #eee; }
.hover-text-primary:hover { color: #3498db; }
.hover-text-secondary:hover { color: #2ecc71; }
.hover-text-danger:hover { color: #e74c3c; }
.transition-fast { transition: 0.1s; }
.transition-slow { transition: 0.5s; }
.rounded-tl { border-top-left-radius: 10px; }
.rounded-tr { border-top-right-radius: 10px; }
.rounded-bl { border-bottom-left-radius: 10px; }
.rounded-br { border-bottom-right-radius: 10px; }
.shadow-sm { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0,0,0,0.3); }

JavaScript Asoslari

Bu bo‘lim JS asoslari va misollarini o‘z ichiga oladi:

console.log("Salom Dunyo!");
let x = 10;
const y = 20;
var z = 30;
x + y;
x - y;
x * y;
x / y;
x % y;
x ** 2;
let str = "Salom";
str.length;
str.toUpperCase();
str.toLowerCase();
str.includes("lo");
str.startsWith("Sa");
str.endsWith("om");
str.split(" ");
str.replace("Salom","Hello");
let arr = [1,2,3,4,5];
arr.push(6);
arr.pop();
arr.shift();
arr.unshift(0);
arr.slice(1,3);
arr.splice(2,1);
arr.concat([6,7]);
arr.join(", ");
arr.indexOf(3);
arr.includes(4);
arr.forEach(i => console.log(i));
let newArr = arr.map(i => i*2);
let filtered = arr.filter(i => i>2);
let sum = arr.reduce((acc, i) => acc + i, 0);
let obj = {name:"John", age:30, city:"Tashkent"};
obj.name;
obj["age"];
obj.city = "Samarkand";
delete obj.age;
Object.keys(obj);
Object.values(obj);
Object.entries(obj);
for (let key in obj) { console.log(key, obj[key]); }
for (let value of Object.values(obj)) { console.log(value); }
if (x > y) { console.log("X katta"); } else { console.log("Y katta"); }
if (x === 10) console.log("X teng 10");
switch(x){ case 10: console.log("O'n"); break; default: console.log("Boshqa"); }
for(let i=0; i<10; i++){ console.log(i); }
while(x < 15){ x++; }
do { x--; } while(x > 5);
function add(a,b){ return a+b; }
const sub = (a,b) => a-b;
const multiply = (a,b) => { return a*b; }
function greet(name){ console.log("Salom " + name); }
greet("Madina");
let timer = setTimeout(() => console.log("2 sekund o‘tdi"), 2000);
clearTimeout(timer);
let interval = setInterval(() => console.log("Har 1 sekund"), 1000);
clearInterval(interval);
JSON.stringify(obj);
JSON.parse('{"name":"John"}');
let date = new Date();
date.getFullYear();
date.getMonth();
date.getDate();
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds();
Math.floor(4.7);
Math.ceil(4.3);
Math.round(4.5);
Math.random();
Math.max(1,2,3);
Math.min(1,2,3);
Math.pow(2,3);
Math.sqrt(16);
let regex = /ab+c/;
regex.test("abbbbc");
"abc".match(regex);
"abc".replace(regex,"X");
let set = new Set([1,2,3]);
set.add(4);
set.delete(2);
set.has(3);
for(let val of set){ console.log(val); }
let map = new Map();
map.set("name","John");
map.get("name");
map.delete("name");
map.has("name");
for(let [key,value] of map){ console.log(key,value); }
const promise = new Promise((resolve,reject)=>{ resolve("Done"); });
promise.then(res => console.log(res));
promise.catch(err => console.log(err));
async function fetchData(){ return "Data"; }
fetchData().then(res => console.log(res));
let x = 10; x += 5; x -= 3; x *= 2; x /= 4;
x++; x--;
++x; --x;
let bool = true;
!bool;
bool && false;
bool || false;
typeof x;
Array.isArray(arr);
isNaN("abc");
parseInt("123");
parseFloat("12.3");
Number("123");
String(123);
Boolean(0);
let func = function(a,b){ return a+b; }
let arrow = (a,b) => a+b;
arr.find(i => i>3);
arr.findIndex(i => i===3);
arr.every(i => i>0);
arr.some(i => i>3);
arr.sort((a,b)=>a-b);
arr.reverse();
let copy = [...arr];
let combined = [...arr, 6,7];
let [a,b,...rest] = arr;
let {name, age} = obj;
obj = {...obj, city:"New York"};
let newObj = Object.assign({}, obj);

JavaScript Asoslari

Bu bo‘lim JS asoslari va misollarini o‘z ichiga oladi:

console.log("Salom Dunyo!");
let x = 10;
const y = 20;
var z = 30;
x + y;
x - y;
x * y;
x / y;
x % y;
x ** 2;
let str = "Salom";
str.length;
str.toUpperCase();
str.toLowerCase();
str.includes("lo");
str.startsWith("Sa");
str.endsWith("om");
str.split(" ");
str.replace("Salom","Hello");
let arr = [1,2,3,4,5];
arr.push(6);
arr.pop();
arr.shift();
arr.unshift(0);
arr.slice(1,3);
arr.splice(2,1);
arr.concat([6,7]);
arr.join(", ");
arr.indexOf(3);
arr.includes(4);
arr.forEach(i => console.log(i));
let newArr = arr.map(i => i*2);
let filtered = arr.filter(i => i>2);
let sum = arr.reduce((acc, i) => acc + i, 0);
let obj = {name:"John", age:30, city:"Tashkent"};
obj.name;
obj["age"];
obj.city = "Samarkand";
delete obj.age;
Object.keys(obj);
Object.values(obj);
Object.entries(obj);
for (let key in obj) { console.log(key, obj[key]); }
for (let value of Object.values(obj)) { console.log(value); }
if (x > y) { console.log("X katta"); } else { console.log("Y katta"); }
if (x === 10) console.log("X teng 10");
switch(x){ case 10: console.log("O'n"); break; default: console.log("Boshqa"); }
for(let i=0; i<10; i++){ console.log(i); }
while(x < 15){ x++; }
do { x--; } while(x > 5);
function add(a,b){ return a+b; }
const sub = (a,b) => a-b;
const multiply = (a,b) => { return a*b; }
function greet(name){ console.log("Salom " + name); }
greet("Madina");
let timer = setTimeout(() => console.log("2 sekund o‘tdi"), 2000);
clearTimeout(timer);
let interval = setInterval(() => console.log("Har 1 sekund"), 1000);
clearInterval(interval);
JSON.stringify(obj);
JSON.parse('{"name":"John"}');
let date = new Date();
date.getFullYear();
date.getMonth();
date.getDate();
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds();
Math.floor(4.7);
Math.ceil(4.3);
Math.round(4.5);
Math.random();
Math.max(1,2,3);
Math.min(1,2,3);
Math.pow(2,3);
Math.sqrt(16);
let regex = /ab+c/;
regex.test("abbbbc");
"abc".match(regex);
"abc".replace(regex,"X");
let set = new Set([1,2,3]);
set.add(4);
set.delete(2);
set.has(3);
for(let val of set){ console.log(val); }
let map = new Map();
map.set("name","John");
map.get("name");
map.delete("name");
map.has("name");
for(let [key,value] of map){ console.log(key,value); }
const promise = new Promise((resolve,reject)=>{ resolve("Done"); });
promise.then(res => console.log(res));
promise.catch(err => console.log(err));
async function fetchData(){ return "Data"; }
fetchData().then(res => console.log(res));
let x = 10; x += 5; x -= 3; x *= 2; x /= 4;
x++; x--;
++x; --x;
let bool = true;
!bool;
bool && false;
bool || false;
typeof x;
Array.isArray(arr);
isNaN("abc");
parseInt("123");
parseFloat("12.3");
Number("123");
String(123);
Boolean(0);
let func = function(a,b){ return a+b; }
let arrow = (a,b) => a+b;
arr.find(i => i>3);
arr.findIndex(i => i===3);
arr.every(i => i>0);
arr.some(i => i>3);
arr.sort((a,b)=>a-b);
arr.reverse();
let copy = [...arr];
let combined = [...arr, 6,7];
let [a,b,...rest] = arr;
let {name, age} = obj;
obj = {...obj, city:"New York"};
let newObj = Object.assign({}, obj);

React Asoslari

Bu bo‘lim React asoslari va misollarini o‘z ichiga oladi:

import React from "react";
import { useState } from "react";
function App() {
return (
<div>Hello React</div>
);
}
export default App;
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>Count: {count}</p>
useEffect(() => { console.log("Component mounted"); }, []);
useEffect(() => { console.log("Count changed:", count); }, [count]);
const handleClick = () => { alert("Clicked!"); };
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
const [name, setName] = useState("");
const list = [1,2,3,4];
<ul>{list.map(i => <li key={i}>Item {i}</li>)}</ul>
const obj = {name:"John", age:30};
<p>Name: {obj.name}, Age: {obj.age}</p>
function Greeting({name}) { return <h1>Hello {name}</h1>; }
<Greeting name="Madina" />
React.Fragment: <> ... </>
Conditional rendering: {count > 0 ? "Positive" : "Zero"}
Logical &&: {count > 0 && <p>Count is positive</p>}
Form submit: <form onSubmit={handleSubmit}>...
const handleSubmit = (e) => { e.preventDefault(); alert(name); }
useRef hook: const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus();
useMemo: const memoValue = useMemo(() => computeHeavy(value), [value]);
useCallback: const memoFunc = useCallback(() => { doSomething(); }, [deps]);
Context API: const MyContext = React.createContext();
<MyContext.Provider value={{user}}>...</MyContext.Provider>
useContext: const ctx = useContext(MyContext);
React Router: import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter><Routes><Route path="/" element=<Home /> /></Routes></BrowserRouter>
Dynamic components: const Component = components[name]; <Component />
Lazy loading: const LazyComp = React.lazy(() => import('./LazyComp'));
<Suspense fallback=<div>Loading...</div>><LazyComp /></Suspense>
Error boundaries: class ErrorBoundary extends React.Component { ... }
<ErrorBoundary><App /></ErrorBoundary>
PropTypes: Component.propTypes = { name: PropTypes.string }
Default props: Component.defaultProps = { name: "Guest" }
Keys in lists: <li key={item.id}>{item.name}</li>
Fragments instead of divs: <></>
React.StrictMode: <React.StrictMode>...</React.StrictMode>
State object: const [state, setState] = useState({a:1,b:2});
setState({...state, a:2});
Event handling: onClick, onChange, onSubmit
Styling inline: <div style={{color:"red"}}>Red Text</div>
CSS modules: import styles from "./App.module.css"; <div className={styles.title}>
Conditional className: className={isActive ? "active" : "inactive"}
Template literals: {`Hello ${name}`}
Spread props: <Component {...props} />
Children prop: <Wrapper>...</Wrapper>
Portals: ReactDOM.createPortal(<Modal />, document.body)
Refs callback: <div ref={el => this.el = el}>
useImperativeHandle for custom refs
Higher-order component: function withLogger(Component){ return props => {...} }
Custom hooks: function useCounter(){ const [c,setC]=useState(0); return {c,setC}; }
JSX expressions: <p>{count*2}</p>
Rendering arrays: {arr.map(x => <span>{x}</span>)}
Rendering objects: {Object.keys(obj).map(k => <p>{k}: {obj[k]}</p>)}
Event preventDefault: onSubmit={e => e.preventDefault()}
useState with object: const [form,setForm]=useState({name:"",age:""});
setForm({...form,name:"Madina"})
useEffect cleanup: useEffect(() => { return () => console.log("cleanup"); }, [])
Context with useReducer: const [state,dispatch]=useReducer(reducer,initialState)
useReducer actions: dispatch({type:"INCREMENT"})
Custom memo: React.memo(Component)
useLayoutEffect: useLayoutEffect(() => { ... }, [])
useDebugValue: useDebugValue(value)
React Profiler: <Profiler id="App" onRender={callback}>
JSX comments: {/* Comment here */}
Fragment shorthand: <> ... </>
Conditional render: {isLoggedIn ? <Logout /> : <Login />}
Dynamic import: const Comp = React.lazy(() => import("./Comp"));
Array of components: {components.map((C,i)=><C key={i}/>)}
Spread attributes: <input {...props} />
Destructuring props: function Comp({name,age}) {}
Default parameter: function greet(name="Guest") {}
Event handler with param: onClick={() => handleDelete(id)}
Boolean attributes: <input checked />
React.Children.map: React.Children.map(children, child => ...)
React.Children.toArray(children)
React.Children.only(children)

Bootstrap Asoslari

Bu bo‘lim Bootstrap klasslari, grid va komponentlarini o‘z ichiga oladi:

<div class="container"></div>
<div class="container-fluid"></div>
<div class="row"></div>
<div class="col"></div>
<div class="col-6"></div>
<div class="col-md-4"></div>
<div class="col-lg-3"></div>
<div class="col-sm-12"></div>
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: #0d6efd; }
.text-secondary { color: #6c757d; }
.text-success { color: #198754; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #0dcaf0; }
.text-light { color: #f8f9fa; }
.text-dark { color: #212529; }
.bg-primary { background-color: #0d6efd; }
.bg-secondary { background-color: #6c757d; }
.bg-success { background-color: #198754; }
.bg-danger { background-color: #dc3545; }
.bg-warning { background-color: #ffc107; }
.bg-info { background-color: #0dcaf0; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: #212529; }
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-fill { flex: 1 1 auto; }
.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.align-self-auto { align-self: auto; }
.order-first { order: -1; }
.order-last { order: 13; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.rounded { border-radius: 0.25rem; }
.rounded-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rounded-end { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.rounded-bottom { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.rounded-start { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.rounded-circle { border-radius: 50%; }
.rounded-pill { border-radius: 50rem; }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175); }
.shadow-none { box-shadow: none; }
.border { border: 1px solid #dee2e6; }
.border-0 { border: 0; }
.border-top { border-top: 1px solid #dee2e6; }
.border-end { border-right: 1px solid #dee2e6; }
.border-bottom { border-bottom: 1px solid #dee2e6; }
.border-start { border-left: 1px solid #dee2e6; }
.border-primary { border-color: #0d6efd; }
.border-secondary { border-color: #6c757d; }
.border-success { border-color: #198754; }
.border-danger { border-color: #dc3545; }
.border-warning { border-color: #ffc107; }
.border-info { border-color: #0dcaf0; }
.border-light { border-color: #f8f9fa; }
.border-dark { border-color: #212529; }
.bg-gradient { background: linear-gradient(45deg, #0d6efd, #198754); }
.btn { display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-success { color: #fff; background-color: #198754; border-color: #198754; }
.btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-warning { color: #212529; background-color: #ffc107; border-color: #ffc107; }
.btn-info { color: #212529; background-color: #0dcaf0; border-color: #0dcaf0; }
.btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-dark { color: #fff; background-color: #212529; border-color: #212529; }
.btn-outline-primary { color: #0d6efd; border-color: #0d6efd; }
.btn-outline-secondary { color: #6c757d; border-color: #6c757d; }
.btn-outline-success { color: #198754; border-color: #198754; }
.btn-outline-danger { color: #dc3545; border-color: #dc3545; }
.btn-outline-warning { color: #ffc107; border-color: #ffc107; }
.btn-outline-info { color: #0dcaf0; border-color: #0dcaf0; }
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-dark { color: #212529; border-color: #212529; }
.btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; }
.form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.form-label { display: inline-block; margin-bottom: 0.5rem; }
.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; }
.form-check-input { float: left; margin-left: -1.5em; }
.form-check-label { margin-left: 0.25rem; }
.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; }
.alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.alert-light { color: #636464; background-color: #fefefe; border-color: #fdfdfe; }
.alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; }

Xush kelibsiz

Tepadagi bo'limlarda siz dasturlashni (Frontentni) asoslarini ko'rasiz

HTML Asoslari

CSS Asoslari

JavaScript Asoslari

JavaScript Asoslari

React Asoslari

Bootstrap Asoslari