У меня проблемы с этим сайтом. Это учебный сайт для меня и, надеюсь, станет сайтом для моего хобби, но сейчас он в грубом виде. Я использую Bootstrap для отзывчивости и у меня есть немного JQuery для аккордеона в середине для своего рода журнала. Я использую JQuery, чтобы сделать подсветку текста при наведении и, возможно, некоторые другие вещи, которые появляются.
Моя проблема в том, что что-то в JQueryUI, кажется, нарушает мой красивый стиль, который у меня был, где у меня были заголовки в области аккордеона с красивым темно-серым фоном, который вы можете увидеть на странице загрузки для разделения второй, пока не загрузится jqueryUI, который затем изменит мой стиль на белый фоновый заголовок.
Проверьте http://joshsbees-com.stackstaging.com, и вы поймете, что я имею в виду.
Как мне использовать bootstrap с JQueryUI и моим собственным CSS? Я уверен, что у меня здесь слишком много сценариев и кое-что пересечено.
Вот код на моей странице указателя:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Josh's Bees</title>
</head>
<body>
<div class="conainer">
<div class="row">
<header class="col">
<h1>Welcome to Josh's Bees</h1>
<h3>Bee farm in southern Jones County Georgia</h3>
</header>
</div>
<div class="row">
<div class="col">
<img src="/images/me.JPG" align="left"/>
<p>I got interested in beekeeping in 2018 when helping my dad. He got 2 hives and I helped him occasionally
by holding tools, smoking them, lifting boxes, and such. I just could not get enough of watching God's
miraculous work at hand in those little creatures. Everything from watching them build comb to laying
eggs and storing nectar which they then turned into honey. I was hooked and still they never cease to
amaze me.
</p>
</div>
</div>
<div class
"clear">
</div>
<div class="row">
<!--Left Column-->
<div class="col-md-4">
<p>I set up the hive and bought a nuc in mid May 2019. I spent the summer learning a lot and watching my
bees.</p>
<img src="/images/drawncomb1.jpg" width="250px"/>
<img src="/images/drawncomb2.jpg" width="250px"/>
</div>
<!--Center Column-->
<div class="col-md-4">
<div id="logtitle">
<h3>2020 Inspection Report</h3>
</div>
<div id="accordion">
<h3 class="log">Feb 9 2020</h3>
<div>
<p>First quick inspection of this year. I wanted to get in and see how they were doing over the winder.
Last check was early December 2019 and there was not much brood capped. This time, however, since
the days are getting longer, the queen has several frames in the middle of the top box with fully
capped brood. There is a healthy amount of bees in the hive as well. Today was a sunny day, light
wind and mild temperatures. The bees were calm, but with healthy activity and still good on honey
stores. Dry sugar on top has not been eaten at all.</p>
<br/>
</div>
<h3 class="log">March 1 2020</h3>
<div>
<p>Today was mostly cloudy and cool. High in the low 60's, so I knew the girls would be cranky and I
suited up for the occasion, gloves and all. Objective for today was to swap brood chambers, check
food stores, and add beetle barns to each layer: bottom board, top of bottom box, and top of top
box. I did a quick frame inspection of the top box. Saw good capped brood pattern on several frames.
Hive had healthy supply of bees which stands to reason after the amount of capped brood I saw in
February. I did not see any swarm cells, but I only did a quick glance over as I was swapping boxes.
They were getting angry and were all up in my face. If I had not had on gloves and full suit, I
would definitely have gotten popped multiple times. They were also eating the dry sugar pretty good,
but still have a little capped honey in the hive.</p>
<br/>
</div>
<h3 class="log">March 2 2020</h3>
<div>
<p>I added a Boardman entrance feeder today with some 1:1 syrup to begin feeding. Plan to add honey
super end of March.</p>
<br/>
</div>
</div>
</div>
<!--Right Column-->
<div class="col-md-4">
<h3>Links of my Favorite Sites</h3>
<ul>
<li><a href="http://www.barnyardbees.com">Barnyard Bees</a></li>
<li><a href="http://www.dadant.com">Dadant</a></li>
<li><a href="http://www.fatbeeman.com">Dixie Bee Supply</a></li>
</ul>
</div>
</div>
</div>
<footer id="footer" class="footer mt-auto py-3">
<div class="container">
<span class="text">Design by Josh Scoville, January 2020</span>
</div>
</footer>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!--end of bootstrap scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$("#accordion").accordion({
collapsible: true,
heightStyle: 'panel'
});
$(".log").hover(function(){
$(this).css("color","orange");
}, function(){
$(this).css("color","white");
});
</script>
</body>
</html>