twitter-bootstrap - 如何在 Laravel 模板中使用 Bootstrap

标签 twitter-bootstrap laravel laravel-5 laravel-5.4

我使用的是 Laravel 5.4。在 web.phproutes 文件夹中,我编写了以下代码:

Route::get('test', function () {
    return view('test');
});

而且我还在resources/views 中创建了test.blade.php。在这个文件中我有一个简单的布局:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing Bootstrap</title>
  </head>
  <body>
    <div class="container bg-danger">
      <p>This is a paragraph</p>
    </div>
  </body>
</html>

为了访问此页面,我只需使用 localhost:8000/test url。

页面加载成功,但 containerbg-danger 等 Bootstrap 类不受影响。为什么?如何在 Laravel Blade 模板中使用 Bootstrap 功能?

最佳答案

除非这是您第一次使用 bootstrap,只需将链接添加到您头脑中的 bootsrap 文件,就像其他 css 文件一样即可完成这项工作,来自 cdn 的示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

......

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div class="container bg-danger">
      <p>This is a paragraph</p>
    </div>
  </body>
</html>

PS: My recommendation for next time: Google it, Google it... Most likely its already answered also on Stackoverflow. Hope it helps

关于twitter-bootstrap - 如何在 Laravel 模板中使用 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44888110/

相关文章:

html - Bootstrap 导航栏在我添加标签时移动

html - 使 Bootstrap 面板的大小独立于其中的内容

php - Laravel 5 中的自定义分页 View

mysql - 删除唯一的索引列

php - 为什么在 Laravel 中使用 WHERE 后循环获取数据?

javascript - 使用 JavaScript 验证复选框选中的属性是否不为空

twitter-bootstrap - 如何在 Rails 4 中使用 Bootstrap 3 RC

laravel - 如何在vue3中监听父组件中的emit事件

laravel - 渲染 View 作为事件广播的响应

php - Laravel mysql 错误关系数据库?