-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (126 loc) · 5.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بوت استرپ</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> -->
<!-- <link rel="stylesheet" href="./bootstrap.min.css"> -->
<link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="./main.css">
</link>
</head>
<body>
<div class="container text-center">
<div class="row mt-3 mb-3">
<div class="col bg-secondary-subtle p-2 border border-1 rounded-3">
<h1>بوت استرپ</h1>
</div>
</div>
<div class="row mb-3">
<div class="col-6 bg-secondary-subtle p-2 border border-1 border-end-0 rounded-start-3">
1 of 2
</div>
<div class="col p-2 bg-secondary-subtle border border-1 rounded-end-3">
2 of 2
</div>
</div>
<div class="row mb-3">
<div class="col col-sm-2 p-2 bg-secondary-subtle border border-1 rounded-start-3">
1 of 3
</div>
<div class="col-6 col-sm-4 p-2 bg-secondary-subtle border border-1 border-end-0 border-start-0">
2 of 3
</div>
<div class="col col-sm-6 p-2 bg-secondary-subtle border border-1 rounded-end-3">
3 of 3
</div>
</div>
<div class="row mb-3">
<div class="col-6 col-md-4 p-2 bg-secondary-subtle border border-1 rounded-start-3">
1 of 3
</div>
<div class="col-6 col-md-4 p-2 bg-secondary-subtle border border-1 border-end-0 border-start-0">
2 of 3
</div>
<div class="col-6 col-md-4 p-2 bg-secondary-subtle border border-1 rounded-end-3">
3 of 3
</div>
</div>
<div class="row row-cols-1 text-center">
<span class="p-2 bg-secondary-subtle border border-1 rounded-3">set columns on div with 'row' class</span>
</div>
<div class="row row-cols-3 row-cols-sm-2 row-cols-md-4 mb-3">
<div class="p-2 bg-secondary-subtle border border-1 rounded-start-3">
col
</div>
<div class="p-2 bg-secondary-subtle border border-1 border-start-0 rounded-end-3">
col
</div>
</div>
<div class="row row-cols-1 text-center">
<span class="p-2 bg-secondary-subtle border border-1 rounded-3">Use col-{breakpoint}-auto classes to size
columns based on the natural width of their content.</span>
</div>
<div class="row row-cols-auto mb-3">
<div class="col p-2 bg-secondary-subtle border border-1 rounded-start-3">Column</div>
<div class="col p-2 bg-secondary-subtle border border-1 border-start-0">Column</div>
<div class="col p-2 bg-secondary-subtle border border-1 border-start-0 border-end-0">Column</div>
<div class="col p-2 bg-secondary-subtle border border-1 rounded-end-3">Column</div>
</div>
<div class="row mb-3">
<div class="col-md-3 p-2 bg-secondary-subtle border border-1 border-end-0">
Level 1: .col-md-3
</div>
<div class="col-md-9 p-2 bg-secondary-subtle border border-1">
<div class="row">
<div class="pb-2">
Level 1: .col-md-9
</div>
<div class="col-8 col-md-6 p-2 bg-secondary-subtle border border-1 border-end-0">
Level 2: .col-8 .col-md-6
</div>
<div class="col-4 col-md-6 p-2 bg-secondary-subtle border border-1">
Level 2: .col-4 .col-md-6
</div>
</div>
</div>
</div>
</div>
<div class="container px-4 mb-3">
<div class="row gx-5">
<div class="col bg-secondary-subtle border border-1">
<div class="">Custom column padding</div>
</div>
<div class="col bg-secondary-subtle border border-1">
<div class="">Custom column padding</div>
</div>
</div>
</div>
<div class="container overflow-hidden text-center mb-3">
<div class="row gy-3">
<div class="col-6 bg-secondary-subtle border border-1">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6 bg-secondary-subtle border border-1">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6 bg-secondary-subtle border border-1">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6 bg-secondary-subtle border border-1">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</body>
</html>