Pages

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Thursday 8 October 2015

How to make Tab using Bootstrap?

making tab in bootstrap is very simple, it just take a minute to understand this simple code...


<!--Start  tabs -->
<div>
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">hello babby</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>
<!--End  tabs -->

<script>
$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

</script>

How to make Responsive Design using Bootstrap?

   
Follow these basic steps to get started to bootstrap design.

       1.      Use DOC into head in HTM5 before start the <html> Tag
             <!DOCTYPE html>
2.       Add language into HTMl tag
<html lang="en">

3.       Use Meta information likes:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1;maximum-scale=1.0, user-scalable=no"">               

4.       Download or use online CSS from Bootstrap:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

5.       Download or use online JS from Bootstrap:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

6. Download bootstrap from here

Friday 7 June 2013

Fade background screen while loading

CSS:-

<style>
   .overlay 
{
position: fixed;
background-image:url('../images/loadingnew.gif');
background-repeat:no-repeat;
background-position:center;
background-color:Black;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.2;
-moz-opacity: 0.2;
filter: alpha(opacity=20);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
z-index: 10000;
}
</style>


Now at your design page just use a Update Progress like this- 

  <asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="true">
          <ProgressTemplate>
               <div class="overlay"></div>
          </ProgressTemplate>
        </asp:UpdateProgress>

Don't forget to declare ScriptManager in your design page, and place your controls in UpdatePanel.
On the click event of button use this code-

        System.Threading.Thread.Sleep(2000);