composer require marvinlabs/laravel-html-bootstrap-4
{{ bs()->openForm('post', '/exam' , [ 其他選項陣列]) }}
{{ bs()->closeForm() }}
'files' => true, //需要上傳檔案時
'model' => $exam, //綁預設值時
'hideErrors' => true, //隱藏錯誤
'inline' => true, //行內表單
//自定義表單屬性
'attributes' => [
'id' => 'create_user_form',
'v-cloack' => '',
]
{{ bs()->input('text', 'username', '吳弘凱')->placeholder('請填入姓名') }}
{{ bs()->text('username')->placeholder('請填入姓名') }}
{{ bs()->text('username', '小型輸入框')->sizeSmall() }}
{{ bs()->text('username', '大型數入框')->sizeLarge() }}
{{ bs()->hidden('op', '隱藏欄位') }}
{{ bs()->password('pass', '密碼欄位') }}
{{ bs()->email('email', 'Email欄位') }}
{{ bs()->token() }}
{{ bs()->textArea('content', '這是大量文字框') }}
{{ bs()->select('enable', ['1' => '開啟', '0' => '關閉'], '1') }}
//多選
{{ bs()->select('color', ['red' => '紅色', 'green' => '綠色', 'biue' => '藍色'])
->multiple()
->value(['red', 'green'])
->placeholder('可多選') }}
//高興的話placeholder()也可以用第二個參數賦予值
{{ bs()->select('color', ['red' => '紅色', 'green' => '綠色', 'biue' => '藍色'])
->placeholder('請選擇顏色', -1) }}
{{ bs()->checkbox('remember')->description('記住我') }}
//預設勾選
{{ bs()->checkbox('remember')->description('記住我')->checked() }}
//整合上方的一行式寫法
{{ bs()->checkbox('remember', '記住我', true) }}
//可以自訂值,也可以設成inline
{{ bs()->checkbox('remember', '記住我')->value('yes')->inline() }}
//不指定值的話,預設的值為1
{{ bs()->radio('enable')->description('啟用') }}
//預設勾選
{{ bs()->radio('enable')->description('啟用')->checked() }}
//整合上方的一行式寫法
{{ bs()->radio('enable', '啟用', true) }}
//可以自訂值,也可以設成inline
{{ bs()->radio('enable', '啟用')->value('yes')->inline() }}
//多個選項的寫法
{{ bs()->radioGroup('enable', [1 => '啟用', 0 => '關閉'])
->selectedOption(1)
->inline()
->radioDisabled()
->addRadioClass(['bg-light', 'my-3']) }}
'files' => true
)
{{ bs()->file('avatar2', '選擇一個檔案') }}
{{ bs()->simpleFile('avatar') }}
primary
, secondary
, success
, danger
, warning
, info
, light
, dark
)
{{ bs()->submit('送出按鈕') }}
{{ bs()->button('一般按鈕') }}
//第二個參數指定樣式,第三個是否為外框按鈕
{{ bs()->button('外框按鈕', 'success', true) }}
//把連結做成按鈕
{{ bs()->a('#', '把連結做成按鈕')->asButton('secondary') }}
primary
, secondary
, success
, danger
, warning
, info
, light
, dark
)
{{ bs()->badge()->text('預設徽章') }}
{{ bs()->badge()->text('顯示成藥丸狀')->pill() }}
{{ bs()->badge('info')->text('加上連結')->link('#') }}
->sizeSmall()
或 ->sizeLarge()
來控制尺寸,亦可和 textarea
及 button
搭配使用)
{{ bs()->inputGroup()
->prefix('共')
->suffix('元')
->control(bs()->text('username')->placeholder('請填入金額')) }}
{{ bs()->text('username', '這是唯讀的')->readOnly() }}
{{ bs()->text('username', '這是唯讀的,而且顯示成一般文字(但仍是欄位)')->readOnly(true) }}
{{ bs()->text('username', '這是無效的')->disabled() }}
姓名
」替換成想要的標籤,bs()->text('username')
換成想要的元件即可。
{{ bs()->formGroup()
->label('姓名')
->control(bs()->text('username'))
->helpText('請在此填入姓名')}}
showAsRow()
就可以使用水平表單label('姓名', false, 'text-sm-right')
的第二個參數是是否使用 sr-only
,若true
,標籤會消失(預設為false
)。第三個參數是可以自行加入額外的class,例如用text-sm-right
讓標籤只有在螢幕大於576px時才會靠右 。姓名
」替換成想要的標籤,bs()->text('username')
換成想要的元件即可。
{{ bs()->formGroup()
->label('姓名', false, 'text-sm-right')
->control(bs()->text('username'))
->showAsRow() }}
type
可套用 primary
、secondary
、success
、danger
、warning
、info
、light
、dark
),原component位於\專案\vendor\marvinlabs\laravel-html-bootstrap-4\resources\views\alert.blade.php
@component('bs::alert', ['type' => 'info', 'animated' => true, 'dismissible' => true, 'data' => ['alert-id' => 40, 'context' => 'sample-code']])
@slot('heading')
info 警告視窗
@endslot
<p>dismissible 右上會出現 x 符號,用來關閉;animated 在關閉時會有漸變效果;data 可以用來設置一些屬性</p>
<p>除了 type 外,其餘參數截可省略</p>
@endcomponent
\專案\vendor\marvinlabs\laravel-html-bootstrap-4\resources\views\jumbotron.blade.php
@component('bs::jumbotron', ['fluid' => true])
@slot('heading')
巨幕主標題
@endslot
@slot('subheading')
這裡是次標題
@endslot
<hr class="my-3">
<p>這裡愛寫啥都行</p>
@slot('actions')
{!! bs()->a('#', '這是個連結按鈕')->asButton('primary') !!}
@endslot
@endcomponent