Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
dropdown.html 8.66 KB
Newer Older
XhmikosR's avatar
Switch to lowercase `doctype`. (#24217)    
XhmikosR committed
1 
<!doctype html>
XhmikosR's avatar
Tighten htmllint's rules. (#24471)    
XhmikosR committed
2 
<html lang="en">
Bardi Harborow's avatar
Update visual tests.    
Bardi Harborow committed
3
4
5
6
7
8
9
10
11 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
    <title>Dropdown</title>
  </head>
  <body>
    <div class="container">
      <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
fat's avatar
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it  
fat committed
12
Mark Otto's avatar
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables    
Mark Otto committed
13 
      <nav class="navbar navbar-expand-md navbar-light bg-light">
Mark Otto's avatar
more docs updates    
Mark Otto committed
14
15 
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Mark Otto's avatar
fix navbar in dropdown visual test file    
Mark Otto committed
16
17
18
19
20 
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav">
Bardi Harborow's avatar
Update visual tests.    
Bardi Harborow committed
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
fat's avatar
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it  
fat committed
41
Bardi Harborow's avatar
Update visual tests.    
Bardi Harborow committed
42
43
44 
      <ul class="nav nav-pills mt-3">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
Jacob Thornton's avatar
fix dropdown js visual example    
Jacob Thornton committed
45 
        </li>
Bardi Harborow's avatar
Update visual tests.    
Bardi Harborow committed
46
47 
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
Jacob Thornton's avatar
fix dropdown js visual example    
Jacob Thornton committed
48 
        </li>
Bardi Harborow's avatar
Update visual tests.    
Bardi Harborow committed
49
50
51
52
53
54
55
56
57 
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown2">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
Jacob Thornton's avatar
fix dropdown js visual example    
Jacob Thornton committed
58
59
60 
          </div>
        </li>
      </ul>
Johann-S's avatar
Handle dropup for Dropdown    
Johann-S committed
61
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
62
63
64 
      <div class="row">
        <div class="col-sm-12 mt-4">
          <div class="btn-group dropup">
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
65 
            <button type="button" class="btn btn-secondary">Dropup split</button>
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
66 
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
67 
              <span class="sr-only">Dropup split</span>
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
68
69
70
71
72
73
74
75 
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
76
77
78
79
80
81
82
83
84 
          <div class="btn-group dropup">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
85
86
87
88
89
90
91
92
93
94 
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              This dropdown's menu is right-aligned
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here</button>
            </div>
          </div>
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
95 
        </div>
Johann-S's avatar
Add dropright and dropleft (right and left placements for our dropdown) (#23860)    
Johann-S committed
96
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
97
98
99
100
101 
        <div class="col-sm-12 mt-4">
          <div class="btn-group dropup" role="group">
            <a href="#" class="btn btn-secondary">Dropup split align right</a>
            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Product actions</span>
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
102 
            </button>
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
103 
            <div class="dropdown-menu dropdown-menu-right">
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
104
105 
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
106 
              <button class="dropdown-item" type="button">Something else here with a long text</button>
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
107
108 
            </div>
          </div>
Johann-S's avatar
Better management of dropdown/dropup with alignment    
Johann-S committed
109
110
111
112
113
114
115
116
117 
          <div class="btn-group dropup">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup align right</button>
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here with a long text</button>
            </div>
          </div>
        </div>
Johann-S's avatar
Add dropright and dropleft (right and left placements for our dropdown) (#23860)    
Johann-S committed
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162 

        <div class="col-sm-12 mt-4">
          <div class="btn-group dropright" role="group">
            <a href="#" class="btn btn-secondary">Dropright split</a>
            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Product actions</span>
            </button>
            <div class="dropdown-menu">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here with a long text</button>
            </div>
          </div>
          <div class="btn-group dropright">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropright
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here</button>
            </div>
          </div>
          <!-- dropleft -->
          <div class="btn-group dropleft" role="group">
            <a href="#" class="btn btn-secondary">Dropleft split</a>
            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Product actions</span>
            </button>
            <div class="dropdown-menu">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here with a long text</button>
            </div>
          </div>
          <div class="btn-group dropleft">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropleft
            </button>
            <div class="dropdown-menu" aria-labelledby="dropleftMenu">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here</button>
            </div>
          </div>
Johann-S's avatar
Use popper to align dropdown menu instead of using css with important    
Johann-S committed
163 
        </div>
Johann-S's avatar
Add dropright and dropleft (right and left placements for our dropdown) (#23860)    
Johann-S committed
164
Johann-S's avatar
Handle dropup for Dropdown    
Johann-S committed
165 
      </div>
Johann-S's avatar
Add dropright and dropleft (right and left placements for our dropdown) (#23860)    
Johann-S committed
166 
    </div>
fat's avatar
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it  
fat committed
167
Johann-S's avatar
Update path to our docs assets for visual tests    
Johann-S committed
168
169 
    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
    <script src="../../../assets/js/vendor/popper.min.js"></script>
Bardi Harborow's avatar
Update visual tests.    
Bardi Harborow committed
170
171
172
173 
    <script src="../../dist/util.js"></script>
    <script src="../../dist/dropdown.js"></script>
    <script src="../../dist/collapse.js"></script>
  </body>
fat's avatar
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it  
fat committed
174 
</html>