Introduction
For card style's design, we can use CSS Grid as I mentioned on Day 1.
However, we have to use Media query to complete the layout for the mobile version. One of advantages for using Bootstrap Card is that we don't have to write Media query additionally.
Implementations
Screen shot for the desktop version
Screen shot for the mobile version
Code
- HTML
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="views/js/articles.js" ></script>
...
<div class="container">
<div id="medium" class="row item"></div>
</div>
- JavaScript (append child nodes dynamically by AJAX)
...
function appendArticleChild(ele) {
var div = document.createElement('div');
div.className = 'col-md-6 col-xs-12'
var card = document.createElement('div');
card.className = 'card'
var cardBody = document.createElement('div');
cardBody.className = 'card-body'
var cardTitle = document.createElement('h1');
cardTitle.className = 'card-title'
var cardBlock = document.createElement('div');
cardBlock.className = 'card-block'
cardBody.appendChild(cardTitle)
cardBody.appendChild(cardBlock)
card.appendChild(cardBody)
div.appendChild(card)
}
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
Top comments (0)