Hướng dẫn thiết kế Box tin tức bằng Bootstrap
Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn thiết kế Box tin tức bằng Bootstrap
Bước 1: Tạo cấu trúc HTML
Hướng dẫn thiết kế Box tin tức bằng Bootstrap
Bước 2: Định dạng CSS
.glyphicon { margin-right:4px !important; }
.pagination .glyphicon {
margin-right:0px !important;
}
.pagination a { color:#555;}
.panel ul {
padding:0px;
margin:0px;
list-style:none;
}
.news-item {
padding:4px 4px;
margin:0px;
border-bottom:1px dotted #555;
}
Bước 3: Gọi thư viện Bootstrap, owl-carousele, Newbox
Bước 4: Gọi thư viện JQUERY
Bước 5: tạo hiệu ứng Slide bằng JQUERY
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 3,
autoplay: true, pauseOnHover:true,
direction: 'up',
newsTickerInterval: 4000,
onToDo: function () {
}
});
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true, navigation: false,
direction: 'down',
newsTickerInterval: 2500,
onToDo: function () {
}
});
$("#demo3").bootstrapNews({
newsPerPage: 3,
autoplay: false,
onToDo: function () {
}
});
});
