تا %60 تخفیف خرید برای 4 نفر با صدور مدرک فقط تا
00 00 00
Gelareh Soluki

مشکل نمایش ندادن کدهای Bootstrap

سلام ، امن از فایل های bootstrap استفاده کردم داخله صفحه ام اما هر کدی رو که مینویسم هیچ چیزی رو نشون نمیده داخل browser میشه راهنماییم کنیدbootstrap

#html5 #css #bootstrap
این سوال 1 پاسخ دارد.
لذت یادگیری با توسینسو
به عنوان شخصی که مدت هاست از سایت توسینسو استفاده می کنم باید بگم که واقعاً یکی از بهترین مرجع ها برای ارتقاء دانش شخصی هست. دوره های سایت، راهکارها و مطالب، همگی عالی هستند.

سلام و درود

اول از هر مطلبی برای اینکه میخواهید از Bootstrap v4.1.3 استفاده بهترین منبع خود سایت Bootstrap هست

فایل های شما را بررسی کردم

1- چون میخواهید از Bootstrap استفاده کنید بایستی حتما تگ container و بعد تگ row و سپس تگ های col-sm-x داشته باشد (منظور از x یک عدد حداقل 1 و حداکثر 12) لینک قالب بوت استرپ

2- برای بخش اسلایدر هم در فایل های css ای که خودتون نوشته اید با دقت از position:absolute و position:relative استفاده کنید و پیشنهاد بهتر استفاده از Carousel خود بوت استرپ در بخش کامپوننت های سایت است . لینک

3- در بخش مربوط به slideshow-container هم کلاس fade را بردارید تصاویر نمایش داده می شود

این هم فایل bootstrap.html اصلاح شده شما

<!DOCTYPE html>
<html>
<head>
    <title>Gelareh</title>
    <meta charset="utf-8" />
    <link href="bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/StyleSheet.css" />
    <link href="css/all.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <nav class="navbar navbar-light bg-dark navbar-expand-sm fixed-top">
                    <a id="epos" class="navbar-brand" href="#">ePOS</a>
                    <button id="bordericon" type="button" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Customer</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Clients</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">ePos-System</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">More</a>
                                <div class="dropdown-menu">
                                    <a href="#" class="dropdown-item">Help</a>
                                    <a href="#" class="dropdown-item">Post-code</a>
                                    <a href="#" class="dropdown-item">Number</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="slideshow-container">
                    <div class="myslide">
                        <img src="img/beef-and-olive-spaghetti-bolognese-109377-1.jpeg" />
                    </div>
                    <div class="myslide">
                        <img src="img/Chicago-Hot-Dog_Traeger-Wood-Fired-Grills_RE_HE_M.jpg" />
                    </div>
                    <div class="myslide">
                        <img src="img/Healthy_HotDogs_07_18.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
مجید محمدی سامانی
Gelareh Soluki

سلام ممنون از توضیحتون

من نمیخوام از slideshow خود bootstrap استفاده کنم

میخواستم بدونم ترکیبی از java و bootstrap بخوام کار کنم باید چیکار کنم

slider رو با java میخوام بنویسم

اینکارو میکنم و تا اینکه link مربوط bootstrap رو مینویسم هیچ چیز دیگه نشون نمیده

من از سایت خود bootstrap استفاده کردم

A.A
Gelareh Soluki

میدونم اینارو برای slider کامل دستورشو ننوشتم چون هیچ چیز نشون داده نمیشه وقتی که bootstrap لینک میدم

A.A

اگر قصد استفاده از slideshow بوت استرپ را ندارید باید خودتون با استفاده از javaScript یا JQuery یک اسلایدشو بنویسید نمونه های زیادی در اینترنت (مثل همین سایت) وجود داره

به عنوان هدیه و دادن ایده به شما کدی از یک نمونه ساده که با استفاده از جاوا اسکریپت نوشتم را قرار می دهم (فقط کافیه چند تا عکس درون فولدر Images قرار بدهی)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='fa' xml:lang='fa' xmlns='http://www.w3.org/1999/xhtml'>
<head>


    <title>Simple Image Slider</title>

    <style>
        body {
            background-color: #ddd;
            color: #000;
        }

        #divImages img {
            cursor: pointer;
            border: 3px solid #fff;
            border-radius: 10px;
        }

        #divMain img {
            border: 3px solid #fff;
            border-radius: 10px;
        }

        #divMain {
            margin: 0px auto;
            text-align: center;
            width: 510px;
            height: 410px;
            border: 3px solid #000;
            border-radius: 10px;
        }
    </style>

    <script type='text/javascript'>

        function ShowPicture(imageName) {

            imgMain.src = "Images/" + imageName + ".jpg";
            imgMain.width = 500;
            imgMain.height = 400;
        }

    </script>
</head>
<body>
    <h1>
        Simple Image Slider
    </h1>
    <div id="divImages" style="text-align: center;">
        <img id="img1" width="64" height="64" border="1" src="Images/pic0001_small.jpg" onclick="ShowPicture('pic0001');" />
        <img id="img2" width="64" height="64" border="1" src="Images/pic0002_small.jpg" onclick="ShowPicture('pic0002');" />
        <img id="img3" width="64" height="64" border="1" src="Images/pic0003_small.jpg" onclick="ShowPicture('pic0003');" />
        <img id="img4" width="64" height="64" border="1" src="Images/pic0004_small.jpg" onclick="ShowPicture('pic0004');" />
    </div>
    <div id="divMain">
        <img id="imgMain" width="0" height="0" src="" />
    </div>
</body>
</html>
مجید محمدی سامانی
  • انتخاب شده به عنوان جواب توسط 1 نفر
Gelareh Soluki

ببینید منظور منو درست متوجه نشدید

من slider رو codeش رو نوشتم

ولی رمانی که لینک میدم برای استفاده از

bootstrap

دیگه بقیه codes نشون داده نمیشه

A.A
Gelareh Soluki

من میخوام از navbar که برای bootstrap هست استفاده کنم

ولی برای slider از java استفاده کنم

که هردوتا کنار هم نمیشه

دلیلش رو میدونید؟

A.A
پاسخ شما
برای ارسال پاسخ خود وارد شوید.