bootstrap
a
Kadir KILIÇ
9 ay önce 0 Yorum

Bootstrap Kullanımı

Bootstrap en çok kullanılan css ve javascript frameworktür bunun sebebi ise gelişmiş grid sistemi, birçok bileşen ve kullanımı kolay olması gibi özelliklerdir.

1- Css ve Javascript Dosyaları

Bu kodları html dosyanızın <head> etiketleri arasına eklemelisiniz, ancak biz bunu önermiyoruz bunun yerine css ve javascript dosyalarınızı (bkz: #1) burdan indirip kendi projenizin içine ekleyip dosyaları projenizin içinden çekiniz.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

npm için ise

$ npm install bootstrap@3

2- Bootstrap’ın Yapısı
Bootstrap’ın dosya yapısı bu şekildedir;

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

3- Basit Bir Örnek

<!DOCTYPE HTML>
<html>
<head>
 <title>Kodist</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <!-- Optional theme -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
 <h1>Kodist</h1>
</body>
</html>

bootstrap

Yazıda Geçen Linkler
1- Bootstrap İndirme Linki
2- Bootstrap Css
3- Bootstrap Javascript
4- Bootstrap Bileşenler

Bootstrap Kullanımı için Yorumlar