Bootstrap Date/Time Picker Introduction Simple date/time picker component based on the work of Stefan Petre, with contributions taken from Andrew Rowls and jdewit. Demo Code: Similar to above example, but in US date/hour format: Disables date picker: Disables time picker: The widget class provides 4 methods to manipulate dates: ‘getDate’/’setDate’ for working with UTC and ‘getLocalDate’/’setLocalDate’ for working with local dates: // Considering you are on a GMT-3 timezone and the input contains '2000-01-17 10:00'var localDate = picker.getLocalDate(); // localDate === 2000-01-17 07:00var utcDate = picker.getDate(); // utcDate === 2000-01-17 10:00//picker.setLocalDate(new Date(1998, 10, 11, 4, 30)); // input === 1998-10-11 07:30picker.setDate(new Date(Date.UTC(1998, 10, 11, 4, 30))); // input === 1998-10-11 04:30 The date value can be unset by passing ‘null’ to any of the ‘set’ methods or by erasing the input: The only event exposed is ‘changeDate’, which will expose ‘date’ and ‘localDate’ properties on the event object:
KNACSS GianlucaGuarini/Vague.js JavaScript · Bootstrap $(document).off('.data-api') $(document).off('.alert.data-api') $('.btn.danger').button('toggle').addClass('fat') var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality $('#myModal').on('show.bs.modal', function (e) { if (! <div class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div><! <! <! <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> ... .modal(options) <! 1 <!
Bootstrap Material Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework. If you like this project you can support me by donating something on Gratipay, starring this repository, or reporting bugs and ideas. Read more about Material Design for Bootstrap at the Github page. If you want support the development of this project please consider donate something: Donate with Gratipay Thanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! Would you like to use this theme for commercial projects? Seems like you are using AdBlock to hide banners... Thanks! You can get this theme downloading the source from Bower: bower install bootstrap-material-design Download Install with NPM - Coming Soon You can also install and manage Material Bootstrap using NPM npm install Install with Bower You can also install and manage Material Bootstrap using Bower Install with Meteor What's included Sound Alarms
Customize checkboxes and radio buttons with iCheck (jQuery and Zepto) plugin - Iceweasel iCheck plugin works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option. For this HTML: <label><input type="checkbox" name="quux[1]" disabled> Foo </label><label for="baz[1]">Bar</label><input type="radio" name="quux[2]" id="baz[1]" checked><label for="baz[2]">Bar</label><input type="radio" name="quux[2]" id="baz[2]"> With default options you'll get nearly this: <label><div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div> Foo </label><label for="baz[1]">Bar</label><div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div><label for="baz[2]">Bar</label><div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div> By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins). Options These options are default:
JavaScript Individual or compiled Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js). Using the compiled JavaScript Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Plugin dependencies Some plugins and CSS components depend on other plugins. Data attributes You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. That said, in some situations it may be desirable to turn this functionality off. $(document).off('.data-api') Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this: $(document).off('.alert.data-api') Only one plugin per element via data attributes Don't use data attributes from multiple plugins on the same element. Programmatic API We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. No conflict <!
Select2 3.3.2 - Iceweasel Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection. val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return []. Example: alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", "CA"); Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. Gets or sets the selection. data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return []. Reverts changes to DOM done by Select2. Opens the dropdown. Closes the dropdown. Notifies Select2 that a drag and drop sorting operation has started. change val added object
5 Easy Ways to Modify Your Bootstrap Button Styles - BootstrapBay In the following tutorial, we’re going to show you 5 easy ways to modify your Bootstrap button styles. This is a quick and easy way to differentiate your site from the default Bootstrap look. If you like what you see, you can download our free Bootstrap button pack (Demo | Download). Initial Setup We modified the default Bootstrap .btn class with the following CSS styles. Now that we’ve modified our .btn class, let’s go over our custom button classes. Sharp Buttons To create sharp buttons, simply set your border radius to 0. See the Pen YPKbxW by BootstrapBay (@bootstrapbay) on CodePen. Outline Buttons The first step in creating an outline button is to remove the background. Next, you need to increase the thickness of the border and change the color to match the border. Finally, you can add some hover effects by modifying the color and border colors when hovering over the button. See the Pen PwYvaO by BootstrapBay (@bootstrapbay) on CodePen. Gradient Buttons Rounded Buttons Raised Buttons
Creating Different CSS3 Box Shadows Effects - Iceweasel In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS. View Demo page to see what we are going to create CSS Box Shadow Effects Demo CSS Box Shadow We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it. The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset. The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour. box-shadow: inset horizontal vertical blur spread colour; Examples Browser Support All of the major newest browsers support box-shadow property. The box-shadow property is no different.
Creative - One Page Bootstrap Theme License & Author Details: Apache 2.0 by Start Bootstrap Theme Comments: Please enable JavaScript to view the <a href=" powered by Disqus.</a> Need a Custom Build? If you like this theme, but need something a bit more custom, you can hire the Start Bootstrap design team to create a custom version of this template! Description: Creative is a one page Bootstrap theme for creatives, small businesses, and other multipurpose uses. Features: Fully responsive Custom fixed navigation menu with scrolling animations LESS files included for deeper customization options Includes powerful plugins for added functionality: Semantic markup with nav, sections, and asides Custom button styles Subtle scrolling animations Full page image header banner with vertically centered content Unique, modern design Similar Themes & Templates: Tags: Please visit our resources page for design ideas and our help page if you need assistance with this theme.