- Always Keep buttons as per following style.
<button type="button" class="btn btn-primary">New</button>
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-info">Refresh</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Delete</button>
Body structure of html page
asp:Content ID="HeaderContent" is a content region. Anything within that tag will get embedded in the associated ContentPlaceHolder in the master page when it is generated. head is a standard html markup, indicating the page head elements.
UpdatePanel controls are a central part of AJAX functionality in ASP.NET. They are used with the ScriptManager control to enable partial-page rendering. Partial-page rendering reduces the need for synchronous postbacks and complete page updates when only part of the page has to be updated.
The ContentTemplate property contains the content that appears inside an UpdatePanel control when it is rendered. You can create the template's content declaratively or programmatically. The content template of an UpdatePanel control is a single-instance template.
The section tag is used when requirements of two headers or footers or any other section of documents needed. Section tag grouped the generic block of related contents. The main advantage of the section tag is, it is a semantic element, which describes its meaning to both browser and developer.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
container-fluid class provides a full-width container which spans the entire width of the viewport.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="Server">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<section class="content">
<div class="messagealert col-lg-9 col-md-11 col-xs-11 col-sm-11" id="alert_container"></div>
<%--title section--%>
<div class="block-header">
<h3>Student Registration</h3>
</div>
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card ">
<div class="body">
<div class="container-fluid">
<ul class="nav nav-tabs tab-nav-right tab-col-deep-purple" role="tablist">
<li role="presentation" class="active"><a href="#form" data-toggle="tab">Form</a></li>
<li role="presentation"><a href="#register" data-toggle="tab">Register</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="form">
<h1>Tab 1 Body</h1>
</div>
<div role="tabpanel" class="tab-pane fade" id="register">
<h1>Tab 2 Body</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%--content section--%>
</section>
</ContentTemplate>
<Triggers>
<%-- <asp:PostBackTrigger ControlID="btnSave" />--%>
</Triggers>
</asp:UpdatePanel>
</asp:Content>
output
Box Body Strcture
<div class="box box-default">
<div class="box-header with-border bg-green-gradient">
<strong>Personal Details </strong>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<b>Email ID</b>
<asp:TextBox ID="txtEmailAddress" runat="server" CssClass="form-control" ReadOnly="true" Text="NA"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<b>Staff ID</b>
<asp:TextBox ID="txtStaffID" runat="server" CssClass="form-control" ReadOnly="true" Text="NA"></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<b>Marital Status</b>
<asp:TextBox ID="txtMaritalStatus" runat="server" CssClass="form-control" ReadOnly="true" Text="NA"></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<b>Mobile No</b>
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" ReadOnly="true" Text="NA"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
differnt box bodys
<div class="box box-default">...</div>
<div class="box box-primary">...</div>
<div class="box box-info">...</div>
<div class="box box-warning">...</div>
<div class="box box-success">...</div>
<div class="box box-danger">...</div>
output
