Chapter 8 - Bootstrap 3 - Headings (Typography)

Like the normal html you can your headings in the bootstrap all the h1 to h6 tags are available in the bootstrap 3. There is also one advantage if you want to give the same heading style to another element text. you can user the class .h1 to .h6 by doing this you get the the same style of heading in the element in display inline. There is another inbuilt feature in the html to attach the subheading text within the heading text.

These are six levels of headings in the html. a heading have their own different font size, like break before and after the heading text and also white space to represent the heading.The heading tags are h1, h2, h3, h4 ,h5, h6 in these tags the h1 is the most important and largest level of the heading and the h6 is the least important and very small in size in the headings.

h1, h2, h3, h4, h4 and h6 tags usages

            <div class="container">
<div class="row">
<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>
</div>
</div>


Now the one for example using the bootstrap heading classes .h1, .h2, .h3 .h4, .h5 and .h6 with div elements.

heading classes .h1, .h2, .h3, .h4, .h5 and .h6 usages

<div class="container">
<div class="row">
<div class="h1">Heading 1</div>
<div class="h2">Heading 2</div>
<div class="h3">Heading 3</div>
<div class="h4">Heading 4</div>
<div class="h5">Heading 5</div>
<div class="h6">Heading 6</div>
</div>
</div>

In the below example you can see the headings secondary text using small tag or .small class.

Heading secondary text using small tag or .small class

Chapter 7 - Bootstrap 3 - Column ordering or push and pull columns

How to change the ordering of the columns in the row in the bootstrap?

OR

How the push and pull column classes used?

There are inbuilt classes for ordering the columns of the grid in the row div. There some classes .col-md-push-* and .col-md-pull-* we can use the number 0-11 to pull and with the push classes. To more understand. we use an example of 12 rows columns. Now to inverse the order of columns  we will use the standards bootstrap push pull classes. To understand clearly we use the some colors and text numbers for this columns. First we created 12 columns and place numbers from one to twelve in the ascending order. Now we change the order and the column will display the inverse order twelve to one.

For Example we have requirements:-

1. We have twelve columns in a row with the different colors. Each have number in the ascending order 1-12.
2. Change the order in the inverse. using the order classes push and pull show the div in the descending ordering text. it means placed 1 text div will show in the 12th position column in the row grid.
3. Similar all the other div change the order in the descending order but the html code should be in the ascending order.

Before ordering

After ordering classes

<div class="container">
<!-- BEFORE ORDERING -->
<div class="row">
<div class="col-md-1 red">1</div>
<div class="col-md-1 green">2</div>
<div class="col-md-1 blue">3</div>
<div class="col-md-1 orange">4</div>
<div class="col-md-1 gray">5</div>
<div class="col-md-1 magenta">6</div>
<div class="col-md-1 red">7</div>
<div class="col-md-1 green">8</div>
<div class="col-md-1 blue">9</div>
<div class="col-md-1 orange">10</div>
<div class="col-md-1 gray">11</div>
<div class="col-md-1 magenta">12</div>
</div>
<!-- AFTER ORDERING -->
<div class="row">
<div class="col-md-1 col-md-push-11 red">1</div>
<div class="col-md-1 col-md-push-9 green">2</div>
<div class="col-md-1 col-md-push-7 blue">3</div>
<div class="col-md-1 col-md-push-5 orange">4</div>
<div class="col-md-1 col-md-push-2 gray">5</div>
<div class="col-md-1 col-md-push-2 magenta">6</div>
<div class="col-md-1 col-md-pull-1 red">7</div>
<div class="col-md-1 col-md-pull-3 green">8</div>
<div class="col-md-1 col-md-pull-5 blue">9</div>
<div class="col-md-1 col-md-pull-7 orange">10</div>
<div class="col-md-1 col-md-pull-9 gray">11</div>
<div class="col-md-1 col-md-pull-11 magenta">12</div>
</div>
</div>

Whats new in wordpress 4.4 ?

The Wordpress 4.4 going to release in the december 2015. There are lots more features in the wordpress 4.4 a new release with new advanced features inbuilt. There are new features regarding the theme, embed, REST API, metadata, improved functions and comments related features.

1. Theme - This version of wordpress will come with the the Twenty Sixteen theme of coming year.

2. Embed rich content - You can now embed the rich content from all the site that support the oEmbed standards. Previously we can only embed YouTube, Flicker, Twitter etc. But now in this new version you can also embed the previews of the posts of other wordpress sites. you can simply need to add the url of page of that wordpress site.

3. Images responsiveness - The new version of the wordpress will response the images according to the screen resolutions. the mechanism will work according the the multiple conditions like screen resolution, view port size and screen sizes.

5. Title improvement - Now this new version the time method deprecated with the more comprehensive way to generate the title. Now there is more possibilites to improve out title of the pages and posts.

6. Term metadata - Previus versions there is a feature team texonomy for the posts categories and tags etc. But in new wordpress we can use the the term metadata. And when work with the term metadata don't forgot to use the WP_Term class to improve the usability and fast processing.

7. Comments - Considering the performance of the comments the new worpress split the devvelopment of the comments functionality. And also introduce the WP_Comments class to improve the performance of the comments functionality and caching.

8. REST API -  The under developemnt work of the REST API of the release with new version. The Developer of the new api can take advantages of the these new coming features with this REST API.

Start downloading and installing the wordpress 4.4 and take the advantages of all the new added features. Use this powerfull plate form to grow your business. All hte latest updates and documentations are available at official blog of the wordpress. Also in the wordpress support you cna complain about the bug of the wordpress.

Sort Functions For Arrays Using PHP ?

The array function used for arrangement of elements in ascending ,descending (lower to higher) and  alphabetical or numerical order. In the Php has several functions are used for sorting the array.

There are many sorting methods in PHP are followings.

sort() :- Sort function  is used for arrangement of array in ascending order. Example :-

<?php $name = array("Rahul", "Mukesh", "Sonu"); sort($name); $nlength = count($name); for($x = 0; $x <  $nlength; $x++) {  echo $name[$x] ."<br>" ;  } ?>

Output:-   

Mukesh Rahul Sonu

rsort() :- Rsort function is used for arrangement of array in descending order

Example :-

<?php $name = array("Rahul", "Mukesh", "Sonu"); rsort($name); $nlength = count($name); for($x = 0; $x <  $nlength; $x++) { echo $name[$x] . "<br>" ; } ?>

Output:-

Sonu Rahul Mukesh

asort() :- Asort function  is used for sorting the array in ascending order and maintain the index of each array.

Example :-

<?php$colors = array("b" => "red", "c" => "orange", "a" => "blue", "d" => "green"); asort($colors); foreach ($colors as $key => $col) { echo "$key = $col \n"; } ?> Output :- a = blue d = green c = orange b = red

ksort() :- Ksort function is used for sorting the array in ascending order according to   key  of  the element. Example :-  

<?php $colors = array("b" => "red", "c" => "orange", "a" => "blue", "d" => "green"); ksort($colors); foreach ($colors as $key => $col) { echo "$key = $col \n"; } ?> Output :-

a = blue b = red c = orange d = green

arsort() :-  Arsort  function  is used for sorting the array in descending order and according to value of array elements. Example :- <?php $colors = array("b" => "red", "c" => "orange", "a" => "blue", "d" => "green"); arsort($colors); foreach ($colors as $key => $col) { echo "$key = $col \n"; } ?> Output :- b = red c = orange d = green a = blue

krsort() :-  Krsort  function  is used for sorting the array in descending order and  according to key  of array elements. Example :- <?php

$colors = array("b" => "red", "c" => "orange", "a" => "blue", "d" => "green"); krsort($colors); foreach ($colors as $key => $col) { echo "$key = $col \n"; } ?> Output :-d = green c = orange b = red a = blue