yazilimologgg31
Centipat
- Katılım
- 20 Ekim 2023
- Mesajlar
- 98
Daha fazla
- Cinsiyet
- Erkek
Bootstrap'teki Grid System işini görecektir.
v4 için:
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.getbootstrap.com
v5 için:
Columns
Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.getbootstrap.com
Bu proje için bootstrap kullanmamız yasak maalesef.Bootstrap'teki Grid System işini görecektir.
v4 için:
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.getbootstrap.com
v5 için:
Columns
Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.getbootstrap.com
O zaman class'lara kendin atama yap CSS üzerinden. Her türlü "div"lerle yapacaksın ne de olsa.Bu proje için Bootstrap kullanmamız yasak maalesef.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Footer</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<footer>
<div class="section1">
<h1>Linkler</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="section2">
<h1>Biz kimiz</h1>
<ul>
<li><a href="#">Kurumsal</a></li>
<li><a href="#">Ekibimiz</a></li>
<li><a href="#">Medyada Biz</a></li>
<li><a href="#">Foto Galeri</a></li>
</ul>
</div>
<div class="section3">
<h1>Hizmetlerimiz</h1>
<ul>
<li><a href="#">Hizmet 1</a></li>
<li><a href="#">Hizmet 2</a></li>
<li><a href="#">Hizmet 3</a></li>
<li><a href="#">Hizmet 4</a></li>
</ul>
</div>
<div class="section4">
<h1>Sosyal medya</h1>
<ul>
<li><a href="#">İnstagram</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>
</footer>
</body>
</html>*
{
margin: 0;
padding: 0;
list-style: none;
}
footer.
{
position: fixed;
bottom:0px;
right:0px;
display: flex;
width: 100vw;
height: 300px;
background: #232323;
justify-content: center;
}
footer .section1 h1.
{
color: white;
font-family: Arial;
}
footer .section1 ul li a
{
color: aquamarine;
}
footer .section2 {
margin-left: 200px;
}
footer .section2 h1.
{
color: white;
font-family: Arial;
}
footer .section2 ul li a
{
color: aquamarine;
}
footer .section3 {
margin-left: 200px;
}
footer .section3 h1.
{
color: white;
font-family: Arial;
}
footer .section3 ul li a
{
color: aquamarine;
}
footer .section4 {
margin-left: 200px;
}
footer .section4 h1.
{
color: white;
font-family: Arial;
}
footer .section4 ul li a
{
color: aquamarine;
}Hocam neden böyle gözüküyor ben de. Alt alta nasıl getirebilirim?HTML:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Footer</title> <link rel="stylesheet" href="app.css"> </head> <body> <footer> <div class="section1"> <h1>Linkler</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> <div class="section2"> <h1>Biz kimiz</h1> <ul> <li><a href="#">Kurumsal</a></li> <li><a href="#">Ekibimiz</a></li> <li><a href="#">Medyada Biz</a></li> <li><a href="#">Foto Galeri</a></li> </ul> </div> <div class="section3"> <h1>Hizmetlerimiz</h1> <ul> <li><a href="#">Hizmet 1</a></li> <li><a href="#">Hizmet 2</a></li> <li><a href="#">Hizmet 3</a></li> <li><a href="#">Hizmet 4</a></li> </ul> </div> <div class="section4"> <h1>Sosyal medya</h1> <ul> <li><a href="#">İnstagram</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Youtube</a></li> </ul> </div> </footer> </body> </html>
CSS:* { margin: 0; padding: 0; list-style: none; } footer. { position: fixed; bottom:0px; right:0px; display: flex; width: 100vw; height: 300px; background: #232323; justify-content: center; } footer .section1 h1. { color: white; font-family: Arial; } footer .section1 ul li a { color: aquamarine; } footer .section2 { margin-left: 200px; } footer .section2 h1. { color: white; font-family: Arial; } footer .section2 ul li a { color: aquamarine; } footer .section3 { margin-left: 200px; } footer .section3 h1. { color: white; font-family: Arial; } footer .section3 ul li a { color: aquamarine; } footer .section4 { margin-left: 200px; } footer .section4 h1. { color: white; font-family: Arial; } footer .section4 ul li a { color: aquamarine; }
Devamı sana kalmış.
Ve otomatik düzeltme yüzünden gelen noktaları silersen iyi olur.
Hocam neden böyle gözüküyor ben de. Alt alta nasıl getirebilirim?
Hocam buna bakabilir misiniz? Başka bir örnekle ilgili slider yaptım fakat ekranın sağ tarafında taşmalar oldu ve alt tarafta da bir scroll açıldı. Bir de sliderlar arası geçiş yapamıyorum. Yardımcı olursanız sevinirim.O dediğim H1'in sonundaki noktalarıı silin.
Bakıyım hocam bir saniye.O dediğim H1'in sonundaki noktalarıı silin.
Oldu mu?
Hocam buna bakabilir misiniz? Başka bir örnekle ilgili slider yaptım fakat ekranın sağ tarafında taşmalar oldu ve alt tarafta da bir scroll açıldı. Bir de sliderlar arası geçiş yapamıyorum. Yardımcı olursanız sevinirim.
Bakayım hocam bir saniye.