NukaCode - Front End - BootstrapDocumentation
Release 1.0.0
stygian
July 04, 2015
Contents
1 Badges 31.1 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 New CSS Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.4 Laravel Helpers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131.5 Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
i
ii
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
This package is designed to make using Twitter Bootstrap much easier in Laravel. It requires Core, but otherwise,works out of the box.
Contents 1
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
2 Contents
CHAPTER 1
Badges
1.1 Links
• Github
• Packagist
1.2 Installation
1.2.1 Installation
Laravel-Base
If you are adding bootstrap to Laravel-Base, you will need to make some minor changes.
• Remove resources/views/layouts/default.blade.php (Optional but this package contains amore in depth layout)
• Remove Illuminate\Html\HtmlServiceProvider from config/app.php.
Composer
composer require nukacode/front-end-bootstrap:~1.0
Routes
If you would like to use the included routes, add the following to your app/Http/routes.php file.
include_once(base_path() .'/vendor/nukacode/front-end-bootstrap/src/routes.php');
Service Providers
Add the following service providers to configs/app.php. .. code:
3
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
'NukaCode\Bootstrap\BootstrapServiceProvider','NukaCode\Bootstrap\Html\HtmlServiceProvider',
Themes
Bower
Hint: You only need to have one of these.
bower install -S nukacode-bootstrap-base#~0bower install -S nukacode-bootstrap-dark#~0
Resources
app.less At the top of resources/assets/less/app.less add the line below that matches your theme.Make sure this is first line of that file.
@import '../../../vendor/bower_components/nukacode-bootstrap-base/less/base';@import '../../../vendor/bower_components/nukacode-bootstrap-dark/less/dark';
colors.less Create a file in resources/assets/less/ called colors.less. This file is used to quickly set someof the main variables of the theme. You can of course overload any other standard bootstrap variables as you like inthis file as well.
@bg: #343838;@gray: #343838;@brand-primary: #6fba3b;@brand-info: #3b81ba;@brand-success: #62c462;@brand-warning: #c09853;@brand-danger: #ba403b;@menuColor: #4e8329;
@gray-darker: lighten(@gray, 13.5%);@gray-dark: lighten(@gray, 20%);@gray-light: lighten(@gray, 60%);@gray-lighter: lighten(@gray, 93.5%);@darkPrimary: darken(@brand-primary, 15%);@darkerPrimary: darken(@brand-primary, 30%);@darkInfo: darken(@brand-info, 15%);@darkSuccess: darken(@brand-success, 15%);@darkWarning: darken(@brand-warning, 15%);@darkError: darken(@brand-danger, 15%);@body-bg: @bg;
4 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
1.3 New CSS Classes
1.3.1 New CSS Classes
Backgrounds
A number of background colors have been supplied. These can be added to any element as they just set the backgroundcolor to the themes predefined colors.
Class Brand colorbg-primary brand-primarybg-info brand-infobg-warning brand-warningbg-danger brand-dangerbg-success brand-successbg-inverse brand-blackbg-purple brand-purplebg-radiation brand-radiation
Badges
There are a few new badge classes. These work the same as standard classes and use the corresponding brand colorfor their background color.
• badge-primary
• badge-info
• badge-success
• badge-warning
• badge-danger
Code
<span class="badge badge-primary">10</span>
Output
Buttons
This is meant to be an inverted button. It varies by theme, but will always match the default theme settings.
• btn-inverse
1.3. New CSS Classes 5
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Code
<button class="btn btn-inverse">Go Back</button>
Output
Panels
We have worked to add quite a few useful additions to panels. These are all completely optional of course, but we feelthey add a lot of functionality people would find useful.
Panel Alerts
Panel alerts are used when you need to alert the user to some details about what the panel contains. You could also usethem to detail errors and messages from form submission if you chose as well.
Code<div class="panel panel-default">
<div class="panel-alert panel-alert-info">Info Alert</div></div>
6 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Output
Class Image
panel-alert-info
panel-alert-warning
panel-alert-danger
panel-alert-success
Panel Buttons
Panel buttons are used to add quick and easy buttons to the panel heading. These come in all the common classes or aclassless version.
You can have as many or as few as you want. Just keep adding them to suit your needs.
Code
1.3. New CSS Classes 7
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
<div class="panel panel-default"><div class="panel-heading">
Panel Heading<div class="panel-btn primary">
<a><i class="fa fa-plus"></i></a></div>
</div><div class="panel-body">Panel Body</div>
</div>
8 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Output
Class Image
pri-mary
info
warn-ing
danger
suc-cess
<none>
1.3. New CSS Classes 9
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Text
The only addition to text is the inclusion of text-primary as a class. This will set your text color to the brand-primary.
<p class="text-primary">Something</p>
Tables
The only addition to tables is the inclusion of a primary table row class to use your primary brand color.
<tr class="primary"><td>Something</td></tr>
Wells
Wells have been upgraded slightly to have a bit more styling. The inclusion of the well-title helps distinguish wells ona page.
Well Title
Code<div class="well">
<div class="well-title info">Well title</div>Default Well
</div>
10 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Output
Class Image
<none>
info
suc-cess
warn-ing
danger
Well Title Buttons
Well title buttons work like panel buttons. Unlike panel buttons, there can only be one at a time.
Code<div class="well">
<div class="well-title"><div class="well-btn well-btn-right"><i class="fa fa-plus"></i></div>Well title
</div>Default Well
</div>
1.3. New CSS Classes 11
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Output
Class Image
<none>
info
suc-cess
warn-ing
danger
12 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
1.4 Laravel Helpers
1.4.1 HTML
Image Links
linkImage
Parameters Required Default Notes$url Yes The url the image will link to.$imageSrc Yes The location of the image.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.
{{ HTML::linkImage('/home', public_path('img/test.png')) }}
linkRouteImage
Parameters Required Default Notes$route Yes The route the image will link to.$parameters Yes Any parameters the route may need.$imageSrc Yes The location of the image.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.
{{ HTML::linkRouteImage('user.profile', ['id' => 1], public_path('img/test.png')) }}
Icon Links
linkIcon
Parameters Required Default Notes$url Yes The url the image will link to.$iconClasses Yes The icon classes to use.$iconText No null Any text to display after the icon.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.
{{ HTML::linkIcon('/home', 'fa fa-home', 'Go Home') }}
linkRouteIcon
Parameters Required Default Notes$route Yes The route the image will link to.$parameters Yes Any parameters the route may need.$iconClasses Yes The icon classes to use.$iconText No null Any text to display after the icon.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.
1.4. Laravel Helpers 13
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
{{ HTML::linkRouteIcon('user.profile', ['id' => 1], 'fa fa-user', 'Admin's Profile') }}
Typography
span
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::span('this is a span') }}
Output
bold
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::bold('This is bold text') }}
Output
italic
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::italic('This is italicized text') }}
Output
14 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
delete
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::delete('This is deleted text') }}
Output
strike
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::strike('This text is striked out') }}
Output
insert
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::insert('This is inserted text') }}
Output
underline
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
1.4. Laravel Helpers 15
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Code{{ HTML::underline('This is underlined text') }}
Output
mark
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
CodeThis is {{ HTML::mark('marked') }} text
Output
small
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
CodeThis is {{ HTML::small('small') }} text
Output
lead
Parameters Required Default Notes$value Yes The text inside the tag.
Code{{ HTML::lead('This text should stand out.') }}
Output
16 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
quote
Parameters Required Default Notes$value Yes The text inside the tag.$source No null The source of the quote.
Code{{ HTML::quote('This is quoted text.', 'By Stygian') }}
Output
description
To use bootstrap description lists pass an array to this method. The key will be the bolded text, the value will be thedescription text.
Parameters Required Default Notes$list Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
Code$list = ['Description lists' => 'A description list is perfect for defining terms.', 'Euismod' => 'something'];
{{ HTML::description($list) }}{{ HTML::description($list, ['class' => 'dl-horizontal']) }}
Output
1.4. Laravel Helpers 17
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Code
code
Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.
CodeThis is {{ HTML::code('code') }} text
Output
kbd
KBD can accept either a single key or an array of keys. If it gets an array, it will automatically place the + betweenthem.
Parameters Required Default Notes$keys Yes The keyboard key(S) that will be used.
Code{{ HTML::kbd('ctrl') }}{{ HTML::kbd(['ctrl', 'alt', 'del']) }}
Output
Iframes
iframe
This will create a generic iframe with whatever you pass to it.
Parameters Required Default Notes$url Yes The url the iframe will point to.$attributes No [] Any attributes to add to the tag.
Code{{ HTML::iframe('http://google.com') }}
18 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
embed
This will create a bootstrap iframe that uses responsive sizing.
Parameters Required Default Notes$url Yes The url the iframe will point to.$aspect No 16by9 Valid aspects are 16by9 and 4by3.
Code{{ HTML::embed('http://google.com', '4by3') }}
1.4.2 Form
Sizes and Types
The bootstrap form builder has a few things that it considers globally important to a form.
Sizes can be looked at as the gutters everything will fall into. By default, we assume a label will be 2 columns and theinputs will be 10 columns. This can be changed using setSizes() at any time.
Note: Sizes only apply to horizontal type forms.
Type describes the bootstrap form type. A type can be basic, inline or horizontal. You can see details on the types atgetbootstrap.com.
Form Groups
To use bootstrap form groups is actually pretty easy.:
{{ Form::groupOpen() }}// Form elements
{{ Form::groupClose() }}
To make things easier, when calling groupOpen() you can pass up to 3 sizes and it will reset the sizes for this group.The form will switch back to the previous sizes once the form group is closed.
Form groups have a few optional addendums that you can use to better control the output.
Sizing
You can add lg or sm to change the input sizes of the form group elements.
{{ Form::lgGroupOpen() }}
Offset Inputs
For checkboxes, radios and submit buttons, you may not have any labels on the left (primarily on horizontal forms).For these situations, open an offset form group.
{{ Form::offsetGroupOpen() }}
1.4. Laravel Helpers 19
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Validation States
Bootstrap also gives nice validation states to form groups. These are success, warning and error.
{{ Form::warningGroupOpen() }}
Feedback
Lastly, form inputs can have icons denoting feedback. These too require a special form group.
{{ Form::feedbackGroupOpen() }}
Putting it all together
The bst thing of all is that these groups are not exclusive. You can combine them as you wish to get any result youneed.
{{ Form::warningFeedbackGroupOpen() }}{{ Form::errorOffsetLgGroupOpen() }}
Inputs
Now that we can open form groups, let’s dig into inputs. These are the basis of all forms, so they deserve attention.
Each form element that is called automatically gets the class form-control added to it. Certain specific elementsget default classes added to them as well but will be covered in their own area below.
label
This element will have the sr-only class applied to it on inline forms and col-md-<label size>control-label for horizontal forms.
Note: Be careful with this. If you call this and also set the label parameter on your input, two labels will show up.
Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$options No [] Any attributes to add to the element.
Code{{ Form::label('email', 'Email Address') }}{{ Form::text('email') }}
HTML<div class="form-group ">
<label for="email">Email Address</label><input class="form-control" name="email" type="text" id="email">
</div>
20 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Output
help
The help method will add help text to a given element.
Parameters Required Default Notes$text Yes The text that will be displayed.$options No [] Any attributes to add to the element.
Code{{ Form::text('email', $user->email, [], 'Email Address') }}{{ Form::help('Your email address should be account@provider') }}
HTML<div class="form-group ">
<label for="email">Email Address</label><input class="form-control" name="email" type="text" value="[email protected]" id="email"><span class="help-block">Your email address should be account@provider</span>
</div>
Output
icon
This is used in conjunction with the feedback form group. It is what sets the icon inside of the input element.
Parameters Required Default Notes$class Yes The class(es) of the icon to use.$options No [] Any attributes to add to the element.
Note: The form builder will take into account glyphicon and font-awesome classes for spacing.
Code{{ Form::feedbackSuccessGroupOpen() }}
{{ Form::text('email', $user->email, [], 'Email Address') }}{{ Form::icon('fa fa-user') }}
{{ Form::groupClose() }}
1.4. Laravel Helpers 21
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
HTML<div class="form-group has-success has-feedback">
<label for="email">Email Address</label><input class="form-control has-success has-feedback" name="email" type="text" value="[email protected]" id="email"><span class="form-control-feedback fa fa-user" style="top: 30px;" aria-hidden="true"></span>
</div>
Output
date
This will create a standard HTML 5 date input.
Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$options No [] Any attributes to add to the element.$label No null Is this is supplied, it creates a label with this text for you.
Code{{ Form::date('publish_on', '2015-05-21', [], 'When should this be published?') }}
HTML<div class="form-group ">
<label for="publish_on">When should this be published?</label><input class="form-control" name="publish_on" type="date" value="2015-05-21">
</div>
Output
staticInput
This will create a text entry instead of an input element. See getbootstrap.com for more details.
Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$options No [] Any attributes to add to the element.$label No null Is this is supplied, it creates a label with this text for you.
22 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Code{{ Form::staticInput('Account is locked', [], 'Status') }}
HTML<div class="form-group ">
<label for="">Status</label><p class="form-control-static">Account is locked</p>
</div>
Output
checkbox and radio
These are unique but similar to each other, so they will be tackled together.
Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$checked No false Wether the element should be checked by default.$options No [] Any attributes to add to the element.$label No null Is this is supplied, it creates a label with this text for you.$inline No false This switched the elements to be inline instead of stacked.
Code{{ Form::offsetGroupOpen() }}
{{ Form::checkbox('active', 1, true, [], 'Active', true) }}{{ Form::checkbox('hidden', 1, true, [], 'Hidden', true) }}
{{ Form::groupClose() }}{{ Form::offsetGroupOpen() }}
{{ Form::checkbox('active', 1, true, [], 'Active') }}{{ Form::checkbox('hidden', 1, true, [], 'Hidden') }}
{{ Form::groupClose() }}
HTML<div class="form-group ">
<div class="checkbox-inline"><label><input checked="checked" name="active" type="checkbox" value="1"> Active</label>
</div><div class="checkbox-inline">
<label><input checked="checked" name="hidden" type="checkbox" value="1"> Hidden</label></div>
</div><div class="form-group ">
<div class="checkbox"><label><input checked="checked" name="active" type="checkbox" value="1"> Active</label>
</div><div class="checkbox">
1.4. Laravel Helpers 23
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
<label><input checked="checked" name="hidden" type="checkbox" value="1"> Hidden</label></div>
</div>
Output
Everything else
Each other input is the same as illuminate/html defaults with the addition of a final parameter: $label. You canadd this to quickly create a label for any input you are using.
Code{{ Form::text(name, value, options, 'Some Label') }}
HTML<div class="form-group has-success has-feedback">
<label for="email">Email Address</label><input class="form-control has-success has-feedback" name="email" type="text" value="[email protected]" id="email"><span class="form-control-feedback fa fa-user" style="top: 30px;" aria-hidden="true"></span>
</div>
Output
Helpers
open
The open method is pretty much the same as Laravel default but with an optional second parameter. This allows youto set the form type when opening the form. It also makes sure your form has the correct bootstrap class based on thetype you chose.
Parameters Required Default Notes$options No [] Any options to pass to the form.$type No horizontal The form type (basic, inline or horizontal).
24 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
{{ Form::open([], 'inline') }}
setSizes
This is used to set the sizes for the entire form. Use it before opening the form. If only the first parameter is sent, thesecond size will be 12 minus the first (to allow for a full bootstrap column set).
Parameters Required Default Notes$labelSize Yes The size for labels (left most column).$inputSize No 12 - ($labelSize) The size for the inputs (center or right column).$iconSize No 0 An optional third column for anything extra (right column).
{{ Form::setSizes(4, 6)->open() }}
setType
This is used to set the type manually (outside of the open() method). This too must be called before opening theform.
Parameters Required Default Notes$type No The type to set the form to. (basic, inline or horizontal).
{{ Form::setType('basic')->open() }}
To-Do
• input groups
1.5 Themes
1.5.1 Themes
Repos
• Base Theme
• Dark Theme
Examples
You can find an example of each theme at their respective github.io page.
1.5. Themes 25
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
26 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Dark
1.5. Themes 27
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
28 Chapter 1. Badges
NukaCode - Front End - Bootstrap Documentation, Release 1.0.0
Base
1.5. Themes 29