Popular Posts
- Bootstrap Progress Bar example using jQuery and PHP
- How to get device Unique ID | device ID in Phonegap
- Jquery popup using colorbox iframe load external page
- How to Git Init Repository
- Attractive login form with css and bootstrap
- Shaking Up The Web With CSS3 (How To Make Links Shake)
- CodeIgniter Insert Data into Database
- Extracting URL Data with Jquery and Ajax
- Voting system Using jQuery Ajax and Php Codeigniter Framework
- How to display Indian Rupee symbol in websites
Contact Form
bootstrap,
css,
tutorial
Bootstrap-3 tutorial 12 – How to make a basic form
11:12 PM Admin 0 Comments
In this tutorial I’ll show you how to make a basic form in Bootstrap. By adding Bootstrap classes to your form, it will be responsive and also gain some neat and tidy styling.
Starting code for this tutorial
As with most of the other Bootstrap tutorials, I started with the same template that we created in tutorial 3. Inside of a container, a row and a div taking up 12 columns.
Creating a form
By creating a
.form-group inside of the form tag, bootstrap will apply responsive styling and some nice neat padding between the label and the input element.
<form action="" method="">
<div class="form-group">
<!-- label here -->
<!-- input here -->
</div>
</form>
Email and password fields
Input elements also need to have a class of
.form-control to add the Bootstrap theme styling, which makes it look a little better. This only needs to be applied to text, email or password fields.
<form action="" method="">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email"/>
</div>
</form>
File uploads
File uploads should also be in the form group to apply the correct spacing and styling, however they do not need the
.form-control class because that will apply a really funny looking border around it.
<div class="form-group">
<label for="file-upload">File upload</label>
<input type="file" id="file-upload"/>
</div>
Submit buttons
File uploads should also be in the form group to apply the correct spacing and styling, but no label is necessary here.
<div class="form-group">
<input type="submit" class="btn btn-default" id="submit" value="submit" />
</div>
Final code for the tutorial
Here is the final form code for the tutorial.
<form action="" method="">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"/>
</div>
<div class="form-group">
<label for="file-upload">File upload</label>
<input type="file" id="file-upload"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" id="submit" value="submit" />
</div>
</form>
In this tutorial we are going to be creating buttons with Bootstrap. Bootstrap buttons have multiple sizes, colors and can be created in with different tags.
The 4 different ways to create buttons with Bootstrap
Bootstrap allows us to create buttons links with the
<a> tag and a simple class. We can also create buttons with the<button> tag, and <input> tag. The <input> tag could have a type of “button” or type of “submit” which is where the 4th button comes from. The code below shows all four buttons.
<a href="#" class="btn btn-default">link</a>
<button class="btn btn-default">Button</button>
<input class="btn btn-default" type="button" value="input"/>
<input class="btn btn-default" type="submit" value="submit"/>
Buttons with contextual classes
Bootstrap allows us to use the secondary classes of
.btn-danger,.btn-success,.btn-warning or .btn-primary to our buttons to allow different colours. We even have a class to make a button appear as a link.
<button class="btn btn-default">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-danger">Button</button>
<button class="btn btn-warning">Button</button>
<button class="btn btn-info">Button</button>
<button class="btn btn-link">Button</button>
Buttons sizes
Bootstrap also has size classes for buttons so that we can create larger or smaller buttons by simply adding a class.
<button class="btn btn-default">Normal button</button>
<button class="btn btn-default btn-lg">Large button</button>
<button class="btn btn-default btn-sm">Small button</button>
<button class="btn btn-default btn-xs">Extra small button</button>
Bootstrap has the ability to make images responsive, as well as the ability to quickly create round corners or turn square images in to circular images with a simple class.
Starting code for this tutorial?
I’ve simply added a container, a row, and a column inside of the basic template we created in tutorial 3.
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
<!-- your resposnsive image here -->
</div>
</div>
</div>
Making a responsive images
Simply add the class
.img-responsive to your image and bootstrap will apply styling to make this image responsive. Responsive images scale to the width of their parent, you can test this out at different resolutions to see how it behaves.
<img src="your_file_path/your_image_name.jpg" class="img-responsive" />
Creating awesome image styles
Bootstrap has additional image classes available to quickly round corners, create circular images from square images or create an interesting thumbnail.
Rounded corners
<img src="your_file_path/your_image_name.jpg" class="img-responsive img-rounded" />
Circle images
<img src="your_file_path/your_image_name.jpg" class="img-responsive img-circle" />
Thumbnail images
<img src="your_file_path/your_image_name.jpg" class="img-responsive img-thumbnail" />
In this tutorial we’ll be taking a look at tables in Bootstrap. Bootstrap handles tables differently, in the way that it doesn’t apply any default styling. This is because there are many plugins/components that make use of tables and it would be really annoying if Bootstrap interfered with those.
Starting code for this tutorial
Since Bootstrap doesn’t apply any default styling to tables, I decided to start this tutorial off with the table below, inside of the basic template. For this tutorial, we’ll only be adding classes to the
<table> and <tr> tags, so to simplify things, I kept anything within these tags hidden in the video above.
<div class="container">
<div class="row">
<div class="col-xs-12">
<table>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Percentage/Year Mark</th>
</tr>
<tr>
<td>1</td><td>Sean</td><td>Pooley</td><td>92%</td>
</tr>
<tr>
<td>2</td><td></td><td>Schwulst</td><td>88%</td>
</tr>
<tr>
<td>3</td><td>Kyle</td><td>Beecham</td><td>86%</td>
</tr>
</table>
</div>
</div>
</div>
Adding styling to tables in Bootstrap
To add Bootstrap’s table styles to a table, all you have to do is simply add the
.table class to the <table> element, and your table instantly looks a lot better.
<table class="table">
Striped tables
To add a darker background to alternating rows we can use the
.table-striped class.
<table class="table table-striped">
Bordered tables
The
.table-bordered class will add a border around the entire table.
<table class="table table-bordered">
Adding a hover effect
Adding the
.table-hover class will add a hover effect to the table row that the mouse is currently hovering over.
<table class="table table-hover">
Condensed tables
Tables can also be condensed to take up less space with the
.table-condensed class.
<table class="table table-condensed">
Using multiple classes
It’s also possible to apply multiple classes to the same table, so you can have a condensed striped table.
<table class="table table-condensed table-striped">
Styling rows
Table rows also have specific classes. The
.active class can be used to mark an active row, and any one of the.danger.success.warning or .info contextual classes can be added to table rows to provide visual feedback to the user.
<tr class="active">
<tr class="success">Bootstrap has some very usefully styled typography and a range of additional versatile typography classes that can come in handy when creating an easy to read web page.
Starting code for this tutorial
In this tutorial we’ll be starting with a simple container, row and column inside of the simple page template that we created in tutorial 3.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 bg-danger">
<!-- your code here -->
</div>
</div>
</div>
Some basic typography
Headings, leading text and the small tag
All headings from
<h1> to <h6> are available in Bootstrap. Of course you know exactly what heading tags do, so I won’t bore you with the details, but it is worth mentioning that we can place a <small> tag around text in our heading to create some secondary text. The same can be done with paragraphs to create fine print.
<h1>This is a header<small>Secondary text</small></h1>
<p><small>Terms and conditions or fine print</small></p>
Since we have the power to make paragraph text smaller, we can also make it bigger to create a leading paragraph. This is useful for the first paragraph on a page.
<p class="lead"> This is a leading paragraph </p>
<p> This is a normal paragraph </p>
You can read more about Bootstrap’s default heading styling here.
Highlighted text, striked through text and deleted text
You might want to highlight text to make it stand out. Bootstrap’s default styling for the
<mark> tag does exactly that. The next to tags are a little tricky, because although they look the same visually, they have semantically different meanings.- The
<del>tag means that text is removed or deleted from the document - The
<s>tag means that the text within is no longer accurate or relevant
You can <mark>highlight</mark> text using the <mark>mark</mark> tag.
<del>Deleted text</del>
<s>Striked through text</s>
Aligning text
Bootstrap includes some alignment classes that let you easily align text to the left, right, center or even justify it.
<p class="text-left">Left aligned text.</p>
<p class="text-left">Centered text.</p>
<p class="text-left">Right aligned text.</p>
<p class="text-left">Justified aligned text.</p>
Transforming text
You can quickly transform upper case and lowercase text using Bootstraps
.text-uppercase or .text-lowercase classes.
<p class="text-uppercase">this is uppercase</p>
<p class="text-lowercase">THIS IS LOWERCASE</p>
Blockquotes and reverse blockquotes
In html you can quote someone with a blockquote, but sometimes you might want to reverse that blockquote to display on the right hand side. Bootstrap takes care of this with a useful class.
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<footer>Someone famous</footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<footer>Someone famous</footer>
</blockquote>Sometimes you might want to change the order of columns on your website depending on screen size, this can be done using Bootstrap’s push and pull classes. A great example of this, is if you want an image to the right and text to the left on a desktop, but want to swap these around on a mobile device.
Starting code for this tutorial
Start by creating 2 column’s inside of your the basic template we made in tutorial 3. I’ve created a smaller 4 column div on the left, and a larger 8 column div to the right.
<div class="container">
<div class="row">
<div class="col-md-4 bg-danger">
column 1
</div>
<div class="col-md-8 bg-success">
column 2
</div>
</div>
</div>
Changing column order with Push and Pull classes
We can change the order of these columns with Bootstraps Push and Pull classes,
.col-md-pull-* or col-md-push-*. The “*” would be the number of columns to push or pull the column by.
To swap these columns around, we need to push our first div over by 8 columns by adding the class
.col-md-push-8because the “column 2” is 8 columns in width. Then we need to pull “column 2” 4 columns to the left with .col-md-pull-4 to fill up the space left by column 1. This should evenly swap both columns on any medium sized devices or larger.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 bg-danger">
column 1
</div>
<div class="col-md-8 col-md-pull-4 bg-success">
column 2
</div>
</div>
</div>
Creating a background image
As a practical example of where this could be used in the real world, I created a background image using custom CSS. This isn’t 100% related to Bootstrap but it demonstrates a good use for the push and pull method shown above.
Adding a custom CSS file
Start by linking a custom CSS file to your web page. I created a file called “main.css” which I added to my CSS folder along with all the other Bootstrap css files.
<!-- This is my CSS file -->
<link rel="stylesheet" href="css/main.css">
Create a custom background image class
After creating my css file, I added the following class to my CSS file.
.bg-cover{
background:url(../images/your-image-name.ext);
height:300px;
background-size:cover;
}
Add the class to your column
Once the class was created, all I had to do was add it to the column where I wanted my image to be displayed. I also removed the Bootstrap background color contextual class.
<div class="col-md-4 col-md-push-8 bg-cover">
bootstrap,
css,
tutorial
Bootstrap-3 tutorial 6 – Nesting the Bootstrap grid
11:55 PM Admin 0 CommentsIn this tutorial you will be “nesting the Bootstrap grid”. This is when you place 1 or more columns inside of another to make a grid within a grid.
Starting code for this tutorial
We’ll be starting with the code below, placed inside of the basic template that we created in tutorial number 3.
<div class="container">
<div class="row">
<div class="col-lg-12 bg-success">
<p>This is an other div</p>
<!-- your code here -->
</div>
</div>
</div>
Nesting the Bootstrap grid
To nest your content within the default grid, you simply add in a new
.row, and a set of columns with any break point of your choice, the default Bootstrap behavior for normal columns will apply to all nested columns as well. I’ve chosen.col-lg-6 and nested it inside another column that has a class of .col-lg-12. This means that the parent column will take up the full width of the grid, while the child column should only take up half of it’s parent width.
Please note that I forgot to add the at the beginning of my video tutorial, but I added it in towards the end. Documentation on the Bootstrap site advises that this class should be used. This will get rid of the problem that I address in the last 2 minutes in the video above.
<div class="container">
<div class="row">
<div class="col-lg-12 bg-success">
<p>This is an other div</p>
<div class="row">
<div class="col-lg-6 bg-primary">
<p>This is an inner div</p>
</div>
</div>
</div>
</div>
</div>
An important note to remember is that a child column’s width is determined by the width of it’s parent, and not the width of main grid. This mean’s that if we change the width of the parent, the child column will be affected as well. You can see the example in the code below and refer to 3:10 in the video above for an example.
<div class="container">
<div class="row">
<div class="col-lg-6 bg-success">
<p>This is an other div</p>
<div class="row">
<div class="col-lg-6 bg-primary">
<p>This is an inner div</p>
</div>
</div>
</div>
</div>
</div>
bootstrap,
css,
tutorial
Bootstrap-3 tutorial 5 – Using the Bootstrap grid
11:38 PM Admin 0 CommentsIn this tutorial we finally start using the Bootstrap grid. Now that you understand the concept behind the grid, and how it works, you can start creating columns and rows.
Creating a container
Generally, you will always use the bootstrap grid inside of a container that determines the max width of your website. Bootstrap has 2 containers available to use by default. A “container” with a max width and a “fluid container” which will always fit the width of the browser.
Creating a container
The Bootstrap container has a maximum width which is determined by each breakpoint, you can see more about thesegrid options here. This means that content will always be centered with white space on each side.
<div class="container">
...
</div>
Creating a fluid container
The fluid container will scale to fit the browser width, which is useful for creating full-width slideshows or rows with background images.
<div class="container-fluid">
...
</div>
Using the bootstrap grid
Once you have your container in place, the next step is to create a new row, and inside of that we can create our columns. You’ll notice my column is suffixed with a break point and a column size.
<div class="container">
<div class="row">
<div class="col-lg-1">
...
</div>
</div>
</div>
Making use of break points
Each column class is made out of 3 hyphenated parts.
col-lg-1col lets bootstrap know that we are using a column.
The next part,
lg sets the break point for a certain size screen. This can be lg for large screens, md for medium screens,sm for small screens and xs is for extra small screens.
The final part is just a number and could be any number between 1 and 12. This determines how wide your column will be at each break point.
You’ll find that you might want to define a different column width for each break point. To do this you can simply add an extra class for each break point as demonstrated below. If no rule is defined for a break point, then Bootstrap will use the rule you defined for a smaller break point or it will default to stacking the columns.
<div class="container">
<div class="row">
<div class="col-lg-1 col-xs-4">
...
</div>
</div>
</div>
bootstrap,
css,
tutorial
Bootstrap-3 tutorial 4 – The Bootstrap grid explained
11:31 PM Admin 0 CommentsThe Bootstrap grid explained, just in case you didn’t know the difference between a column and a row, or how columns work. This is mostly a video tutorial, not much coding done here.
The Bootstrap grid
Just like I explain in the video. Bootstrap by default has 12 columns, and no matter what screen size you are using, bootstrap will have 12 columns from left to right. As the screen gets smaller, the columns get narrower to fit the size of the screen. This means that eventually, some columns might get too small to fit next to each other, and have to stack one on top of the other.
Bootstrap break points
Break points are where are screen resolutions where Bootstrap decides to allow you to have an alternative layout. This is where you get decide what elements should start stacking.
By default, Bootstrap has 4 break points.
Extra Small – Anything less than 768px, which would be mobile phones and small tablets.
Small – Anything between 768px and 992px, which is an iPad portrait screen, or another big tablet.
Medium – Anything between 992px and 1200px, which are iPads, or other tablets in landscape mode and old square monitors.
Large – Anything above 1200px, which would be a widescreen laptop or desktop.
Small – Anything between 768px and 992px, which is an iPad portrait screen, or another big tablet.
Medium – Anything between 992px and 1200px, which are iPads, or other tablets in landscape mode and old square monitors.
Large – Anything above 1200px, which would be a widescreen laptop or desktop.
Useful resources
You can visit the following link for more information about the Bootstrap grid.
bootstrap,
css,
tutorial
Bootstrap-3 tutorial 3 – Installing Bootstrap locally
11:30 PM Admin 0 CommentsGet your basic HTML template set up
To keep things simple and to show you just how similar this is to the last tutorial, I will be starting with the same code we finished with there.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Installing Bootstrap locally </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();"> Click me! </button>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Download Bootstrap and JQuery
Downloading Bootstrap
Lets start off by downloading the Bootstrap files here. You will notice there are 3 different packages available to download. Since I haven’t covered LESS or SASS, make sure to choose the standard “Bootstrap” package. If you’re really not sure, it will say “Compiled and minified CSS” in the description.
Downloading jQuery
You can download the jQuery files here. If you would like to support ie 6, 7, and 8 then make sure to choose a version of jQuery 1. Otherwise feel free to use jQuery 2 but some steps may differ slightly from my tutorial.
I chose the compressed, production version of jQuery 1. This means that all the spaces have been taken out of the code to make the file as small as possible to load faster. When you click on the link, a page should open with all of the code. Don’t be alarmed, simply copy all of it as I do in the video above, and then paste it into your text editor to save the file in the correct location.
The file structure
Once I had the files downloaded I decided to change my files structure a little bit. See the image below, or the video above for more detail. I decided to put jQuery with my other Bootstrap js files to keep things simple. So I had a directory for JavaScript files, a directory for CSS, a directory for fonts, and later on in the series I added a directory images.
Changing the file paths
Below you can see the new file paths to each file. If you have set up your file structure identical to mine, then everything should work perfectly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Installing Bootstrap locally </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();"> Click me! </button>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
bootstrap,
css,
tutorial
Bootstrap-3 tutorial 2 – Installing Bootstrap using a CDN
11:21 PM Admin 0 CommentsIn this tutorial we’ll be installing Bootstrap using a CDN. Using a CDN is incredibly simple because all we do is place links to the files that we would like to use.
What is a CDN?
CDN stands for “Content Delivery Network” which is a server that hosts commonly used libraries or frameworks. One big advantage of installing Bootstrap using a CDN is that it could boost loading time for your website as the file may have been pre-cached by your users browser by other websites are using the same CDN version.
Where can I find more up to date links to the CDNs?
You might want to get the most up to date versions of both jQuery and Bootstrap from the following links.
Code for this tutorial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Installing Bootstrap using a CDN </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();"> Click me! </button>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
bootstrap,
css,
html,
tutorial
Bootstrap-3 tutorial 1 – Introduction to Bootstrap
11:20 PM Admin 0 Comments
Bootstrap is the most popular front end framework in the world right now, we’ll learn all about it in this video series. In this video I give you a quick demo of what is possible with Bootstrap, talk about some topics that I will be covering in this series.
What is Bootstrap?
Bootstrap is a CSS “front end framework”, which was created to make building responsive websites a much easier task. The idea behind this that you simply link some Bootstrap files to your website and simply add the correct classes to each element and your website is instantly responsive.
Of course, even though Bootstrap has an optional theme, you can always add your own custom CSS for a more custom look and feel.
What will this Bootstrap tutorial series cover?
In this series we will be covering the following topics:
- Installing Bootstrap onto your website.
- The Boostrap 12 column grid.
- Pushing an pulling columns
- Basic typography
- Responsive tables
- Responsive images
- Basic Bootstrap forms
- Various Bootstrap CSS components like:
- Jumbotrons and Wells
- Dropdowns
- Navigation and Navbars
- Various Bootstrap JavaScript components like:
- Collapsable boxes
- Modals
- A carousel
That’s all for now. See you in the next Bootstrap tutorial.
Javascript Code
Contains javascript code. $("#zoom").change(funtion(){}- zoom is the id name of the select box. Using $("#zoom").val(); calling select box value. Applying style at $("#main").css
$(document).ready(function(){
$("#zoom").change(function()
{
var size = $(this).val();
$("#main").css('font-size', size+'px');
return false;
});
});
This is a Simple JQuery Tutorial using the .css() and .change()
The above is the Html Content and it has a select box #zoom with some values and the div with id #main along with the content "Website Content". In the select box each of the option having some different set of values in that while changing the select box the jquery script will trigger at the time the value of the select option will get and then using the div #main id we are changing the div font-zise using the .css() function.
See the Pen pvWyQE by Arun Yokesh (@yokesh) on CodePen.
<select id="zoom"> <option value="25">25 </option> <option value="50">50 </option> <option value="75">75 </option> <option value="100">100 </option> <option value="150">150 </option> <option value="200">200 </option> </select> <div id="main"> Website Content </div>
The above is the Html Content and it has a select box #zoom with some values and the div with id #main along with the content "Website Content". In the select box each of the option having some different set of values in that while changing the select box the jquery script will trigger at the time the value of the select option will get and then using the div #main id we are changing the div font-zise using the .css() function.
See the Pen pvWyQE by Arun Yokesh (@yokesh) on CodePen.
css,
delicious,
facebook,
google,
Jquery,
stumbler
Create a Social Media Sharing Menu Using CSS and jQuery
9:26 PM Unknown 2 CommentsCreate the HTML
1 Let’s create the HTML first. Here is our markup.
<div id="social_nav_horizontal">
<h3> Bookmark or Share This Post </h3>
<ul>
<li><a class="delicious" href="http://del.icio.us/post?url=Your website title" title="Bookmark on del.icio.us">Delicious</a>
<li><a class="facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com" title="Share this on Facebook" >Facebook</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/" title="Stumble This Page" > Stumble</a></li>
<li><a class="twitter" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName" title="Tweet This Page" >Twitter</a></li>
</ul>
</div>
Style the HTML with CSS
This is how our menu looks without any CSS.
#social_nav_horizontal {
margin-left: 100px;
font-family: Futura, Verdana, Sans-Serif;
font-size: 18px;
color: #8e9090;
}
#social_nav_horizontal h3 {
display:inline;
padding: 0px 10px;
border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
margin: 0;
padding: 0;
margin-top:20px;
}
#social_nav_horizontal ul li {
float: left;
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
}
#social_nav_horizontal ul li a {
padding: 4px 0 0 28px;
height: 32px;
color: #999;
text-decoration: none;
line-height: 1.45em;
}
CSS Styling Radio Button And Checkboxes
Now we want to do this without using Javascript or JQuery. Just plain HTML and CSS. Nothing fancy.
Lets dive into code.
1. The HTML
The HTML should looks pretty much like HTML. Nothing fancy here either. Just a bunch of radiobuttons following by labels.
<input type="radio" id="radio1" name="radios" value="all" checked> <label for="radio1">iPhone</label><input type="radio" id="radio2" name="radios"value="false"> <label for="radio2">Galaxy S IV</label><input type="radio" id="radio3" name="radios" value="true"> <label for="radio3">Nexus S</label> |
2. The CSS
Now the magic is in CSS. We want to change the look n feel of traditional radiobuttons into sexy pushbuttons.
Before we see the CSS, lets check one important CSS selector which you might not know already. It is called Adjacent sibling selectors. The idea is to select an element next to another element using syntax E1 + E2. So if I write a CSS code like:
div + p { color: red;} |
This should select only those
<p> elements which are adjacent (i.e. next to) <div> tags! This can come handy in lot of scenarios when you want to apply certain style to element based on their sequence.
So now we got the idea and know how Adjacent selector is used, lets apply that in our problem at hand.
/* Hide radio button (the round disc) we will use just the label to create pushbutton effect*/input[type=radio] { display:none; margin:10px;}/* Change the look'n'feel of labels (which are adjacent to radiobuttons). Add some margin, padding to label*/input[type=radio] + label { display:inline-block; margin:-2px; padding: 4px 12px; background-color: #e7e7e7; border-color: #ddd;}/* Change background color for label next to checked radio button to make it look like highlighted button*/input[type=radio]:checked + label { background-image: none; background-color:#d0d0d0;} |
3. More CSS
Lets add some more style to these radiobuttons and make them look more pushbutton’ish. Style courtesy Twitter Bootstrap :D
input[type=radio] { display:none;}input[type=radio] + label { display:inline-block; margin:-2px; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: #333; text-align: center; text-shadow: 0 1px 1px rgba(255,255,255,0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; background-image: -moz-linear-gradient(top,#fff,#e6e6e6); background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); background-image: -o-linear-gradient(top,#fff,#e6e6e6); background-image: linear-gradient(to bottom,#fff,#e6e6e6); background-repeat: repeat-x; border: 1px solid #ccc; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-bottom-color: #b3b3b3; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);}input[type=radio]:checked + label { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); background-color:#e0e0e0;} |