- 21 Eyl 2019
- 917
- 1
- 139
Merhaba. Bootstrap mantığında kendi Custom Utility CSS Frameworkümü geliştirmek istiyorum. Aslında Bootstrap kodlarını inceleyerek baya birşey öğrendim. HTML ve CSS konularını baya unumuşum. Tekrarlarsam bu responsive olayını da atlatırım diye düşünüyorum. Ardından JS eğitimi aldım ona başlayacağım. Fakat bu responsive olayını çözemiyorum arka planda bootstrap'in responsive olayını yani. Burada kodları bırakıyorum arkadaşlar. Biraz kurcalamama rağmen arka planda media query yazmışlar ama adamlar örnek veriyorum max-width demek yerine min-width ile farklı şekilde yapmışlar. O kısımda Bana yardımcı olabilecek arkadaşlar var mı?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 col-sm-4">
<a href="#" class="text-muted text-decoration-none">
Subscribe
</a>
</div>
<div class="col-4 col-sm-4 text-center">
<a href="#" class="blog-header-logo text-dark text-decoration-none fw-strong">
Rufiq Cavadov
</a>
</div>
<div class="col-4 col-sm-4 d-flex justify-content-end align-items-center">
<div class="actions">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
CSS:
.container {
width: 1140px;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.d-flex {
display: flex;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-end {
justify-content: flex-end;
}
.align-items-center {
align-items: center;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.text-center {
text-align: center;
}
.text-dark {
color: #343a40;
}
.text-muted {
color: #6c757d;
}
.text-decoration-none {
text-decoration: none;
}
.fw-strong {
font-weight: 900;
}
