Rakkoc.Com Recep Akkoç / Rakkocun Yazıtları

20Ara/150

Bootstrap Nedir, Ne iş yapar, Neden kullanılır

Sevgili Blogum, okurlarım, google bot Bootstrapresponsive ve mobile-first projeler geliştirebileceğimiz en popüler framework'lerden biridir. Kendileri twiter tarafından responsivite amaçlı geliştirilmiştir. Özellikle Google'ın 21 nisan güncellemesi ile arama algoritmasında değişikliğe gidip, mobil arayüzü desteği olmayan siteleri 2. plana atacağını söylemesiyle birlikte her zamankinden daha fazla ihtiyaç duyuldu.

Responsive, duyarlı / uyumlu web tasarım, yani mobil cihazlarda iyi bir deneyim sunan web siteleridir.
Mobile-first, Web teknolojilerinde önceliği cep telefonuna ver, pc tarafını ondan sonra planla demektir.

Bootstrap ve buna benzer tüm plugin veya framework'leri belgemize dahil etmenin 2 yolu vardır. İlki CDN kullanmak, ikincisi de kütüphane dosyalarını kendi sunucumuzda host etmek. Benim kişisel önerim tüm plugin veya framework'leri kendi sunucunuza çekmeniz şeklindedir. Nedeni ise geliştirme süreçinde internet bağımlılığından kurtulma; kullanılan versionun desteğinin kalkması gibi durumlardan etkilen meme ve gerektiğinde uygulamaların yanlız intranet (iç network) üzerinden erişimi. en son aklıma gelen de https bağlantılarında cdn'in eklentısını kontrol etme gereksiniminden kurtulma (bu sonuncusu tembellikten başka bir şey değil)

Peki bu işler nasıl yapılır; GetBootStrap sayfasındaki Download bölümüne girip Download Bootstrap dersın ve gelir. güncel versionda 'bootstrap-3.3.6-dist' dosyası gelmekte.

CSS\bootstrap.css
CSS\bootstrap-theme.css
JS\bootstrap.min.js

bu dosyalari sayfaniza dahil ettikten sonra Jquery'yi de dahil etmeniz gerekmektedir. visual studio da bir MVC projesi açtığımızda nasıl gözüküyor neler çekiyor bir bakalım:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="#" id="registerLink"><span class="glyphicon glyphicon-user"></span> Register</a></li>
        
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        


<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>

        <hr />
        <footer>
            <p>© 2015 - My ASP.NET Application</p>
        </footer>
    <script src="/Scripts/jquery-1.11.3.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
</body>
</html>

7. ve 8. satırlarda

<link href="/Content/bootstrap.css" rel="stylesheet" />

<link href="/Content/bootstrap-theme.css" rel="stylesheet" />

72 ve 73 de

<script src="/Scripts/jquery-1.11.3.js"></script>

<script src="/Scripts/bootstrap.js"></script>

Content demesenin sebebi mvc projesinde cssleri default projede orada toplamışlar. Sayfayı bir gözden geçircek olursak ana tablo altında bir grid yapısı vs mevcut. bunları da anlatacağım ama hızlı olarak tab anlamarını söyliyim ve bu günlük bitiriyim.

.col-xs-*(extra small) - ekstra küçük cihazlar(telefonlar)
.col-sm-*(small) - küçük cihazlar(tabletler)
.col-md-*(medium) - orta boylu cihazlar(netbook'lar)
.col-lg-*(large) - geniş cihazlar(masaüstüler)

test ve görsel : http://www.bootply.com/xOLRwoOKFx