[Boostrap] Why doesn't it work? jQuery-chan? ~ Fighting long and long errors ~

I've been worried for these three days

I read some posts from seniors who created a portfolio and started working in the engineering industry and some git source code, and I learned that using a framework is faster to implement. I wanted to make my application responsive, and I gave up on my specifications that I had no design sense, and decided to use Bootstrap as soon as possible.

The backend implementation is almost done the other day, so I thought I'd play with Bootstrap and decided to see if I could display something that caught my eye officially.

e7edb6a9d019b4695f901555aefe8930.png

It's a nice design! To display this ... Should I just paste it? let's try it.





33a8a372e4c6cac734cdcaadc337aa54.png

Why is this happening? ??

I just fetched the sample source code from the official and pasted it, but it is not displayed as it is. Isn't it a sample? ?? ?? Is it strange? ?? ?? With that in mind, I noticed that the HTML was displayed firmly, and it turned out that the strange thing was CSS. If you look closely, there is something strange in the source code.


<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Carousel Template · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/carousel/">

    <!-- Bootstrap core CSS -->⬅️ ① Commented out here and
<link href="../assets/dist/css/bootstrap.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->⬅️② This part of the comment out
    <link href="carousel.css" rel="stylesheet">

~ The following is omitted ~

The description of reading the css file is strange.


<link href="../assets/dist/css/bootstrap.css" rel="stylesheet">

There is no such file in the application as assets/dist/css/bootstrap.css. If you take a look at the sample source code file downloaded separately,

bootstrap-4.5.0-dist ├CSS └ JS

It had such a structure. If you look inside the CSS

ce2c38efa5418025f28785223a632302.png

There is ** bootstrap.css **! Good I put it in app> assets> styleseets. I wondered if this would solve it, but nothing changed. I noticed that the description method is not a Rails rule, <link rel="~~~~ From the description


①<%= stylesheet_link_tag 'application', media: 'all'%>

Changed to. The commented out ② had the same name, so I placed it in the same place. However, the appearance did not change with or without the file, The meaning of the'application'part described in ① seems to mean "in this application", and it was displayed properly without specifying the directory in detail. This is a guess, but I thought that it would be okay to delete the code in part (2) by expanding the specified range.

Well, when I try to refresh the page after solving it, JavaScript does not work this time.

Problem part (at the bottom of the page)

~ The following is omitted ~
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="../assets/dist/js/bootstrap.bundle.js"></script></body>
</html>

Based on the same principle, I thought that ** <script src = ~~~~ ** was the strange part.

Try to make it like this

~ The following is omitted ~
</main>
<%= javascript_include_tag 'https://code.jquery.com/jquery-3.5.1.slim.min.js' %>
       <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %></body>
</html>

As a result, it doesn't change. I tried taking integrity and cross origin, but there was no change. I also checked these two, but they don't seem to have much to do with each other. If you notice here, you will be addicted to it for about 2 hours. Hmm.

After that, I arrived at the possibility that turbolinks was in the way, deleted it from the gem, and pasted the source code that appeared in the CDN version. Then it was displayed!

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

What I found

I didn't realize what Bootstrap was looking for, and it took me a long time. I think it would have been silly if I could solve it, but when I was doing it, I was so desperate that I often couldn't see much around me. I will implement the front part from tomorrow, but I decided to remember the idea of ​​converting that I felt today and trying and learning about it.

I would appreciate it if you could let me know if there are any mistakes or improvements.

I used it as a reference

https://yurutsubu.com/rails-5-x-javascript-does-not-work-well-6745.html#i-3

Thank you very much.

Recommended Posts

[Boostrap] Why doesn't it work? jQuery-chan? ~ Fighting long and long errors ~
Check if you're using Databinding and it doesn't work
Why Synchronized suspend doesn't work in Kotlin