Webdienst-Header

1
2  // PAAS-Header
3  <div class="navbar-container container flex align-content-center mb-lg-3">
4    <Link href="/">
5      <a class="navbar-brand">
6        <img
7          src=""
8          alt=""
9          height=""
10          width=""
11        />
12      </a>
13    </Link>
14
15    <button
16      class="navbar-toggler position-absolute end-0"
17      type="button"
18      data-bs-toggle="collapse"
19      data-bs-target="#navbarTogglerDemo03"
20      aria-controls="navbarNav"
21      aria-expanded="false"
22      aria-label="Toggle navigation"
23    >
24      <span class="navbar-toggler-icon"></span> Menü
25    </button>
26
27    <div class="d-lg-flex align-items-center d-none mr-3 meta-nav-wrapper">
28      <ul class="nav lang-nav">
29        <li>
30          <a class="active" href="#">
31            DE
32          </a>
33        </li>
34        <li>
35          <a href="#">EN</a>
36        </li>
37      </ul>
38      <button
39        class="btn btn-secondary d-none d-lg-block search-button"
40        data-search-icon=""
41        type="button"
42      >
43        <svg height="20" viewBox="0 0 19 20" width="19">
44          <g
45            fill="none"
46            fillRule="evenodd"
47            stroke="currentColor"
48            transform="translate(1 1)"
49          >
50            <path
51              d="M16.5 17.5l-4-4"
52              strokeLinecap="round"
53              strokeWidth="3"
54            ></path>
55            <circle cx="7" cy="7" r="7" strokeWidth="2"></circle>
56          </g>
57        </svg>
58        <span class="sr-only sr-only-focusable">Suchen</span>
59      </button>
60    </div>
61  </div>
62
63  <div class="navbar-banner bg-secondary py-1 w-100">
64    <p class="container font-bigger leading-semi">
65      FHNW Bootstrap V5 Styleguide
66    </p>
67  </div>
68  

1
2  // PAAS-Navigation
3  <div class="paas container">
4    <nav class="navbar navbar-light navbar-expand-lg navbar-main">
5      <div
6        class="collapse navbar-collapse pb-3 pb-lg-0"
7        id="navbarTogglerDemo03"
8      >
9        <ul class="navbar-nav">
10          <li class="nav-item">
11            <a class="nav-link active" href="#">
12              First level 1
13            </a>
14          </li>
15          <li class="nav-item">
16            <a class="nav-link" href="#">
17              First level 2
18            </a>
19          </li>
20          <li class="nav-item dropdown">
21            <a
22              class="nav-link dropdown-toggle"
23              href="#"
24              data-bs-toggle="dropdown"
25            >
26              First level 3
27            </a>
28            <ul class="dropdown-menu">
29              <li class="nav-item">
30                <a class="dropdown-item" href="#">
31                  Second level 1
32                </a>
33              </li>
34              <li class="nav-item dropdown">
35                <a
36                  class="nav-link dropdown-toggle"
37                  href="#"
38                  data-bs-toggle="dropdown"
39                >
40                  Second level 2
41                </a>
42                <ul class="submenu dropdown-menu">
43                  <li>
44                    <a class="dropdown-item" href="">
45                      Third level 1
46                    </a>
47                  </li>
48                  <li>
49                    <a class="dropdown-item" href="">
50                      Third level 2
51                    </a>
52                  </li>
53                  <li class="nav-item dropdown">
54                    <a
55                      class="nav-link dropdown-toggle"
56                      href=""
57                      data-bs-toggle="dropdown"
58                    >
59                      Third level 3
60                    </a>
61                    <ul class="submenu dropdown-menu">
62                      <li>
63                        <a class="dropdown-item" href="">
64                          Fourth level 1
65                        </a>
66                      </li>
67                      <li>
68                        <a class="dropdown-item" href="">
69                          Fourth level 2
70                        </a>
71                      </li>
72                    </ul>
73                  </li>
74                  <li>
75                    <a class="dropdown-item" href="">
76                      Second level 4
77                    </a>
78                  </li>
79                  <li>
80                    <a class="dropdown-item" href="">
81                      Second level 5
82                    </a>
83                  </li>
84                </ul>
85              </li>
86              <li>
87                <a class="dropdown-item" href="#">
88                  Dropdown item 3
89                </a>
90              </li>
91              <li>
92                <a class="dropdown-item" href="#">
93                  Dropdown item 4
94                </a>
95              </li>
96            </ul>
97          </li>
98          <li class="nav-item">
99            <a class="nav-link" href="#">
100              First level 1
101            </a>
102          </li>
103          <li class="nav-item">
104            <a class="nav-link" href="#">
105              First level 2
106            </a>
107          </li>
108          <li class="nav-item dropdown">
109            <a
110              class="nav-link dropdown-toggle"
111              href="#"
112              data-bs-toggle="dropdown"
113            >
114              Dropdown right
115            </a>
116            <ul class="dropdown-menu dropdown-menu-right">
117              <li>
118                <a class="dropdown-item" href="#">
119                  Dropdown item 1
120                </a>
121              </li>
122              <li>
123                <a class="dropdown-item" href="#">
124                  Dropdown item 2
125                </a>
126              </li>
127              <li class="nav-item dropdown">
128                <a
129                  class="nav-link dropdown-toggle"
130                  href="#"
131                  data-bs-toggle="dropdown"
132                >
133                  Dropdown item 3
134                </a>
135                <ul class="submenu submenu-left dropdown-menu">
136                  <li>
137                    <a class="dropdown-item" href="">
138                      Submenu item 1
139                    </a>
140                  </li>
141                  <li>
142                    <a class="dropdown-item" href="">
143                      Submenu item 2
144                    </a>
145                  </li>
146                  <li>
147                    <a class="dropdown-item" href="">
148                      Submenu item 3
149                    </a>
150                  </li>
151                  <li>
152                    <a class="dropdown-item" href="">
153                      Submenu item 4
154                    </a>
155                  </li>
156                </ul>
157              </li>
158              <li>
159                <a class="dropdown-item" href="#">
160                  Dropdown item 4
161                </a>
162              </li>
163            </ul>
164          </li>
165        </ul>
166        <div class="d-lg-none">
167          <form
168            method="get"
169            class="form-control-lg search-form"
170            action="https://www.fhnw.ch/plattformen/dokumentation-webdienste/"
171            data-search-form=""
172          >
173            <div class="search-box-wrapper">
174              <label htmlFor="63ef28553013c" class="sr-only">
175                Geben Sie Ihren Suchbegriff ein
176              </label>
177              <input
178                type="text"
179                class="field"
180                name="s"
181                id="63ef28553013c"
182                aria-label="Geben Sie Ihren Suchbegriff ein"
183                placeholder="Geben Sie Ihren Suchbegriff ein"
184                data-search-input=""
185                autoComplete="off"
186              />
187              <svg
188                xmlns="http://www.w3.org/2000/svg"
189                width="64"
190                height="64"
191                viewBox="0 0 484.5 484.5"
192                class="enter-icon"
193                data-search-enter-icon="enter-icon"
194              >
195                <path d="M433.5 114.75v102H96.9l91.8-91.8-35.7-35.7-153 153 153 153 35.7-35.7-91.8-91.8h387.6v-153z"></path>
196              </svg>
197            </div>
198          </form>
199        </div>
200      </div>
201    </nav>
202  </div>
203