亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Laravel bootstrap css 只設置頁面的一部分

使用 Laravel bootstrap css 只設置頁面的一部分

PHP
慕田峪7331174 2021-09-05 18:11:38
我正在嘗試使用app.cssLaravel 附帶的默認引導 css ( ) 來設計我頁面的一部分 - 特別是我的注冊頁面的表單部分。我不想包含app.css在我的 html 標題中,因為它對頁面的其他部分產生了不良影響。所以我希望它只在頁面中設置我的 html 表單的樣式。目前,我在表單部分中使用了這樣的asset()或HTML::style()方法:@section('form')<style> @import "{{ asset('css/app.css') }}"; </style><form>...</form>@endsection或者@section('form'){{ HTML::style('css/app.css') }}<form>...</form>@endsection這兩種方法都正確加載了樣式,但會影響整個頁面而不僅僅是表單元素。我嘗試使用ViewComposer該類通過將 ViewComposer 中的變量設置為我想要的樣式來解決這個問題 - 僅在我請求所需的視圖時才返回它:class ViewComposer{  public function compose(View $view)  {    $data = [];    switch($view->getName())    {      ...      case 'sections.register':        $this->data = ['style'=>"<style> @import \"". asset('css/app.css') . "\"; </style>"];        break;    }    return $view->with($this->data);  }}但是,當我渲染sections.register子視圖時,我得到了這樣的樣式變量:@section('form'){{ $style ?? '' }}<form>...</form>@endsection瀏覽器上的輸出不會被解析為 css,而是按原樣顯示:<style> @import "{{ asset('css/app.css') }}"; </style>那么,有沒有一種方法可以為 html 頁面中的給定視圖部分解析外部 css,并且可以使用 ViewComposer 類來實現?更新: 我嘗試了一些東西并使用了這個:@section('form'){!! $style ?? '' !!}<form>...</form>@endsectioncss 被解析但仍應用于整個頁面。我仍然需要它只應用于表單部分。
查看完整描述

2 回答

?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

1.一種選擇是僅復制您需要的 css 并將其粘貼到自定義 css 中,然后為該視圖制作不同的布局。但正如你所說,這可能是一項乏味的工作。

2.另一種選擇是為您的 app.css 文件添加前綴。有一個軟件可以做到這一點,這里是教程。因此,如果您為整個 css 文件添加前綴,例如:.laravel-app那么您可以像這樣包裝任何您希望由 app.css 設置樣式的內容:

<div class="laravel-app">
<!-- Everything in here will be styled by app.css -->
</div>

從長遠來看,這將對您的項目有所幫助。


查看完整回答
反對 回復 2021-09-05
?
慕姐8265434

TA貢獻1813條經驗 獲得超2個贊

首先,按視圖導入或加載 css 會對應用程序的性能產生不利影響。因此,不建議使用 View Composer 加載 css。我從Denis ?eri?的回答中得到了提示,盡管乍一看并不清楚。

此外,這篇文章中接受的答案使事情變得更加清晰。

實現這一目標的正確方法是使用 css 預處理器。流行的是lesssass。我使用sass它是因為它目前被 Laravel 采用。

sass按照此處的說明安裝在我的 Windows 機器上。

創建一個新scss文件:app-custom.scss在與app.css.

app-custom.scss使用嵌套導入進行修改:

.app-form

{

    @import 'app';

}

app-custom.css在 Windows 命令行上使用 sass 命令生成:


sass app-custom.scss app-custom.css

將表單的類更改為app-form:


@section('form')

<form class='app-form'>...</form>

@endsection

app-custom.css使用鏈接標簽包含在您的標題中:


<head>

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

</head>

你就完成了。


提示:如果您想在app.css頁面的多個單獨部分中使用樣式,您仍然可以從單個scss文件中實現。只需在scss文件中包含每個部分的類,如下所示:


.section-1, .section-2, .section-3

{

    @import 'app';

}


查看完整回答
反對 回復 2021-09-05
  • 2 回答
  • 0 關注
  • 325 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號