Tất cả bài viết | Bootstrap
Hướng dẫn cách tạo Box Icon bằng Bootstrap
Trong bài học lập trình Bootstrap này các Bạn sẽ được Hướng dẫn cách tạo Box Icon bằng Bootstrap cho website
Bước 1: Tạo cấu trúc HTML
Bước 2: Tạo cấu trúc CSS
.box > .icon { text-align: center; position: relative;}.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: rgb(170,196,196); vertical-align: middle;}.box > .icon:hover > .image { background: #6CB4C4;}.box > .icon > .image > i { font-size: 36px !important; color: #fff !important;}.box > .icon:hover > .image > i { color: white !important;}.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0;}.box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white;}.box > .icon > .info > h3.title { font-family: "Quicksand", sans-serif !important; font-size: 28px; color: #222; font-weight: 500;}.box > .icon > .info > p { font-family: "Quicksand", sans-serif !important; font-size: 15px; color: #666; line-height: 1.5em; margin: 20px;}.box > .icon > .info > .more a { font-family: "Quicksand", sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none;}.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C;}.box .space { height: 2px; background-color: #6CB4C4;}.btn-default { font-family: "Quicksand", sans-serif; background-color: #75b1ae; color: #FFFFFF;}.btn-default a:link { text-decoration:none; color:#000000;}.btn-default a:visited { text-decoration:none; color:#FFFFFF;}
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (4490) Học thiết kế web giá rẻ
