---
# System prepended metadata

title: Listview Grid
tags: [jQuery Mobile]

---

# Listview Grid

###### tags: `jQuery Mobile` 
---
:::danger
程式架構先寫好，再開始填內容
:::
```htmlembedded=
<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>
```

```htmlmixed=
<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>