Ứng dụng Angular 9

components.html
ui /
project /

1 <!doctype html>
2 <html lang="en">
3
4 <head>
5   <meta charset="utf-8">
6   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7   <meta name="description" content="">
8   <title>Starter Template · Bootstrap</title>
9   <link href="assets/fontawesome/css/all.min.css" rel="stylesheet">
10   <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
11   <link href="assets/params/css/index.css" rel="stylesheet">
12   <link href="assets/params/css/home.css" rel="stylesheet">
13
14
15 </head>
16
17 <body>
18
19   <div class="app">
20
21     <header>
22       <nav class="navbar navbar-expand-md fixed-top navbar-dark " style="background-color: #212121;">
23         <a class="navbar-brand" href="#">
24           <span class="mr-1" style="color:white">angular-starter</span>
25           <img src="./assets/params/images/logo/ganatan.png" width="20" height="20" alt="">
26         </a>
27         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
28           aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
29           <span class="navbar-toggler-icon"></span>
30         </button>
31         <div class="collapse navbar-collapse" id="navbarsExampleDefault">
32           <ul class="navbar-nav ml-auto">
33             <li class="nav-item active">
34               <a class="nav-link" href="#">
35                 <i class="fas fa-home mr-1"></i>home
36               </a>
37             </li>
38             <li class="nav-item active">
39               <a class="nav-link" href="#">
40                 <i class="far fa-question-circle mr-1"></i>About
41               </a>
42             </li>
43             <li class="nav-item active">
44               <a class="nav-link" href="#">
45                 <i class="fas fa-envelope mr-1"></i>Contact
46               </a>
47             </li>
48             <li class="nav-item active">
49               <a class="nav-link" href="#">
50                 <i class="fas fa-user mr-1"></i>Sign in
51               </a>
52             </li>
53             <li class="nav-item active">
54               <a class="nav-link" href="https://github.com/ganatan">
55                 <i class="fab fa-github mr-1"></i>Github
56               </a>
57             </li>
58           </ul>
59         </div>
60       </nav>
61     </header>
62
63
64
65     <main>
66       <div class="container-fluid">
67
68         <div class="row">
69           <div class="text-center col">
70             <h1 class="h3">Feature : Components</h1>
71             <hr>
72           </div>
73         </div>
74
75         <div class="row pb-4">
76           <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
77             <div class="row">
78
79               <div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 px-2 mb-1">
80                 <div class="card">
81                   <div class="row no-gutters">
82                     <div class="col-md-6 pt-2 pb-2">
83                       <img src="./assets/params/images/smartphones/iPhone 8.jpg" class="card-img" alt="...">
84                     </div>
85                     <div class="col-md-6">
86                       <div class="card-body">
87                         <a href="#" class="btn btn-primary btn-sm">n° 1</a>
88                         <h6 class="card-subtitle mb-2 text-muted pt-4">IPhone 10</h6>
89                         <h6 class="card-subtitle mb-2 text-muted">model</h6>
90                         <h6 class="card-subtitle mb-2 text-muted">prize</h6>
91                         <h6 class="card-subtitle mb-2 text-muted">year</h6>
92                       </div>
93                     </div>
94                   </div>
95                 </div>
96               </div>
97               <div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 px-2 mb-1">
98                 <div class="card">
99                   <div class="row no-gutters">
100                     <div class="col-md-6 pt-2 pb-2">
101                       <img src="./assets/params/images/smartphones/IPhone 11.jpg" class="card-img" alt="...">
102                     </div>
103                     <div class="col-md-6">
104                       <div class="card-body">
105                         <h6 class="card-subtitle mb-2 text-muted">IPhone 10</h6>
106                         <h6 class="card-subtitle mb-2 text-muted">model</h6>
107                         <h6 class="card-subtitle mb-2 text-muted">prize</h6>
108                         <h6 class="card-subtitle mb-2 text-muted">year</h6>
109                       </div>
110                     </div>
111                   </div>
112                 </div>
113               </div>
114
115             </div>
116           </div>
117         </div>
118
119       </div>
120     </main>
121
122     <div class="footer">
123       <div class="container">
124         <div class="row">
125           <div class="col-12">
126             <p class="text-center text-white">© 2019 - www.ganatan.com</p>
127           </div>
128         </div>
129       </div>
130     </div>
131
132   </div>
133
134   <script src="assets/jquery/js/jquery-3.4.1.min.js"></script>
135   <script src="assets/bootstrap/js/bootstrap.min.js"></script>
136   <script src="assets/params/js/index.js"></script>
137
138 </body>
139
140 </html>

Ứng dụng Angular 9

Web, Tìm kiếm nhanh

Web, Tìm kết quả nhanh

Dự án liên quan!

Hệ thống thông tin và điều độ xe buýt

Tạo Trình quản lý điểm, Phá hủy ranh giới và Bộ điều khiển lối chơi

Cách tạo thu gọn Bootstrap

Bóng văn bản (và hiệu ứng)

Các lớp/tiểu bang giả

Lề và phần đệm