loading...
Cover image for Day 16 of #100DaysOfCode: Design a Layout for Articles with Bootstrap Card

Day 16 of #100DaysOfCode: Design a Layout for Articles with Bootstrap Card

jenhsuan profile image Jen-Hsuan Hsieh ・2 min read

Introduction

For card style's design, we can use CSS Grid as I mentioned on Day 1.
Alt Text
Alt Text

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

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!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh

@jenhsuan

6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.

Discussion

markdown guide