With BForms you'll be able to build ASP.NET MVC web apps using Bootstrap's mobile-first approach and benefit from out of the box HTML5 controls with both client and server-side validation.
Razor HTML Helpers
BForms comes with HTML Extensions that cover all the HTML5 input types, single and multi select lists, date and time pickers, file upload, autocomplete, range pickers.
By decorating your models with BForms attributes you can easily define the behavior and UI appearance of each form field.
Similar to DataAnnotations.DataType, BForms provides a
that allows you to specify which type of input should be rendered by the Razor engine.
BForms relies on several JS frameworks and components that are bundled in three file: component.js, widgets.js and plugins.js
|2||jQuery UI core||jquery-ui-core||component.js|
|5||History.js used by Grid||history-js||component.js|
|6||jQuery File Upload used by bforms-fileupload||jquery-fileupload||component.js|
|7||Select2 customized for BForms||select2||plugins.js|
|9||ICanHaz used by DatePicker||icanhaz||plugins.js|
|10||Moment used by DatePicker||moment||plugins.js|
BFroms jQuery Widgets
|5||Group Editor bforms.bsGroupEditor||bforms-groupEditor||widgets.js|
|6||File Upload bforms.bsFileUpload||bforms-fileupload||widgets.js|
|7||Inline Question bforms.bsInlineQuestion||bforms-inlineQuestion||widgets.js|
BFroms jQuery Plugins
|1||DatePicker date, time, datetime and range||bforms-datepicker and bforms-datepicker-range||plugins.js|
|2||RangePicker number range picker||bforms-rangepicker||plugins.js|
|3||Radio and Checkbox list||bforms-radiolist and bforms-checklist||plugins.js|
|6||Validate jQuery validation adapted for BForms||bforms-validate and bforms-validate-unobtrusive||plugins.js|
Internet explorer 7-8 compatibity pack
Things to know before you get started
BForms is based on Twitter Bootstrap, version 3.3.5
What changes have we been made to override Twitter Bootstrap?
- Changed default font to Calibri
- Removed all rounded corners
- Used custom break-points in media-queries, that we have put to test
- Glyphicon 1px to top fix
- Fixed media-body width problem
- Removed blue color from pagination
Using SASS or the compiled CSS
The component’s CSS is made using SASS. SASS makes CSS fun again. SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
If you are not familiar with that you could use the compiled CSS otherwise here are some things to get you started: http://sass-lang.com
If you know CSS this won’t take you more than two hours or so to master the basics. Don’t worry, our CSS uses only variables and nesting.
Why did we use SASS over LESS (Twitter Bootstrap uses LESS)? Because updates are easier to maintain, you can write mixins for different screen sizes inside a class and overall SASS is more flexible.
When using our components make sure your site’s CSS is placed after ours. This way you will be able to override things more quickly.
Variables are used only to define the color scheme, so that you could change it accordingly to your site. You’ll find those variables in the top part of the CSS.
Here is what you have to look for:
You only need to replace the HEX color of the $mainColor variable to have a good integration with your site, or you could use some of our predefined color theme.
If you wish to use one of our color theme here’s what you have to do:
- Choose one of the colors. Based on these you can use a class named accordingly. The class names are:
- Forms: look for
form_containerand add one of the classes mentioned before.
- Grid: look for
grid_viewand add one of the color classes. Here you can do more if you have more than one grid in the page you can theme them differently.
- Pagination: look for
bs-pagerand add one of the color classes.
- Date-time-picker: look for
bs-datetime-picker. If you use the range-picker make sure to add the color class name to the