0
Kayıt Ol

Bostrap Css Yardım Lazım Reponsive ve birkaç sorun için.

2

●

230

  • 01-08-2018, 20:53:12
    #1
    bybb35
    bybb35
    Arkadaşlar html script yazıyorum kendim bilgimle ,ama tıkandım.Masaüstü tarayıcı olarak istediğim görüntüyü sağladım ancak mobilden bakınca sliderın sağındaki özelliklerin oldugu tablo en tepede çıkıyor.Mobil Sıralamada slider-tablo (Açılır dropdown tarzında)-Açıklama gelmesini istiyorum ama bi türlü yapalamdım.Yazdıgım scripti yüklüyorum direk localde açabilirsiniz html ile yazıldı.Birde slidera daha büyük veya küçük resim reflediğimde slider büyüyor veya küçülüyor bunu standart olarak sabitleyemiyormuyuz? Resime göre slider büyüme ve küçülme durumu olmasın istiyorum resim slidera göre boyutlansın.Daha sonra bunu php ye dökmeye çalışıcam ama ilk tasarımımı yapıyorum.Şimdiden yardımcı olan arkadaşlara teşekkürler.

    script :-
  • 01-08-2018, 21:33:22
    #2
    MuhammetDemirel
    MuhammetDemirel
    Temanızı inceledim. Öncelikle hocam hiçbir zaman br tagları kullanmayın, inline css yazmayın istisna durumlar hariç bootstrap 4 şuanda neredeyse css yazmadan yapıyı kurmanıza olanak sunuyor örneğin h4 de inline css yazıp margin left sıfırlamıssınız bunun yerine class atayarak yapabilirsiniz ml-0 diyerek margin left 0 vermiş olursunuz. Bootstrapın breadcrumb özelliği mevcut. temanızın düzenlenmiş halinin kodlarını aşağıda ekledim umarım istediğiniz şekildedir.



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta name="description" content="">    <meta name="author" content="">    <title>İzmiraraba.com İlanlar</title>    <!-- Bootstrap core CSS -->    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="css/shop-homepage.css" rel="stylesheet"></head><body>    <!-- Navigation -->    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">        <div class="container">            <a class="navbar-brand" href="#">İzmiraraba.com</a>            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">          <span class="navbar-toggler-icon"></span>        </button>            <div class="collapse navbar-collapse" id="navbarResponsive">                <ul class="navbar-nav ml-auto">                    <li class="nav-item">                        <a class="nav-link" href="#">İlanlar  </a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Hakkımızda</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Services</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Contact</a>                    </li>                </ul>            </div>        </div>    </nav>  <div class="container pt-3">    <h4 class="ml-0">Sahibinden Satılık Golf 1.4 TSİ</h4>    <hr>    <nav aria-label="breadcrumb">        <ol class="breadcrumb">            <li class="breadcrumb-item"><a href="#">Anasayfa</a></li>            <li class="breadcrumb-item"><a href="#">İlanlar</a></li>            <li class="breadcrumb-item active" aria-current="page">Sahibinden Satılık Golf 1.4 TSİ</li>        </ol>    </nav>    <div class="col-lg-9 float-left">    <div class="row">        <div id="carouselExampleIndicators" class="carousel slide mb-5" data-ride="carousel">            <ol class="carousel-indicators">                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>            </ol>            <div class="carousel-inner">                <div class="carousel-item active">                    <img class="d-block w-100" src="ilanresimleri/batuhanbaytal-golf/1.jpg" alt="First slide">                </div>                <div class="carousel-item">                    <img class="d-block w-100" src="ilanresimleri/batuhanbaytal-golf/3.jpg" alt="Second slide">                </div>            </div>            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">                <span class="carousel-control-prev-icon" aria-hidden="true"></span>                <span class="sr-only">Previous</span>            </a>            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">                <span class="carousel-control-next-icon" aria-hidden="true"></span>                <span class="sr-only">Next</span>            </a>        </div>        <div class="col-lg-12 float-left">            <div class="row">                <h5>Açıklama</h5>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci illum sequi nihil autem voluptas qui at sed nisi veritatis. Quibusdam atque, saepe id nobis sed voluptatum ipsum! Quaerat, molestiae, cum?<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut veniam possimus delectus reprehenderit voluptate iusto, rem tenetur eius accusantium, perspiciatis quia commodi nam sequi vero voluptatibus illum reiciendis! Quisquam consequuntur incidunt voluptatum molestiae reiciendis libero aliquid debitis recusandae facilis assumenda aliquam nam adipisci fugiat, provident quasi possimus suscipit hic officia in accusantium harum a. Consequatur tempora architecto aliquid officiis laborum, nulla illo impedit recusandae nemo eum adipisci magni sapiente maxime consectetur laboriosam quia possimus perspiciatis iure totam iusto pariatur et optio eos ratione. Quam dignissimos, minima temporibus excepturi? Dolore odit dolores repudiandae id modi rem laboriosam cupiditate laudantium, minima sapiente saepe eum nam aut, consectetur non. Laborum quasi quibusdam quidem in consequatur ut natus sit eaque incidunt, deleniti est cupiditate velit error neque. Eum numquam quibusdam deleniti eius cum officiis.</p>            </div>        </div>    </div>    </div>    <div class="col-lg-3 float-right">        <ul class="list-group list-group-flush">            <li class="list-group-item"><b>Motor Gücü:</b> 122 HP</li>            <li class="list-group-item"><b>Marka:</b> Volkswagen</li>            <li class="list-group-item"><b>Seri:</b> Golf</li>            <li class="list-group-item"><b>Model:</b> 1.4 TSİ Confortline</li>        </ul>    </div></div>    <!-- Footer -->    <div class="col-lg-12 bg-dark float-left mt-5 p-5">        <div class="container">            <p class="m-0 text-center text-white">Copyright &copy; Your Website 2017</p>        </div>    </div>    <!-- Bootstrap core JavaScript -->    <script src="vendor/jquery/jquery.min.js"></script>    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script></body></html>
  • 01-08-2018, 21:53:08
    #3
    bybb35
    bybb35
    MuhammetDemirel adlı üyeden alıntı: mesajı görüntüle
    Temanızı inceledim. Öncelikle hocam hiçbir zaman br tagları kullanmayın, inline css yazmayın istisna durumlar hariç bootstrap 4 şuanda neredeyse css yazmadan yapıyı kurmanıza olanak sunuyor örneğin h4 de inline css yazıp margin left sıfırlamıssınız bunun yerine class atayarak yapabilirsiniz ml-0 diyerek margin left 0 vermiş olursunuz. Bootstrapın breadcrumb özelliği mevcut. temanızın düzenlenmiş halinin kodlarını aşağıda ekledim umarım istediğiniz şekildedir.



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta name="description" content="">    <meta name="author" content="">    <title>İzmiraraba.com İlanlar</title>    <!-- Bootstrap core CSS -->    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="css/shop-homepage.css" rel="stylesheet"></head><body>    <!-- Navigation -->    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">        <div class="container">            <a class="navbar-brand" href="#">İzmiraraba.com</a>            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">          <span class="navbar-toggler-icon"></span>        </button>            <div class="collapse navbar-collapse" id="navbarResponsive">                <ul class="navbar-nav ml-auto">                    <li class="nav-item">                        <a class="nav-link" href="#">İlanlar  </a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Hakkımızda</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Services</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Contact</a>                    </li>                </ul>            </div>        </div>    </nav>  <div class="container pt-3">    <h4 class="ml-0">Sahibinden Satılık Golf 1.4 TSİ</h4>    <hr>    <nav aria-label="breadcrumb">        <ol class="breadcrumb">            <li class="breadcrumb-item"><a href="#">Anasayfa</a></li>            <li class="breadcrumb-item"><a href="#">İlanlar</a></li>            <li class="breadcrumb-item active" aria-current="page">Sahibinden Satılık Golf 1.4 TSİ</li>        </ol>    </nav>    <div class="col-lg-9 float-left">    <div class="row">        <div id="carouselExampleIndicators" class="carousel slide mb-5" data-ride="carousel">            <ol class="carousel-indicators">                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>            </ol>            <div class="carousel-inner">                <div class="carousel-item active">                    <img class="d-block w-100" src="ilanresimleri/batuhanbaytal-golf/1.jpg" alt="First slide">                </div>                <div class="carousel-item">                    <img class="d-block w-100" src="ilanresimleri/batuhanbaytal-golf/3.jpg" alt="Second slide">                </div>            </div>            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">                <span class="carousel-control-prev-icon" aria-hidden="true"></span>                <span class="sr-only">Previous</span>            </a>            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">                <span class="carousel-control-next-icon" aria-hidden="true"></span>                <span class="sr-only">Next</span>            </a>        </div>        <div class="col-lg-12 float-left">            <div class="row">                <h5>Açıklama</h5>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci illum sequi nihil autem voluptas qui at sed nisi veritatis. Quibusdam atque, saepe id nobis sed voluptatum ipsum! Quaerat, molestiae, cum?<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut veniam possimus delectus reprehenderit voluptate iusto, rem tenetur eius accusantium, perspiciatis quia commodi nam sequi vero voluptatibus illum reiciendis! Quisquam consequuntur incidunt voluptatum molestiae reiciendis libero aliquid debitis recusandae facilis assumenda aliquam nam adipisci fugiat, provident quasi possimus suscipit hic officia in accusantium harum a. Consequatur tempora architecto aliquid officiis laborum, nulla illo impedit recusandae nemo eum adipisci magni sapiente maxime consectetur laboriosam quia possimus perspiciatis iure totam iusto pariatur et optio eos ratione. Quam dignissimos, minima temporibus excepturi? Dolore odit dolores repudiandae id modi rem laboriosam cupiditate laudantium, minima sapiente saepe eum nam aut, consectetur non. Laborum quasi quibusdam quidem in consequatur ut natus sit eaque incidunt, deleniti est cupiditate velit error neque. Eum numquam quibusdam deleniti eius cum officiis.</p>            </div>        </div>    </div>    </div>    <div class="col-lg-3 float-right">        <ul class="list-group list-group-flush">            <li class="list-group-item"><b>Motor Gücü:</b> 122 HP</li>            <li class="list-group-item"><b>Marka:</b> Volkswagen</li>            <li class="list-group-item"><b>Seri:</b> Golf</li>            <li class="list-group-item"><b>Model:</b> 1.4 TSİ Confortline</li>        </ul>    </div></div>    <!-- Footer -->    <div class="col-lg-12 bg-dark float-left mt-5 p-5">        <div class="container">            <p class="m-0 text-center text-white">Copyright &copy; Your Website 2017</p>        </div>    </div>    <!-- Bootstrap core JavaScript -->    <script src="vendor/jquery/jquery.min.js"></script>    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script></body></html>

    evet hocam daha iyi görünüyor yanlız header biraz kalın onu ben düzenlerim herhalde nedense yapısı bozulmuş onun haricinde mobil test ettim istediğim gibi çok teşekkür ederim uyarılarınızı dikkate alıcam.Bostrap konusunda yeniyim standart css bilgim vardı bostrap çözmeye çalışıyorum
    MuhammetDemirel adlı üyeden alıntı: mesajı görüntüle
    Temanızı inceledim. Öncelikle hocam hiçbir zaman br tagları kullanmayın, inline css yazmayın istisna durumlar hariç bootstrap 4 şuanda neredeyse css yazmadan yapıyı kurmanıza olanak sunuyor örneğin h4 de inline css yazıp margin left sıfırlamıssınız bunun yerine class atayarak yapabilirsiniz ml-0 diyerek margin left 0 vermiş olursunuz. Bootstrapın breadcrumb özelliği mevcut. temanızın düzenlenmiş halinin kodlarını aşağıda ekledim umarım istediğiniz şekildedir.



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta name="description" content="">    <meta name="author" content="">    <title>İzmiraraba.com İlanlar</title>    <!-- Bootstrap core CSS -->    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="css/shop-homepage.css" rel="stylesheet"></head><body>    <!-- Navigation -->    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">        <div class="container">            <a class="navbar-brand" href="#">İzmiraraba.com</a>            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">          <span class="navbar-toggler-icon"></span>        </button>            <div class="collapse navbar-collapse" id="navbarResponsive">                <ul class="navbar-nav ml-auto">                    <li class="nav-item">                        <a class="nav-link" href="#">İlanlar  </a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Hakkımızda</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Services</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">Contact</a>                    </li>                </ul>            </div>        </div>    </nav>  <div class="container pt-3">    <h4 class="ml-0">Sahibinden Satılık Golf 1.4 TSİ</h4>    <hr>    <nav aria-label="breadcrumb">        <ol class="breadcrumb">            <li class="breadcrumb-item"><a href="#">Anasayfa</a></li>            <li class="breadcrumb-item"><a href="#">İlanlar</a></li>            <li class="breadcrumb-item active" aria-current="page">Sahibinden Satılık Golf 1.4 TSİ</li>        </ol>    </nav>    <div class="col-lg-9 float-left">    <div class="row">        <div id="carouselExampleIndicators" class="carousel slide mb-5" data-ride="carousel">            <ol class="carousel-indicators">                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>            </ol>            <div class="carousel-inner">                <div class="carousel-item active">                    <img class="d-block w-100" src="ilanresimleri/batuhanbaytal-golf/1.jpg" alt="First slide">                </div>                <div class="carousel-item">                    <img class="d-block w-100" src="ilanresimleri/batuhanbaytal-golf/3.jpg" alt="Second slide">                </div>            </div>            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">                <span class="carousel-control-prev-icon" aria-hidden="true"></span>                <span class="sr-only">Previous</span>            </a>            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">                <span class="carousel-control-next-icon" aria-hidden="true"></span>                <span class="sr-only">Next</span>            </a>        </div>        <div class="col-lg-12 float-left">            <div class="row">                <h5>Açıklama</h5>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci illum sequi nihil autem voluptas qui at sed nisi veritatis. Quibusdam atque, saepe id nobis sed voluptatum ipsum! Quaerat, molestiae, cum?<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut veniam possimus delectus reprehenderit voluptate iusto, rem tenetur eius accusantium, perspiciatis quia commodi nam sequi vero voluptatibus illum reiciendis! Quisquam consequuntur incidunt voluptatum molestiae reiciendis libero aliquid debitis recusandae facilis assumenda aliquam nam adipisci fugiat, provident quasi possimus suscipit hic officia in accusantium harum a. Consequatur tempora architecto aliquid officiis laborum, nulla illo impedit recusandae nemo eum adipisci magni sapiente maxime consectetur laboriosam quia possimus perspiciatis iure totam iusto pariatur et optio eos ratione. Quam dignissimos, minima temporibus excepturi? Dolore odit dolores repudiandae id modi rem laboriosam cupiditate laudantium, minima sapiente saepe eum nam aut, consectetur non. Laborum quasi quibusdam quidem in consequatur ut natus sit eaque incidunt, deleniti est cupiditate velit error neque. Eum numquam quibusdam deleniti eius cum officiis.</p>            </div>        </div>    </div>    </div>    <div class="col-lg-3 float-right">        <ul class="list-group list-group-flush">            <li class="list-group-item"><b>Motor Gücü:</b> 122 HP</li>            <li class="list-group-item"><b>Marka:</b> Volkswagen</li>            <li class="list-group-item"><b>Seri:</b> Golf</li>            <li class="list-group-item"><b>Model:</b> 1.4 TSİ Confortline</li>        </ul>    </div></div>    <!-- Footer -->    <div class="col-lg-12 bg-dark float-left mt-5 p-5">        <div class="container">            <p class="m-0 text-center text-white">Copyright &copy; Your Website 2017</p>        </div>    </div>    <!-- Bootstrap core JavaScript -->    <script src="vendor/jquery/jquery.min.js"></script>    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script></body></html>
    ek olarak yazamamşım çok teşekkürler emeğinize sağlık hocam.