Bootstrap-checkbox A checkbox component based on bootstrap framework Author Roberto Montresor Usage Create your <input type="checkbox"> with the .checkbox class. Enable Bootstrap-checkbox via JavaScript: $('.checkbox').checkbox(); Or just $('input[type="checkbox"]').checkbox(); You obtain: Options Options can be passed via data attributes or JavaScript. You can append or prepend a label via the data-label or data-label-prepend attribute. With constructorCallback, you can access (in order) at original input checkbox, created button, created label and created prepended label With defaultState and defaultEnabled you can set a default state (checked or not) and a default abilitation on reset of the form Methods $('input[type="checkbox"]').checkbox('click'); // change input's state$('input[type="checkbox"]').checkbox('toggleEnabled'); // change input's enabled Examples Normal usage With Font-Awesome Size Labels Button Style Form reset Visitors Copyright and license Copyright (C) 2013 Roberto Montresor Licensed under the MIT license.
css - Styling checkboxes, radio buttons and dropdowns PNotify PNotify downloads come with the following files: pnotify.custom.js or pnotify.custom.min.js (Minified) pnotify.custom.css or pnotify.custom.min.css (Minified) So here's how you'd include them on your page: You also need to include jQuery (1.6 or higher) and either Bootstrap CSS or a jQuery UI Theme. If you want to use jQuery UI effect animations, you also need to include the jQuery UI JavaScript. Now you can use PNotify like this: If you are not using any UI library, you can use the included styling, called Bright Theme. If you are using Bootstrap version 2, include this line somewhere before your first notice: PNotify.prototype.options.styling = "bootstrap2"; If you are using Bootstrap version 3, include this line somewhere before your first notice: PNotify.prototype.options.styling = "bootstrap3"; If you are using jQuery UI, include this line somewhere before your first notice: PNotify.prototype.options.styling = "jqueryui"; PNotify.prototype.options.styling = "fontawesome";
Styling checkboxes and radio buttons using CSS The styling of checkboxes and radio buttons became possible with the introduction of the :checked pseudo-class in CSS3. This page describes two techniques: an image-based method, shown in the demonstration below, and a pure CSS method. Download examples The archives below contain two sets of example files demonstrating both the image-based and pure CSS styling methods described on this page. Image-based styling Image-based styling allows the greatest flexibility in appearance. HTML of the following form is used for each checkbox or radio button: The input and label elements are shown here on separate lines to increase readability; they should usually be put on the same line, with no intervening space, for more accurate styling. We hide the checkboxes and radio buttons in the stylesheet: The selectors in lines 1 and 2 use the negation pseudo-class to hide the rule from older browsers. We then position the label and display the unchecked image: Pure CSS styling We then position the label:
Bootstrap: Dropdown on Hover Plugin Demo Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Stuff you can do with the "Checkbox Hack" The “Checkbox Hack” is where you use a connected <label> and <input type="checkbox"> and usually some other element you are trying to control, like this: <label for="toggle">Do Something</label><input type="checkbox" id="toggle"><div class="control-me">Control me</div> Then with CSS, you hide the checkbox entirely. Probably by kicking it off the page with absolute positioning or setting its opacity to zero. So you can style an element completely differently depending on the state of that checkbox, which you don’t even see. Some of this stuff crosses the line of what you “should” do with CSS and introduces some questionable semantics. Custom Designed Radio Buttons and Checkboxes You can hide the default UI of a radio button or checkbox, and display a custom version right on top of it. File system like “tree menu” Tabbed Areas The “tabs” design pattern is just toggling on and off of areas, perfect for the checkbox hack. Demo from Functional CSS tabs revisited: Dropdown Menus Push Toggles
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 <!
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):