Sử dụng Bootsrap cho Link Button trong Asp.net
(Using Bootsrap to Link Button in Asp.net) - Với những người làm Web thì chắc ít nhiều đã nghe về Boostrap, đây là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn. Bootstrap là mã nguồn mở và có sẵn trên GitHub.
Nhờ Twitter Bootstrap những người làm Web sẽ giảm thiểu thời gian thiết kết html và css. Twitter Bootstrap định nghĩa sẳn các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình. Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng trên thế giới.
Hôm nay Thủ thuật tin học sẽ giới thiệu với các bạn cách áp dụng Bootsrap cho Link Button, nhờ các thư viện Bootstrap có sẵn các Link Button sẽ trở nên đẹp hơn, sinh động hơn, chuyên nghiệp hơn.
- B1: Download toàn bộ thư viện Bootstrap tại địa chỉ: Download
Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap, bên trong có 3 thư mục : css, img, js.
- B2: Tạo Project trong Microsoft Visual Studio 2010
- B3: Tạo file Button.css có nội dung phía dưới và Copy vào thư mục Styles trong Project vừa tạo.
.icon-add {
background-image: url(Images/Icon/add.png);
background-position: center
center;
height: 16px;
width: 16px;
}
.icon-edit {
background-image: url(Images/Icon/edit.gif);
background-position: center
center;
height: 16px;
width: 16px;
}
.icon-update {
background-image: url(Images/Icon/save.png);
background-position: center
center;
height: 16px;
width: 16px;
}
.icon-delete {
background-image: url(Images/Icon/delete.png);
background-position: center
center;
height: 16px;
width: 16px;
}
.icon-cancel {
background-image: url(Images/Icon/back.png);
background-position: center
center;
height: 16px;
width: 16px;
}
- B4: Tạo các thư mục Images trong thư mục Styles, và thư mục Icon trong thư mục Images vừa tạo.
- B5: Download các biểu tượng và Copy chúng vào thư mục Icon.
Bạn có thể tải về Biểu tượng bằng cách nhấn vào liên kết tải về dưới đây
- B7: Mở File Site.Master nhúng thêm các css và js Bootstrap vào Project, sau khi chèn xong mã HTML có dạng.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css"
rel="stylesheet"
type="text/css"
/>
<link href="~/bootstrap/css/bootstrap.css"
rel="stylesheet"
type="text/css"
/>
<link href="~/Styles/Button.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript"
src="~/bootstrap/js/bootstrap.js"></script>
<asp:ContentPlaceHolder
ID="HeadContent"
runat="server">
</asp:ContentPlaceHolder>
</head>
- B8: Mở file Default.aspx nhập vào các mã HTML phía dưới.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Sử dụng
Bootsrap cho Link Button trong Asp.net
</h2>
<h3>Button Size</h3>
<h4>
Default
</h4>
<div class="btn-group">
<asp:LinkButton ID="cmdAddNew"
CssClass="btn"
CommandName="Add"
CausesValidation="true"
runat="server">
<i class="icon-add"></i> <asp:label id="lblAdd" runat="server" Text="Add"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdUpdate"
CssClass="btn"
CommandName="Update"
CausesValidation="true"
runat="server">
<i class="icon-update"></i> <asp:label id="lblUdate" runat="server" Text="Update"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdDelete"
CssClass="btn"
CommandName="Delete"
CausesValidation="false"
runat="server">
<i class="icon-delete"></i> <asp:label id="lblDelete" runat="server" Text="Delete"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdCancel"
CssClass="btn"
CommandName="Cancel"
CausesValidation="false"
runat="server">
<i class="icon-cancel"></i> <asp:label id="lblCancel" runat="server" Text="Cancel"></asp:label>
</asp:LinkButton>
</div>
<br />
<h4>
Small
</h4>
<div class="btn-group">
<asp:LinkButton ID="cmdAddNew_Small"
CssClass="btn
btn-small" CommandName="Add" CausesValidation="true" runat="server">
<i class="icon-add"></i> <asp:label id="lblAdd_Small" runat="server" Text="Add"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdUpdate_Small"
CssClass="btn
btn-small" CommandName="Update" CausesValidation="true" runat="server">
<i class="icon-update"></i> <asp:label id="lblUpdate_Small" runat="server" Text="Update"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdDelete_Small"
CssClass="btn
btn-small" CommandName="Delete" CausesValidation="false" runat="server">
<i class="icon-delete"></i> <asp:label id="lblDelete_Small" runat="server" Text="Delete"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdCancel_Small"
CssClass="btn
btn-small" CommandName="Cancel" CausesValidation="false" runat="server">
<i class="icon-cancel"></i> <asp:label id="lblCancel_Small" runat="server" Text="Cancel"></asp:label>
</asp:LinkButton>
</div>
<h4>
Mini
</h4>
<div class="btn-group">
<asp:LinkButton ID="cmdAddNew_Mini"
CssClass="btn
btn-mini" CommandName="Add" CausesValidation="true" runat="server">
<i class="icon-add"></i> <asp:label id="lblAdd_Mini" runat="server" Text="Add"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdUpdate_Mini"
CssClass="btn
btn-mini" CommandName="Update" CausesValidation="true" runat="server">
<i class="icon-update"></i> <asp:label id="lblUpdate_Mini" runat="server" Text="Update"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdDelete_Mini"
CssClass="btn
btn-mini" CommandName="Delete" CausesValidation="false" runat="server">
<i class="icon-delete"></i> <asp:label id="lblDelete_Mini" runat="server" Text="Delete"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdCancel_Mini"
CssClass="btn
btn-mini" CommandName="Cancel" CausesValidation="false" runat="server">
<i class="icon-cancel"></i> <asp:label id="lblCancel_Mini" runat="server" Text="Cancel"></asp:label>
</asp:LinkButton>
</div>
<h4>
Large
</h4>
<div class="btn-group">
<asp:LinkButton ID="cmdAddNew_Large"
CssClass="btn
btn-large" CommandName="Add" CausesValidation="true" runat="server">
<i class="icon-add"></i> <asp:label id="lblAdd_Large" runat="server" Text="Add"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdUpdate_Large"
CssClass="btn
btn-large" CommandName="Update" CausesValidation="true" runat="server">
<i class="icon-update"></i> <asp:label id="lblUpdate_Large" runat="server" Text="Update"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdDelete_Large"
CssClass="btn
btn-large" CommandName="Delete" CausesValidation="false" runat="server">
<i class="icon-delete"></i> <asp:label id="lblDelete_Large" runat="server" Text="Delete"></asp:label>
</asp:LinkButton>
<asp:LinkButton ID="cmdCancel_Large"
CssClass="btn
btn-large" CommandName="Cancel" CausesValidation="false" runat="server">
<i class="icon-cancel"></i> <asp:label id="lblCancel_Large" runat="server" Text="Cancel"></asp:label>
</asp:LinkButton>
</div>
</asp:Content>
Như vậy chúng ta đã hoàn thành việc tích hợp thư viện Bootstrap vào Link Button của Asp.net rồi đó.
Chúc các bạn thành công!
Quang Bình
Share This:
No Comment to " Sử dụng Bootsrap cho Link Button trong Asp.net "