Bootstrap'te Ekran Genişliğine Göre Nasıl Kod Yazarım?

Bootstrap da ortadaki panel kısmı ve sağdaki carousel kısmı sayfa küçülünce veya büyüyünce kayıyor

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="btstrap._default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Web Site</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
    
    <style>
        
        a:focus, a:hover {
            color: #337ab7;
            text-decoration: none;
        }

        .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
            z-index: 2;
            color: antiquewhite;
            background-color: maroon;
            border-color: maroon;
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
            background-color: maroon;
            border: 0px solid #ddd;
            color: #9d9d9d;
        }

        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 70%;
            margin: auto;
        }
    </style>

</head>
<body>
    <nav class="navbar navbar-inverse" style="background-color: maroon; border-color: maroon; font-family: 'Comic Sans MS'; font-size: large;">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="color: yellow;">Furkan SARMUSAK</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>Anasayfa</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>Hakkımda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-tasks"></span>Projeler</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" style="width: 300px;" class="form-control" placeholder="Ara">
                </div>
                <button type="submit" class="btn btn-default">Ara</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span>Dersler<span class="caret"></span></a>
                    <ul class="dropdown-menu" style="background-color: maroon; width: 250px;">
                        <li><a href="#" style="font-size: large; color: #9d9d9d; text-decoration: none;"><span class="glyphicon glyphicon-hand-right"></span>HTML</a></li>
                        <li><a href="#" style="font-size: large; color: #9d9d9d; text-decoration: none;"><span class="glyphicon glyphicon-hand-right"></span>CSS</a></li>
                        <li><a href="#" style="font-size: large; color: #9d9d9d; text-decoration: none;"><span class="glyphicon glyphicon-hand-right"></span>JavaScript</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span>Sorular</a></li>

            </ul>
        </div>
    </nav>  

   
    <div class="col-md-4">
        <img src="resim/DSC_3467.JPG" class="img-thumbnail" alt="Cinque Terre" width="304" height="236" style="margin-left: -10px; display: inline-block; width: 348px; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px;" />

        <ul class="list-group" style="margin-left: -10px; width: 350px; font-family: 'Comic Sans MS'; font-size: large;">

            <li class="list-group-item "><a data-toggle="pill" href="#home" style="color: #9d9d9d;">Home</a></li>
            <li class="list-group-item "><a data-toggle="pill" href="#menu1" style="color: #9d9d9d;">Menu 1</a></li>
            <li class="list-group-item "><a data-toggle="pill" href="#menu2" style="color: #9d9d9d;">Menu 2</a></li>
            <li class="list-group-item"><a data-toggle="pill" href="#menu3" style="color: #9d9d9d;">Menu 3</a></li>
        </ul>
        <div class="nav nav-pills nav-stacked" style="margin-left: -10px; margin-top: -10px; width: 350px; font-family: 'Comic Sans MS'; font-size: large;">
            <li class="active"><a href="#">
                <h4>Sosyal Medya</h4>
            </a></li>
            <li><a href="https://www.facebook.com/furkansarmusak" target="_blank">
                <img src="resim/face.png" />Facebok</a> </li>
            <li><a href="https://twitter.com/FurkanSarmusak" target="_blank">
                <img src="resim/twit.png" />Twitter</a> </li>
            <li><a href="https://www.instagram.com/furkansarmusak/" target="_blank">
                <img src="resim/ins.png" />Instagram</a> </li>
            <li><a href="https://github.com/furkansarmusak" target="_blank">
                <img src="resim/githbu.png" />Github</a> </li>
        </div>
    </div>

    <div class="col-md-9" style="margin-left: -200px;">

        <div class="col-md-6" style="width: 600px;">
            <div class="panel panel-success" style="height: 600px;">
                <div class="panel-heading" style="background-color: maroon; color: #9d9d9d; font-family: 'Comic Sans MS'; font-size: larger;">
                    Blogum.blog
                </div>
                <div class="panel panel-body">
                    <div class="tab-content">
                        <div id="home" class="tab-pane fade in active">
                            <h3>HOME</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div id="menu1" class="tab-pane fade">
                            <h3>Menu 1</h3>
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                        <div id="menu2" class="tab-pane fade">
                            <h3>Menu 2</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                        </div>
                        <div id="menu3" class="tab-pane fade">
                            <h3>Menu 3</h3>
                           
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-md-6">
            <div class="well" style="background-color: maroon; font-size: medium; color: #9d9d9d; font-family: 'Comic Sans MS';">Hep Birlikte Birşeyler Öğrenmeye Ne Dersin ? Bence Güzel Olur </div>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
               

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">

                    <div class="item active">
                        <img src="resim/asp.png" alt="Chania" width="460" height="345">
                        <div class="breadcrumb">
                            <h3>Chania</h3>
                            <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="resim/php_1.png" alt="Chania" width="460" height="345">
                        <div class="breadcrumb">
                            <h3>Chania</h3>
                            <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="resim/html.png" alt="Flower" width="460" height="345">
                        <div class="breadcrumb">
                            <h3>Flowers</h3>
                            <p>Beatiful flowers in Kolymbari, Crete.</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="resim/sql.png" alt="Flower" width="460" height="345">
                        <div class="breadcrumb">
                            <h3>Flowers</h3>
                            <p>Beatiful flowers in Kolymbari, Crete.</p>
                        </div>
                    </div>

                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

        </div>

    </div>





</body>
</html>

 

Bir web sayfasının her cihaza uyumlu olması için mobil, tablet gibi cihazlara özel bir takım kod yazmak gerekiyor. Bootstrap kullanıyorsan bu cihazlara özel 4 tane sınıf var. Bu sınıflar; xssmmdlg olmak üzere dört tanedir. Bunları kullanırsan sorunun çözülecektir. 

Örneğin aşağıdaki kod masaüstü versiyonda 4 gridlik alan kaplayacaktır.

<div class="col-md-4">Burası masaüstü bilgisayarda 4 grid yer kaplayacak.</div>

Yeni sınıflar eklediğimiz aşağıdaki kod ise masaüstünde 4, tablette 6, mobilde ise 12 gridlik yer kaplayacaktır. Yani masaüstünde genişliğin 3'te 1'ini, tabletde yarısını, mobilde ise sayfanın tamamını kullanacaktır.

<div class="col-md-4 col-sm-6 col-xs-12">Burası masaüstü bilgisayarda 4 grid yer kaplayacak.</div>

Daha fazla örnek için aşağıdaki linke tıklayabilirsin.

Bootstrap Grid Ayarları

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git