Bootstrap Case: Thêm Nút Button Và Icon

Có thể bạn quan tâm

Chia sẻ mọi kiến thức trong nhiều lĩnh vực và cuộc sống

Dịch vụ thiết kế web, tư vấn thiết kế web, SEO liên hệ Công ty thiết kế web chuyên nghiệp, chuẩn SEO. Email: info@osvn.com.vn website: www.osvn.com.vn - www.ithietkeweb.net

Home
Lập trình
- WEB
- SEO
- BLOG
Liên Kết
- Thiết kế web Hà Nội
- Thiết kế web Đà Nẵng
- Thiết kế web Hải Phòng
- Công ty thiết kế web
- Dịch vụ thiết kế web
Tin Tức
Du Lịch
Công nghệ

♠ Posted by Hà Phạm in Bootstrap,Bootstrap container,button,học Bootstrap,học thiết kế web,icon,Thêm nút Button và Icon at 9:00 AM Ở bài viết trước, học thiết kế web đã chia sẻ đến các bạn đưa một thông tin quan trọng hơn vào Jumbotron. Hôm nay, các bạn sẽ được tìm hiểu về cách làm nền cho những nút Button thật đơn giản và có thể có cả icon cho nó mà không mất nhiều thời gian để chỉnh sửa như trước đây ta vẫn làm.

Thêm một Button

Để sử dụng một nút, chỉ cần viết class = "btn btn-default".Chúng ta có thể sử dụng nó trong thẻ <button>:

<button type="button" class="btn btn-default">Button Text</button> hoặc trong một liên kết: <ahref="..."class="btn btn-default">Button Text</a> Các Class Button khác là: .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, and .btn-link (đại diện cho tất cả các màu sắc khác nhau cho các nút).Kích thước nút có thể được xác định với các class sau: .btn-lg (large button), .btn-sm (small button), and .btn-xs (extra small button). Ví dụ sau đây sẽ đặt một Button "Search" lớn và nền màu xanh trong hộp Jumbotron. Để đạt được hiệu ứng này, chúng tôi sẽ sử dụng các class .btn-lg và .btn-info:Ví dụ:

<div class="container"> <div class="jumbotron"> <h1>My first Bootstrap website!</h1> <p>This page will grow as we add more and more components from Bootstrap...</p> <a href="#" class="btn btn-info btn-lg">Search</a> </div></div> Kết quả

Thêm một Icon

Bootstrap cũng có 200 glyphicons chúng ta có thể sử dụng miễn phí.Để hiển thị một biểu tượng icon, bạn chỉ cần viết:

<span class="glyphicon glyphicon-print"></span> Dòng mã trên sẽ hiển thị một biểu tượng Print như thế này: Ví dụ sau đây thêm một biểu tượng tìm kiếm vào nút "Search":Ví dụ

<div class="container"> <div class="jumbotron"> <h1>My first Bootstrap website!</h1> <p>This page will grow as we add more and more components from Bootstrap...</p> <a href="#" class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-search"></span> Search </a> </div></div>

Kết quả

Code hoàn chỉnh <!DOCTYPE html> <html> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>My first Bootstrap website!</h1> <p>This page will grow as we add more and more components from Bootstrap...</p> <a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a> </div> </div> <div class="container"> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html> Thiết kế web tại Hà Nội chúc các bạn thành công!

Previous Article Next Article

0 comments:

Bán dụng cụ điện cầm tay Hàn Quốc

Liên kết hữu ích

May tro giang - Máy trợ giảng Hàn Quốc - Máy trợ giảng không dây - Máy trợ giảng chính hãng

Liên kết Đại lý Lexus VN

Đại lý Xe oto Lexus 2016 tại HNXem Bảng giá xe LexusMua xe:Lexus RX 350 mớiLexus ES 350 mớiLexus GS 350 mớiLexus ES 250 mớiLexus GX 460 mớiLexus NX 200T mớiLexus LS 460 mới

Danh Sách Liên kết

May rèm cửa
Bút gỗ khắc tên
Rem cua gia re

Tìm kiếm

Bài viết mới

Kho template miễn phí cho Blog và Website cực đẹp Một blog hay website có giao diện đẹp mắt sẽ luôn thu hút được một lượng lớn người đọc ghé thăm trang. Để có một giao diện đẹp mắt không khó...
Chọn ghế xoay văn phòng thế nào cho tốt? Để tạo điều kiện tốt nhất cho nhân viên phát huy hết khả năng của mình thì ban lãnh đạo cần đầu tư cho nhân viên những trang thiết bị, những...
Bootstrap là gì? Giới thiệu về Bootstrap Boostrap là gì ? Bootstrap 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 Bootstrap chứa HTML và C...
Bootstrap Case: Thêm nút Button và Icon Ở bài viết trước, học thiết kế web đã chia sẻ đến các bạn đưa một thông tin quan trọng hơn vào Jumbotron. Hôm nay, các bạn sẽ được tìm hiểu...
Ghế quầy bar đẹp cao cấp - Siêu thị ghế văn phòng Ghế quầy bar đang trở nên phổ biến hơn bởi vì phong cách đa dạng của nó không chỉ là hấp dẫn hơn so với các ghế thông thường mà nó còn mang...
Hướng dẫn sử dụng ghế xoay văn phòng Ghế xoay lưới ..là dòng sản phẩm quen thuộc nơi công sở, vì thế mà những chiếc ghế văn phòng này được thiết kế dựa trên những nghiên cứu sâ...
Bắt đầu với Bootstrap| Bootstrap Get Started Bài viết trước mình đã giới thiệu đến các bạn biết Bootstrap là gì ? Và như mình đã nói là đến bài hôm nay chúng ta sẽ bắt đầu với Bootstra...
Các trường hợp của Bootstrap- Container, Jumbotron Hôm nay, học thiết kế web sẽ cùng các bạn sang một chủ đề mới của Bootstrap đó là Bootstrap Case. Một Jumbotron chỉ ra một hộp lớn để gom...
50 best wordpress ecommerce themes Now i know that you are finding a Good Wordpres eCommerce Themes for your online Shop, i found some best WordPress eCommerce Themes so i th...
Không gian nội thất văn phòng đẹp và khoa học Trong tất cả các cơ quan, doanh nghiệp, văn phòng làm việc là nơi thể hiện bộ mặt của công ty là môi trường làm việc của nhân viên. Và đối ...