# Listview Grid

###### tags: `jQuery Mobile`
---
:::danger
程式架構先寫好，再開始填內容
:::

<div data-role="page" id="ListviewGrid" class="my-page" data-theme="b">
    <!-- 在page寫上class="my-page"套用樣式 -->
    <div data-role="header" data-theme="b">
        <h1>ListviewGrid</h1>
    </div>
    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="ture">
            <li >
                <a href="#">
                <img src="" alt="" class="ui-li-thumb">
                <!-- 圖片套用ui-li-thumb樣式才會變成縮圖自適應 -->
                <h2></h2>
                <p></p>
                <p class="ui-li-aside"></p>
                </a>
            </li>
        </ul>
    </div>

<div data-role="page" id="ListviewGrid" class="my-page" data-theme="b">
    <div data-role="header" data-theme="b">
        <h1>ListviewGrid</h1>
    </div>
    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="ture">
            <li data-icon="location">
                <a href="#">
                <img src="http://fakeimg.pl/350x350/00CED1/FFF/" alt="" class="ui-li-thumb">
                <h2>H2 title</h2>
                <p>say something</p>
                <p class="ui-li-aside">ui-li-aside</p>
                </a>
            </li>
            <li data-icon="location">
                <a href="#">
                <img src="http://fakeimg.pl/350x350/00CED1/FFF/" alt="" class="ui-li-thumb">
                <h2>H2 title</h2>
                <p>say something</p>
                <p class="ui-li-aside">ui-li-aside</p>
                </a>
            </li>
             <li data-icon="location">
                <a href="#">
                <img src="http://fakeimg.pl/350x350/00CED1/FFF/" alt="" class="ui-li-thumb">
                <h2>H2 title</h2>
                <p>say something</p>
                <p class="ui-li-aside">ui-li-aside</p>
                </a>
            </li>
             <li data-icon="location">
                <a href="#">
                <img src="http://fakeimg.pl/350x350/00CED1/FFF/" alt="" class="ui-li-thumb">
                <h2>H2 title</h2>
                <p>say something</p>
                <p class="ui-li-aside">ui-li-aside</p>
                </a>
            </li>
        </ul>
    </div>
</div>

---
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>