精品久久久久久亚洲精品_成人午夜网站_www日本高清_亚洲精品久久久久午夜福

列表群組（List group）

列表組是顯示一系列內(nèi)容的靈活而強(qiáng)大的組件。修改和擴(kuò)展它們以支持其中的任何內(nèi)容。

On this page

基本示例

最基本的列表組是一個(gè)無(wú)序的列表，其中包含列表項(xiàng)和適當(dāng)?shù)念?lèi)。在它的基礎(chǔ)上使用下面的選項(xiàng)，或者根據(jù)需要使用您自己的CSS。

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>

活動(dòng)項(xiàng)目

將.active加到.list-group-item指示當(dāng)前的活動(dòng)狀態(tài)。

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>

禁用項(xiàng)目

將.disabled加到.list-group-item使其呈現(xiàn)禁用。請(qǐng)注意，一些帶有.disabled的元素還需要自定義JavaScript才能完全禁用其點(diǎn)擊事件（例如：鏈接）。

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>

使用a或button，并加入.list-group-item-action來(lái)創(chuàng)建具有hover、禁用和啟用狀態(tài)的動(dòng)態(tài)列表群組。我們分離這些偽類(lèi)別，以確保由非交互元素組成的列表群組（如li或div）不提供點(diǎn)擊或觸擊。

確保不要在這里使用標(biāo)準(zhǔn)的.btn。

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

對(duì)于button，你也可以使用disabled屬性而不是.disabled class。不幸的是，a不支持disabled屬性。

<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

移除邊框及圓角

加入.list-group-flush來(lái)移除部分邊框及圓角，以在父容器中（如：卡片）產(chǎn)生邊緣貼齊的列表群組。

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>

編號(hào)

添加.list group numbered修飾符類(lèi)（并可選地使用ol元素）以選擇編號(hào)的列表組項(xiàng)。數(shù)字是通過(guò)CSS生成的（與ol的默認(rèn)瀏覽器樣式相反），以便更好地放置在列表組項(xiàng)目中，并允許更好的自定義。

數(shù)字由ol上的counter reset生成，然后在li上用 ::before 元素設(shè)置樣式并放置在counter increment和content中。

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>

這些對(duì)自定義內(nèi)容也很有用。

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14 
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>

水平

加入.list-group-horizo??ntal可以將列表群組在所有斷點(diǎn)的排版從垂直更改為水平。或者選擇加入響應(yīng)式變化.list-group-horizontal-{sm|md|lg|xl|xxl}，使列表群組從該斷點(diǎn)的最小min-width開(kāi)始水平放置。目前水平列表群組不能與Flush列表群組合并使用。

進(jìn)階應(yīng)用：想要一個(gè)水平、等寬的列表群組嗎？將.flex-fill加入到每個(gè)列表群組項(xiàng)目即可。

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>

背景和顏色

使用情境式Class來(lái)設(shè)計(jì)具有狀態(tài)背景和顏色的列表項(xiàng)目。

  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>

<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

情境式Class也可用于.list組項(xiàng)操作。請(qǐng)注意，這里添加了上一個(gè)示例中沒(méi)有的懸停樣式。還支持.active狀態(tài)；應(yīng)用它以指示情境式列表組項(xiàng)上的活動(dòng)選擇。

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

帶徽章

透過(guò)某些通用類(lèi)別，向任何列表項(xiàng)目添加標(biāo)簽以顯示未讀計(jì)數(shù)、活動(dòng)等。

  • A list item 14
  • A second list item 2
  • A third list item 1 
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>

自定義內(nèi)容

透過(guò)flexbox通用類(lèi)別，幾乎任何的HTML都能加入到項(xiàng)目?jī)?nèi)，如以下的列表群組連接。

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>

復(fù)選框和單項(xiàng)按鈕

將Bootstrap的復(fù)選框與單選框放在列表群組中，并依據(jù)需要進(jìn)行自定義。您可以在不使用label的情況下使用它們，但請(qǐng)記住要包含aria-label以及必要的內(nèi)容。

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox 
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>

除此之外，如果您希望將label作為.list-group-item使用以創(chuàng)造較大的點(diǎn)擊區(qū)域，這么做是可以的。

<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>

Sass

Variables

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer / 2;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

Used in combination with $theme-colors to generate the contextual variant classes for .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;

&.list-group-item-action {
&:hover,
&:focus {
  color: $color;
  background-color: shade-color($background, 10%);
}

&.active {
  color: $white;
  background-color: $color;
  border-color: $color;
}
}
}
}

Loop

Loop that generates the modifier classes with the list-group-item-variant() mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
$list-group-background: shift-color($value, $list-group-item-bg-scale);
$list-group-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
$list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
}

@include list-group-item-variant($state, $list-group-background, $list-group-color);
}

JavaScript 行為

使用JavaScript插件-單獨(dú)加入或通過(guò)編譯的bootstrap.js檔-來(lái)擴(kuò)展我們的列表群組，以創(chuàng)建內(nèi)容的切換菜單。

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>

使用數(shù)據(jù)屬性

可以指定data-bs-toggle=“l(fā)ist”或元素來(lái)啟動(dòng)列表群組的導(dǎo)航，而無(wú)需編寫(xiě)任何JavaScript。在.list-group-item上使用這些數(shù)據(jù)屬性。

<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>

通過(guò)JavaScript

通過(guò)JavaScript啟用可選的列表項(xiàng)目（每個(gè)列表項(xiàng)目需要單獨(dú)啟動(dòng)）：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

您可以透過(guò)以下幾種方式啟動(dòng)個(gè)別列表項(xiàng)目：

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

淡入效果

要使頁(yè)簽面板淡入淡出，請(qǐng)將.fade添加到每個(gè).tab-pane中。第一個(gè)頁(yè)簽面板還必須具有.show使初始內(nèi)容可見(jiàn)。

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

方法

構(gòu)造器

啟動(dòng)列表項(xiàng)目元素和內(nèi)容容器。頁(yè)簽應(yīng)該有一個(gè)data-bs-target或href定位在DOM中的一個(gè)容器節(jié)點(diǎn)。

<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()
</script>

顯示

選擇給定的列表項(xiàng)目并顯示其關(guān)聯(lián)的pane。而先前選擇的任何其他列表項(xiàng)目將被取消，并使其關(guān)聯(lián)的pane隱藏。在Tab pane顯示之前回傳給調(diào)用者（例如，在shown.bs.tab事件發(fā)生之前）。

  var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)

tab.show()

銷(xiāo)毀

銷(xiāo)毀元素的選項(xiàng)卡。

獲取實(shí)例

Static方法可以使您獲取與DOM元素相關(guān)聯(lián)的實(shí)例。

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

事件

當(dāng)顯示新分頁(yè)時(shí)，事件按以下順序觸發(fā)：

  1. hide.bs.tab （在當(dāng)前啟用的頁(yè)簽上）
  2. show.bs.tab （在準(zhǔn)備啟用的頁(yè)簽上）
  3. hidden.bs.tab （在先前啟用的頁(yè)簽上，與hide.bs.tab事件相同）)
  4. shown.bs.tab （在剛剛顯示的頁(yè)簽上，與show.bs.tab事件相同）

如果沒(méi)有選項(xiàng)啟用，則hide.bs.tab和hidden.bs.tab事件將不被觸發(fā)。

Event type Description
show.bs.tab 這個(gè)事件因頁(yè)簽顯示而觸發(fā)，但是會(huì)在新頁(yè)簽被顯示之前結(jié)束。使用event.target和event.relatedTarget將目前與先前啟用的頁(yè)簽（如果可用）的作為目標(biāo)。
shown.bs.tab 這個(gè)事件在頁(yè)簽顯示后觸發(fā)。使用event.target和event.relatedTarget來(lái)分別定位啟用中和剛剛啟用的頁(yè)簽。
hide.bs.tab 新的頁(yè)簽要顯示（先前的啟用頁(yè)簽將被隱藏）時(shí)，此事將觸發(fā)。使用event.target和event.relatedTarget分別定位先前啟用和即將啟用的頁(yè)簽。
hidden.bs.tab 新的選項(xiàng)顯示后（因此先前啟用的選項(xiàng)將隱藏），此事件將觸發(fā)。使用event.target和event.relatedTarget分別定位先前啟用的頁(yè)簽和新啟用的頁(yè)簽。 
var tabEl = document.querySelector('a[data-bs-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
  event.relatedTarget // previous active tab
})
返回頂部
精品久久久久久亚洲精品_成人午夜网站_www日本高清_亚洲精品久久久久午夜福 

      

      
久久综合给合久久狠狠色|
日韩视频国产视频|
久久全球大尺度高清视频|
亚洲精品视频免费观看|
国产欧美日韩三区|
欧美日韩在线不卡一区|
久久国产精品久久国产精品|
av成人激情|
在线看片欧美|
激情久久久久|
国产人成一区二区三区影院|
国产精品v欧美精品v日本精品动漫
|
亚洲欧美国产精品桃花|
国产情侣久久|
国产精品v欧美精品v日韩精品|
美女精品在线|
久久精品人人做人人综合
|
亚洲精品乱码久久久久久日本蜜臀|
国产欧美日韩一区二区三区在线|
欧美日韩一区高清|
欧美日韩在线不卡一区|
欧美高清你懂得|
欧美高清成人|
欧美mv日韩mv亚洲|
久久伊人精品天天|
免费成人性网站|
欧美99久久|
你懂的成人av|
欧美精品麻豆|
欧美午夜电影在线|
国产精品国产自产拍高清av|
欧美系列电影免费观看|
欧美日韩一卡|
国产精品毛片a∨一区二区三区|国|
欧美午夜电影在线|
国产女优一区|
精品成人乱色一区二区|
亚洲国产裸拍裸体视频在线观看乱了
|
欧美在线免费观看亚洲|
亚洲在线一区二区|
99热精品在线观看|
在线看片成人|
亚洲伦理中文字幕|
亚洲欧美日韩国产中文|
欧美亚洲在线|
麻豆免费精品视频|
欧美日韩国产小视频在线观看|
蜜臀a∨国产成人精品|
欧美激情一区二区三区四区|
欧美色视频日本高清在线观看|
国产精品www网站|
国产日韩亚洲欧美|
亚洲激情欧美|
亚洲自啪免费|
男女激情视频一区|
国产精品美女视频网站|
国产一区二区高清不卡|
亚洲狠狠丁香婷婷综合久久久|
亚洲精品国产精品乱码不99|
亚洲欧美另类久久久精品2019|
久久精品一区二区三区四区|
欧美激情综合亚洲一二区
|
国产精品99久久久久久久久久久久
|
欧美14一18处毛片|
国产精品护士白丝一区av|
一区二区三区在线免费播放|
9久草视频在线视频精品|
久久精品国产久精国产一老狼|
欧美成va人片在线观看|
国产精品a久久久久|
在线日韩日本国产亚洲|
亚洲在线电影|
欧美日韩精品欧美日韩精品一
|
国产欧美一区二区精品婷婷|
亚洲黑丝一区二区|
久久久久久久高潮|
国产精品久久二区二区|
亚洲精品五月天|
久久久无码精品亚洲日韩按摩|
欧美婷婷在线|
一本久久综合亚洲鲁鲁五月天|
麻豆精品视频|
在线观看国产精品网站|
香蕉久久精品日日躁夜夜躁|
欧美日韩国产综合视频在线观看
|
久久亚洲精品欧美|
国产婷婷97碰碰久久人人蜜臀|
夜夜嗨av一区二区三区四季av
|
欧美不卡在线视频|
精品88久久久久88久久久|
午夜精品一区二区三区在线视|
欧美四级在线观看|
亚洲伦理一区|
欧美日韩精品系列|
亚洲精品欧美日韩专区|
欧美国产日韩一区|
最新高清无码专区|
欧美精品v日韩精品v韩国精品v|
在线播放不卡|
欧美sm视频|
91久久在线视频|
欧美国产精品人人做人人爱|
亚洲区国产区|
欧美日韩亚洲一区二区三区在线|
日韩午夜视频在线观看|
欧美日韩在线亚洲一区蜜芽|
一区二区在线不卡|
免费欧美在线|
亚洲人成网站999久久久综合|
欧美精品videossex性护士|
91久久中文|
欧美亚日韩国产aⅴ精品中极品|
亚洲午夜伦理|
国产一区二区三区直播精品电影
|
久久亚洲一区二区|
在线看国产日韩|
欧美日韩视频在线一区二区|
亚洲在线视频一区|
激情久久一区|
欧美日韩一区二区国产|
亚洲欧美精品在线|
狠狠入ady亚洲精品|
欧美高清视频|
性做久久久久久免费观看欧美|
狠狠久久亚洲欧美|
欧美激情片在线观看|
亚洲午夜精品久久久久久浪潮
|
巨胸喷奶水www久久久免费动漫|
亚洲国产一区二区三区在线播|
欧美日韩一区二区视频在线|
欧美在线观看视频|
日韩亚洲欧美一区二区三区|
国产精品日韩一区二区|
欧美高清不卡|
久久精品国产亚洲5555|
一区二区三区日韩欧美|
一区在线免费观看|
国产精品高潮呻吟久久|
欧美福利电影网|
久久久一二三|
性久久久久久久久久久久|
日韩午夜av电影|
国产日韩三区|
欧美性大战久久久久|
蜜臀a∨国产成人精品|
久久成年人视频|
一区二区免费在线播放|
在线观看日韩av先锋影音电影院|
国产女主播一区二区三区|
欧美高清视频一区|
裸体女人亚洲精品一区|
久久激情久久|
欧美一区二区日韩|
亚洲欧美中日韩|
亚洲少妇自拍|
一区电影在线观看|
亚洲精品激情|
亚洲娇小video精品|
狠狠色狠狠色综合人人|
国产日韩欧美a|
国产视频亚洲|
国产欧美一区二区三区久久人妖
|
国产精品久久777777毛茸茸|
欧美日韩视频不卡|
欧美日韩精品一本二本三本|
欧美黄色日本|
欧美日本一道本|
欧美日韩在线播放三区|
欧美日韩岛国|
国产精品成av人在线视午夜片|
欧美日韩亚洲不卡|
国产精品www|
国产精品一区二区三区四区五区|
国产精品日韩在线播放|
国产九九精品|
韩曰欧美视频免费观看|
在线成人性视频|
亚洲人成网站777色婷婷|
最近中文字幕mv在线一区二区三区四区|
狠狠做深爱婷婷久久综合一区|
伊人激情综合|
亚洲乱码国产乱码精品精天堂
|
亚洲在线免费|
久久精品一区二区三区不卡|
久久久综合视频|
欧美激情精品久久久久久变态|
欧美日韩国产综合一区二区|
国产精品久久久爽爽爽麻豆色哟哟|
国产精品videosex极品|
国产一区二区三区四区三区四
|
欧美激情视频网站|
国产精品久久国产愉拍|
狠狠色狠狠色综合人人|
亚洲理论在线|
欧美一区二区|
欧美电影免费观看高清|
国产伦精品一区二区三区高清|
国产一区二区黄色|
一道本一区二区|
久久精品国产一区二区三区免费看
|