[Day19] 第十九章-今天来开双B (blade与bootstrap 安装手册)

前言

昨天把简单的view切出来後
我们当然要上
css框架阿!!

我们今天就想办法把blade view套上
bootstrap让我们的网页开双B吧!!

目标

复习composer
laravel css设定
blade 与 bootstrap 的合作

实作

1. 先安装 laravel ui套件

我们可以使用

composer require laravel/ui

安装laravel/ui这个这个指令套件方便我们快速安装UI 框架
然而我们这边要使用bootstrap
接者我们继续下arsian指令吧

php artisan ui bootstrap

最後我们可以在最外层package.json档案里看到
我们使用的bootstrap使用4.6.6的版本

可能会有人问为什麽不适官方的5.1版呢!?
其实许多套件载解决相依性问题时难免会需要一些时间来做冲突处理，我们就静静等这些大神改版期待早点也可以上新版的bootstrap吧!

2. 设定前端套件

接者我们必须要下两个指令

npm install

这个指令会安装package.json里面的套件
安装好的套件会在一个叫做node_modules的资料夹里

最後我们在使用

npm run dev

就可已把这些套件compiler了喔!!

最後我们切回到

resources/views/skill/index.blade.php里面

我们在最上层加上引入的js跟css

<head>
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>

  <!-- Styles -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

我们可以在asset是经过npm run dev complier後的前端静态档案
我们这边只要把她引入即可使用

3. 双B结合

接者我们找到bootstrap 4.6的文件
BootStrap4.6 官方文件

我们要使用她的table
接者我们继续修改blade.php这个档案吧

<head>
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>

  <!-- Styles -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>标题</th>
        <th>使用者ID</th>
      </tr>
    </thead>
    <tbody>
      @foreach($skills as $skill )
      <tr>
        <td>{{$skill->id}}</td>
        <td>{{$skill->title}}</td>
        <td>{{$skill->user_id}}</td>
      </tr>
      @endforeach
    </tbody>
  </table>
</div>

完整是这样的结构
我们这边只有新增table的 class而已
接者来看成果吧