Tự học Laravel: (15) BOOTSTRAP INSTALLATION

Last time , I created a screen to display the article list and articles, but because I have not set up any CSS, it is a very disappointing screen. This time, I will apply Bootstrap , which is a CSS framework , to arrange the display.

HOW TO INSTALL BOOTSTRAP

There are several ways to deploy Bootstrap.

  1. Laravel Use default CSS, JavaScript
  2. Use the Bootstrap CDN
  3. Download the compiled Bootstrap and place it under the public directory
  4. Download the Bootstrap source with npm and place it in the public directory using Laravel Mix

Although 4. can be optimized most, it requires knowledge of frontends such as node, npm and Laravel Mix. 
In this article, I will use the default CSS and JavaScript of 1. which is the easiest.

Please see the official site for information on how to use Laravel Mix in 4.

DOCUMENT ROOT

The document root of Laravel will be the public directory. Default CSS, JavaScript are in it.

public
├── css
│   └── app.css     CSS file
└── js
    └── app.js      JavaScript file

MODIFY LAYOUT FILE

//resources/views/layout.blade.php
 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
 
    <!-- ① CSS  -->
    <link rel="stylesheet" href="/css/app.css">
 
    <!-- ② JavaScript  -->
    <script src="/js/app.js" defer></script>
</head>
<body>  
    <div class="container py-4"> <!-- ③  -->
        @yield('content')
    </div>  
</body>
</html>
  1. Add default CSS import.
  2. Added default JavaScript loading. Try using Bootstrap.
  3. Add a div and enclose @yield (‘content’). 

If you specify class=”container py-4” for div, Bootstrap will display the margins at the top, bottom, left, and right.

The usage of Bootstrap can not be explained here, so please visit the official site. https://getbootstrap.com/

INDICATE CONTENT CONFIRMATION

Go to http://localhost:8000/articles/ and check the display. It is a success if there are left and right margins.

It was not so much change in the present situation saying that the display was adjusted (sweat). I will create menus and forms in the future, and at that time, I think that you can see the beauty of Bootstrap.

EXERCISE

Take a look at the official Bootstarp site to see what you can do. https://getbootstrap.com/

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.