Kategori: Bootstrap

Bootstrap – Navigation & Dropdown

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Navigation Dropdown</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <!-- Bootstrap Js --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!-- Navigation --> <ul class="nav justify-content-center border-bottom"> <!-- justify-content ile sağa, sola, merkeze alabilir ya... Okumaya Devam et →

0

Bootstrap – Forms

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Forms</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="container"> <form style="width: 30rem;"> <h3>Bilgilerinizi Giriniz</h3> <hr /> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" id="name" class="form-control"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" id="email" class="form-control"> <!-- inputların altına... Okumaya Devam et →

0

Bootstrap – Tables

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Tables</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <!-- table class'ı --> <table class="table" style="width:30rem;"> <thead> <tr> <th>Id</th> <th>İsim</th> <th>Departman</th> <th>Adres</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mehmet</td> <td>Software</td> <td>Kadıköy/İSTANBUL</td> </tr> <tr> <td>2</td> <td>Burak</td> <td>Engineering</td> <td>Üsküdar/İSTANBUL</td> </tr> <tr> <td>3</td> <td>Ayşe</td>... Okumaya Devam et →

2

Bootstrap – Lists

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lists</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <!-- Container Boyunca --> <div class="container"> <ul class="list-group"> <li class="list-group-item">Python</li> <li class="list-group-item">Ruby</li> <li class="list-group-item">Java</li> </ul> </div> <br> <!-- Genişlik verelim --> <div class="container"> <ul class="list-group" style="width: 18rem;"> <li class="list-group-item">Python</li> <li class="list-group-item">Ruby</li> <li... Okumaya Devam et →

0

Bootsrap – Cards

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cards</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="card"> <div class="card-header">Card Header</div> <div class="card-body"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, hic?</p> </div> <div class="card-footer">Card Footer</div> </div> <!-- Container içerisinde Card --> <div class="container mt-3"> <!-- margintop:3... Okumaya Devam et →

0

Bootstrap – Background – Padding – Margin – Alerts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background - Padding - Margin - Alerts</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <!-- text colors - background colors --> <div class="bg-dark text-light">Content</div> <div class="bg-light text-dark">Content</div> <div class="bg-primary text-light">Content</div> <div class="bg-warning text-light">Content</div> <div class="bg-info text-light">Content</div> <div class="bg-danger text-light">Content</div> <div class="bg-secondary text-light">Content</div> <br/> <!--... Okumaya Devam et →

0

Bootstrap – Grid System – Contaniner – Responsive – Flexbox

Bootsrapteki container class'ımızla blok yapıları oluşturabiliriz. bg-color etikeri ile renk verebiliriz, Ayrıca bu contanier etiketimiz mobil uyumlu responsive yapıdadır. Continer <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Bootstrap CSS --> </head> <body> <!-- container class'ımızla blok yapıları oluşturabiliriz. bg-color etikeri ile renk verebiliriz --> <!-- ayrıca bu contanier etiketimiz mobil uyumlu responsive yapıdadır --> <div class="container... Okumaya Devam et →

0

Bootstrap – Incuding to Project

Bootstrap içerisinde hazır CSS ve Script kodları bulunduran ücretsiz açık kaynalı front end framework'tür. Bootstrap, web sayflarımızın tasarımlarını hızlı ve kolay bir şekilde gerçekleştirmemizi sağlar. Projeye dahil etme: bootstrap web adresine giderek, referans kodlarını html sayfamıza ekleyebiliriz. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Bootstrap CSS --> <link rel="stylesheet"... Okumaya Devam et →

0

WordPress.com'da bir web sitesi veya blog oluşturun

Yukarı ↑

WordPress.com ile böyle bir site tasarlayın
Başlayın