مشکل نمایش ندادن کدهای Bootstrap
سلام ، امن از فایل های bootstrap استفاده کردم داخله صفحه ام اما هر کدی رو که مینویسم هیچ چیزی رو نشون نمیده داخل browser میشه راهنماییم کنیدbootstrap
#html5 #css #bootstrap6 پاسخ
سلام ممنون از توضیحتون
من نمیخوام از slideshow خود bootstrap استفاده کنم
میخواستم بدونم ترکیبی از java و bootstrap بخوام کار کنم باید چیکار کنم
slider رو با java میخوام بنویسم
اینکارو میکنم و تا اینکه link مربوط bootstrap رو مینویسم هیچ چیز دیگه نشون نمیده
من از سایت خود bootstrap استفاده کردم
ببینید منظور منو درست متوجه نشدید
من slider رو codeش رو نوشتم
ولی رمانی که لینک میدم برای استفاده از
bootstrap
دیگه بقیه codes نشون داده نمیشه
میدونم اینارو برای slider کامل دستورشو ننوشتم چون هیچ چیز نشون داده نمیشه وقتی که bootstrap لینک میدم
سلام و درود
اول از هر مطلبی برای اینکه میخواهید از 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>
من میخوام از navbar که برای bootstrap هست استفاده کنم
ولی برای slider از java استفاده کنم
که هردوتا کنار هم نمیشه
دلیلش رو میدونید؟
اگر قصد استفاده از 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>