Bootstrap nədir? Necə istifadə edilir?

    By
    BizPlus
    -
    0
    832

    Bootstrap nədir? Necə istifadə edilir?

    Created On
    byBizPlus
    Bootstrap Front-End Developerlər üçün hazırlanmış açıq mənbə və pulsuz CSS kitabxanasıdır. Bootstrap ilə masa üstü, tablet, mobil və bütün brauzerlər ilə uyğun veb saytlar hazırlaya bilərik. Həmçinin bir veb saytı üçün lazım olan bütün komponentləri ehtiva edir. (Forma elementləri, masalar, düymələr, xəbərdarlıqlar, naviqasiya çubuğu, pagination, teqlər, açılan menyular və s. kimi dizayn elementləri) Bu hazır komponentləri istifadə edərək, hər bir cihaza uyğun bir dizaynı həyata keçirmiş oluruq.Bütün bunların yanında Bootstrap’ı digər framework və kod kitabxanalarından fərqləndirən xüsusiyyət, grid sistemidir. Bootstrap’ın grid sistemi sayəsində, responsive veb səhifəni yaratmaq asan olur.Bootstrap veb səhifənizi bərabər hissələrə bölür və sizə bərabər şəkildə ayrılmış bu hissələrə istədiyimiz kimi müdaxilə etmək imkanı verir.

    Bootstrap necə istifadə olunur?
    Bootstrap’dan istifadə etmək üçün Bootstrap-ın saytına daxil olur və şəkildə göstərilən Download düyməsini basın.

    Bootstrap’ın öz saytına daxil olmaq üçün klikləyin.

    Açılan səhifədə şəkildə gösterilən Compiled CSS və JS başlığı altındakı Download düyməsinə klikləyirik.

    Yüklədiyimiz .rar faylının içindəki qovluğu işlədiyimiz qovluğa daxil edirik. Bunu etdikdən sonra son bir əməliyyat ediləcəkdir.

    Şəkildə göstərilən Get Started düyməsinə klikləyirik.

    Açılan səhifədə Starter template başlığı altındakı kodları kopyalayıp, öz işlədiyimiz mətn redaktoruna yapışdırırıq.

    Bootstrap Css’ni onlayn daxil etmək istəyirsinizsə:
    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>

    Jquery Script ve Bootstrap Javascript’lerin səhifəyə daxil edilmesi :

    < script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”>< /script >

    < script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js” >< /script >

    Əvvəcə burada qeyd etmək istədiyim önəmli bir şey var. Bootstrap’ın dizaynerlərinin də təklif etdiyi kimi script fayllarının səhifənin ən sonuna yəni </body> teqindən əvvəl istifadə edərək səhifənin daha sürətli işləməsini təmin edə bilərsiniz.

    Mobil cihaz və tabletlər üçün səhifəmizi uyğun etmək üçün:

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    Qeyd: (<head> … </ head> teqləri arasında daxil edilir.)
    Nümunə səhifə:
    <!DOCTYPE html>
    <html lang=”tr-TR”>
    <head>
    <meta charset=”UTF-8″>
    <title>Bootstrap Sample</title><meta name=”viewport” content=”width=device-width, initial-scale=1″>

    <!– Bootstrap Css begin –>
    <link rel=”stylesheet” href=”/bootstrap.min.css”>
    <!– Bootstrap Css end –>
    </head>
    <body>
    <!– JavaScript Files begin –>
    < script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js” >< /script >
    < script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js” >< /script >
    <!– JavaScript Files end –>
    </body>
    </html>