Bootstrap 3 met LESS

Dat kan zeker anders! Gebruik de LESS bestanden van Bootstrap! LESS moet wél ge-compiled worden naar gewoon CSS, hiervoor zijn tal van plugins te vinden voor populaire systemen als WordPress en Magento, maar nog handiger is Grunt of Gulp! Alleen door LESS te gebruiken ben je er natuurlijk niet, daarvoor zijn er in LESS mixins! In de Bootstrap documentatie zie je op meerdere plekken voorbeelden staan met “Usage as a Mixin” als commentaar erbij. Hiermee kan je classes aan selectors hangen.

Bootstrap classes aan CSS selectors

Wanneer je een afbeelding ronde hoeken wilt geven heeft Bootstrap hier de “img-rounded” class voor, in de documentatie staat dat deze als volgt gebruikt kan worden:

<img src="..." alt="..." class="img-rounded">

Wanneer je alle afbeeldingen op je website ronde hoeken wilt geven, kan dit middels LESS i.c.m. Bootstrap als volgt gedaan worden:

img {
	.img-rounded();
}

Op die manier zijn de classes in de HTML niet nodig!

Bootstrap Grid met mixins

Niet alleen de “eenvoudige” dingen uit Bootstrap kunnen op deze manier gebruikt worden, maar ook bijvoorbeeld het Bootstrap Grid! Een stukje HTML als voorbeeld:

<div class="container">
	<div class="menu"></div>
	<div class="content"></div>
</div>

Wanneer je van de container een row wilt maken en van menu en content een kolom dan kan je dit als volgt doen:

.container {
	.make-row();

	.menu {
		.make-md-column(3);
	}

	.content {
		.make-md-column(9);
	}
}

Een heel mooi voorbeeld waar dit gebruikt wordt is het Magento Boilerplate!

Het bericht Geavanceerd Bootstrap 3 gebruik verscheen eerst op Roy Duineveld.

HTML aanpassen

Voeg aan elke “accordion-heading” een afbeelding van een pijltje toe met een “pull-left”.

<div class="accordion-heading">
	<h2><i class="icon-chevron-down pull-left"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#wizard" href="#brand">Merk</a></h2>
</div>

CSS toevoegen

Zoals hierboven in de HTML te zien is heb ik heading 2 tags gebruikt, hier moest de margin voor het icoon dan ook op aangepast worden:

.accordion .icon-chevron-down {
	margin: 9px 10px 0 15px;
}

Javascript toevoegen

Om het allemaal goed te laten functioneren heb ik een stukje Javascript toegevoegd welke inhaakt op de Javascript van de collapse. Zoals te zien wordt hier jQuery bij gebruikt.

$('#wizard').on('show', function (e) {
	$('.accordion .icon-chevron-down').removeClass('hide');
	$(e.target).prev().children().children('.icon-chevron-down').addClass('hide');
});

$('#wizard').on('hide', function (e) {
	$('.accordion .icon-chevron-down').removeClass('hide');
});

Mocht iemand zich geroepen voelen dit te melden bij Twitter Boostrap als toevoeging, ga je gang!

Het bericht Pijltjes op de collapse / accordion van Twitter Bootstrap verscheen eerst op Roy Duineveld.

Ik maak graag gebruik van CodeIgniter in combinatie met Twitter Bootstrap. Vandaar een voorbeeldje met deze twee. Een layout bestaat veelal uit een header en footer, deze zijn dan ook meestal opgesplitst in twee bestanden. Zo heb ik op de laatste regel in de header het volgende toegevoegd:

<?=$this->session->flashdata('message') ? '<div class="alert alert-success"><a class="close" data-dismiss="alert" href="#">&times;</a>'.$this->session->flashdata('message').'</div>' : '';?>

En vervolgens na het toevoegen, bewerken, verwijderen of wat dan ook gebruik je het volgende:

$this->session->set_flashdata('message','Het is gelukt!');
redirect('pagina');

En nog een paar linkjes naar de gebruikte onderdelen:

• Twitter Bootstrap alerts
  
• CodeIgniter session class over flashdata
• CodeIgniter URL helper over redirect

Als laatste nog even een voorbeeld van een website waar ik dit heb toegepast: Fastr, een nieuw platform voor autoliefhebbers!

Het bericht Gebruikers niet laten wachten na formulieren verscheen eerst op Roy Duineveld.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// De controller welke de controller van CodeIgniter uitbreid
class Formulier extends CI_Controller
{
	// De index functie welke als eerst aangesproken wordt
	// wanneer de controller geladen is
	public function index()
	{
		// De library laden zodat deze gebruikt kan worden
		// Eventueel ook automatisch te laden via autoload.php
		$this->load->library('form_validation');

		// De p-tags verwijderen rondom validatie foutmeldingen
		// Normaal is dit: <p>Foutmelding...</p>
		$this->form_validation->set_error_delimiters('', '');

		// Regels instellen voor ingevulde velden
		// De eerste waarde is de "name" van de input
		// De tweede waarde is de volledige naam van het veld
		// De derde waarde zijn de validatie regels:
		// - required = Verplicht in te vullen
		// - max_length[255] = Maximaal 255 karakters lang
		// - valid_email = Een geldig email adres
		// - trim = De PHP trim functie
		$this->form_validation->set_rules('name', 'Naam', 'required|max_length[255]|trim');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email|max_length[255]|trim');

		// Is het formulier verstuurd en is de validatie geslaagd?
		if( $this->form_validation->run()  )
		{
			// Ja!
			// Doe iets met de waardes,
			// opslaan in een database bijvoorbeeld
		}
		else
		{
			// Nee!
			// Het formulier weergeven
			$this->load->view('header');
			$this->load->view('formulier');
			$this->load->view('footer');
		}
	}
}

De “header” en “footer” view laten we even achterwege, door naar het formulier! Om de eventuele foutmeldingen weer te geven is de validation_errors functie, maar deze set alle foutmeldingen onder elkaar. Bij een mooi formulier ziet het er stukken beter uit als achter het veld een eventuele foutmelding komt te staan. Zie ook de voorbeelden van Twitter Bootstrap (vrij onderaan, je kan beter eerst naar buttons gaan en dan naar boven scrollen). Om dit voor elkaar te krijgen is er de form_error functie. Deze in combinatie met de set_value functie maakt het af. Deze laatste zorgt er namelijk voor dat de ingevulde waardes blijven, wanneer de validatie mislukt is, na het versturen van het formulier. Dit bij elkaar gestopt resulteert in het volgende:

<h1>Gebruiker <?=(isset($id) ? 'bewerken' : 'toevoegen');?></h1>
<hr>
<?=form_open('',array('class' => 'form-horizontal'));?>
	<div class="control-group<?=form_error('name') ? ' error' : '';?>">
		<label class="control-label" for="name">Naam</label>
		<div class="controls">
			<input type="text" id="name" name="name" placeholder="Naam" value="<?=set_value('name',(isset($name) ? $name : '')); ?>">
			<span class="help-inline"><?=form_error('name'); ?></span>
		</div>
	</div>
	<div class="control-group<?=form_error('email') ? ' error' : '';?>">
		<label class="control-label" for="email">Email</label>
		<div class="controls">
			<input type="email" id="email" name="email" placeholder="Email adres" value="<?=set_value('email',(isset($email) ? $email : '')); ?>">
			<span class="help-inline"><?=form_error('email'); ?></span>
		</div>
	</div>
	<div class="control-group">
		<div class="controls">
			<button type="submit" class="btn btn-success"><i class="icon-ok icon-white"></i> Opslaan</button>
		</div>
	</div>
</form>

Eén ding heb ik nog niet uitgelegd! Programmeren volgens DRY houd dus ook géén dubbele formulieren in. Vandaar de isset functies. Het formulier om iets toe te voegen en iets te bewerken kan dus samengevoegd worden. Wanneer dit formulier vanuit de controller geladen wordt zijn er geen waardes ingevuld. Willen we deze wel ingevuld hebben; dienen we deze enkel door te geven. De aangevulde en iets bewerkte controller:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// De controller welke de controller van CodeIgniter uitbreid
class Formulier extends CI_Controller
{
	// De "constructor", deze wordt altijd voor de losse functies uitgevoerd
	public function __construct()
	{
		// Zorgen dat de "constructor" van de CI_Controller eerst uitgevoerd wordt
		parent::__construct();

		// De library laden zodat deze gebruikt kan worden
		// Eventueel ook automatisch te laden via autoload.php
		$this->load->library('form_validation');

		// De p-tags verwijderen rondom validatie foutmeldingen
		// Normaal is dit: <p>Foutmelding...</p>
		$this->form_validation->set_error_delimiters('', '');

		// Regels instellen voor ingevulde velden
		// De eerste waarde is de "name" van de input
		// De tweede waarde is de volledige naam van het veld
		// De derde waarde zijn de validatie regels:
		// - required = Verplicht in te vullen
		// - max_length[255] = Maximaal 255 karakters lang
		// - valid_email = Een geldig email adres
		// - trim = De PHP trim functie
		$this->form_validation->set_rules('name', 'Naam', 'required|max_length[255]|trim');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email|max_length[255]|trim');
	}

	// De index functie welke als eerst aangesproken wordt
	// wanneer de controller geladen is, dus:
	// http://website.nl/formulier
	public function index()
	{
		// Is het formulier verstuurd en is de validatie geslaagd?
		if( $this->form_validation->run()  )
		{
			// Ja! Opslaan in de database
			$this->db->insert('gebruikers',$this->input->post());

			// Doorsturen naar de begin pagina
			redirect( site_url() );
		}
		else
		{
			// Nee! Het formulier weergeven
			$this->load->view('header');
			$this->load->view('formulier');
			$this->load->view('footer');
		}
	}

	// De bijwerken functie
	// http://website.nl/formulier/edit/1
	public function edit($id = 0)
	{
		// Gegevens uit de database halen
		$data = $this->db->get_where('gebruikers',array('id' => $id))->row();

		// Niets gevonden in de database?
		if(empty($data))
		{
			// Foutmelding weergeven
			show_404();
		}

		// Is het formulier verstuurd en is de validatie geslaagd?
		if( $this->form_validation->run()  )
		{
			// Ja! Bewerken in de database
			$this->db->where('id',$id);
			$this->db->update('gebruikers',$this->input->post());

			// Doorsturen naar de begin pagina
			redirect( site_url() );
		}
		else
		{
			// Nee! Het formulier weergeven
			// Deze keer de waardes uit de database meegeven
			$this->load->view('header');
			$this->load->view('formulier',$data);
			$this->load->view('footer');
		}
	}
}

Het bericht Twitter Bootstrap en CodeIgniter’s form validation verscheen eerst op Roy Duineveld.

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

Wat er zo uit zou zien:

<link href="css/bootstrap.css" rel="stylesheet">
<style>
body { padding-top: 40px; }
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">

Niet echt netjes!  Beter zet je het volgende in je eigen stylesheet:

body { padding-top: 40px; }
@media screen and (max-width: 979px) {
 body { padding-top: 0px; }
}

En kan je het gewoon weglaten:

<!-- Twitter Boostrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- Eigen CSS -->
<link href="css/main.css" rel="stylesheet">

Het bericht Twitter Bootstrap inline css voor de navbar-fixed-top weghalen verscheen eerst op Roy Duineveld.

Grafisch voorbeeld waar de waardes voor dienen:

16 kolommen grid:
@gridColumns 16
@gridColumnWidth 40px
@gridGutterWidth 20px
@gridColumnWidth1200 50px
@gridGutterWidth1200 25px
@gridColumnWidth768 36px
@gridGutterWidth768 10px

 24 kolommen grid:
@gridColumns 24
@gridColumnWidth 30px
@gridGutterWidth 10px
@gridColumnWidth1200 35px
@gridGutterWidth1200 15px
@gridColumnWidth768 21px
@gridGutterWidth768 10px

Het bericht Twitter Boostrap 16 of 24 grid verscheen eerst op Roy Duineveld.