Skip to main content

Bootstrap - 04

Responsive Web Design or Layout

Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user.
With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore the optimization of sites for mobile devices. Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much less efforts.
Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.
Bootstrap Responsive Design Illustration

Creating Responsive Layout with Bootstrap

With the new Bootstrap 3 mobile first grid system creating the responsive and mobile friendly websites has become much easier. As opposed to previous version you don't need to include any additional style sheet to enable responsive feature. Bootstrap 3 is responsive and mobile friendly from the start. Its four tiers grids classes provides better control over the layout as well as how it will be rendered on different types of devices like cell phones, tablets, desktop and laptops, large screen devices etc.
 <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
                        </button>
<a class="navbar-brand" href="#">Bootstrap Tutorial</a><h4>Raj</h4>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#">Contact</a></li>
                                 <li><a href="#">Test</a></li>
</ul>
</div>
</div>
</nav>


The Green color code will enable a menu button, when the resolution became smaller.





Comments

Post a Comment

Popular posts from this blog

Use Log4Net in C# windows form Application

we are going to learn on how to use the Log4Net library for creating logs. Create a new windows form application in VS. Install Log4Net library Add to AssemblyInfo.cs  Configure in  App.config Use in code  Install Log4Net library Then install the Log4Net library from the Nuget Package library.           log4net by The Apache software foundation 2.0.8 (i installed the latest). Add to AssemblyInfo.cs  After installing this package, open up AssemblyInfo .cs file under the Properties folder and add the log4net assembly information into it (under the other assembly information.).    [assembly: log4net.Config.XmlConfigurator(Watch= true )]  Configure in  App.config Now, open the App.config file and enter required details for LogNet to work. <configSections>       <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net, Version=1.2....
1 comment
Read more

#MVC : Why does Html.Label() not work with periods? or Why is @Html.Label() removing some characters

You are misusing the  Html.Label  method. It is for: Returns an HTML label element and the  property name of the property  that is represented by the specified expression. That's why it gets confused if you have a point  .  in the first parameter because it expects a property expression there. However, you can use the second overload: @Html . Label ( "" , String . Format ( "{0}. someText" , 1 )) Or just write out the HTML: <label> @String . Format ( "{0}. someText" , 1 )</ label > or <label class="WelcomeText" style="float: left">Welcome @Html.Label("", Model.USERID + " ( " + Model.ROLE + " )", new { @class = "WelcomeText" })</label> 
Post a Comment
Read more

#SQL CTE(Common Table expressions)

SQL Server 2005 and on wards, a very powerful feather has been added for the programmers' benefit called CTE. CTE is again a temporary result set derived from the underling definition.  Common Table Expressions offer the same functionality as a view, but are ideal for one-off usages where you don't necessarily need a view defined for the system. CTE offers the advantages of improved readability and ease in maintenance of complex queries . The query can be divided into separate, simple, logical building blocks. These simple blocks can then be used to build more complex, interim CTEs until the final result set is generated. Common Table Expression Syntax A Common Table Expression contains three core parts: The CTE name (this is what follows the WITH keyword) The column list (optional) The query (appears within parentheses after the AS keyword) The query using the CTE must be the first query appearing after the CTE. Syntax : WITH expression_name [ ( column_n...
Post a Comment
Read more