Skip to content

Commit 29682e5

Browse files
shigeshige
committed
[Bootstrap 4] navbar を固定ヘッダーに設定する サンプルコード
- [Bootstrap 4で固定ヘッダーと固定フッターを設定する簡単な方法 \| まろりか](https://www.marorika.com/entry/bootstrap-sticky)
1 parent 4e3a034 commit 29682e5

File tree

2 files changed

+256
-0
lines changed

2 files changed

+256
-0
lines changed

‎bootstrap4/header_sticky-top_navbar.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<!-- Bootstrap CSS -->
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
11+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
12+
13+
<title>header.sticky-top nav.navbar</title>
14+
</head>
15+
16+
<body>
17+
<header class="sticky-top">
18+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
19+
<div class="container">
20+
<a class="navbar-brand " href="/">Navbar</a>
21+
</div>
22+
</nav>
23+
</header>
24+
25+
<h1>header.sticky-top nav.navbar</h1>
26+
27+
<p>1</p>
28+
<p>2</p>
29+
<p>3</p>
30+
<p>4</p>
31+
<p>5</p>
32+
<p>6</p>
33+
<p>7</p>
34+
<p>8</p>
35+
<p>9</p>
36+
<p>10</p>
37+
<p>11</p>
38+
<p>12</p>
39+
<p>13</p>
40+
<p>14</p>
41+
<p>15</p>
42+
<p>16</p>
43+
<p>17</p>
44+
<p>18</p>
45+
<p>19</p>
46+
<p>20</p>
47+
<p>21</p>
48+
<p>22</p>
49+
<p>23</p>
50+
<p>24</p>
51+
<p>25</p>
52+
<p>26</p>
53+
<p>27</p>
54+
<p>28</p>
55+
<p>29</p>
56+
<p>30</p>
57+
<p>31</p>
58+
<p>32</p>
59+
<p>33</p>
60+
<p>34</p>
61+
<p>35</p>
62+
<p>36</p>
63+
<p>37</p>
64+
<p>38</p>
65+
<p>39</p>
66+
<p>40</p>
67+
<p>41</p>
68+
<p>42</p>
69+
<p>43</p>
70+
<p>44</p>
71+
<p>45</p>
72+
<p>46</p>
73+
<p>47</p>
74+
<p>48</p>
75+
<p>49</p>
76+
<p>50</p>
77+
<p>51</p>
78+
<p>52</p>
79+
<p>53</p>
80+
<p>54</p>
81+
<p>55</p>
82+
<p>56</p>
83+
<p>57</p>
84+
<p>58</p>
85+
<p>59</p>
86+
<p>60</p>
87+
<p>61</p>
88+
<p>62</p>
89+
<p>63</p>
90+
<p>64</p>
91+
<p>65</p>
92+
<p>66</p>
93+
<p>67</p>
94+
<p>68</p>
95+
<p>69</p>
96+
<p>70</p>
97+
<p>71</p>
98+
<p>72</p>
99+
<p>73</p>
100+
<p>74</p>
101+
<p>75</p>
102+
<p>76</p>
103+
<p>77</p>
104+
<p>78</p>
105+
<p>79</p>
106+
<p>80</p>
107+
<p>81</p>
108+
<p>82</p>
109+
<p>83</p>
110+
<p>84</p>
111+
<p>85</p>
112+
<p>86</p>
113+
<p>87</p>
114+
<p>88</p>
115+
<p>89</p>
116+
<p>90</p>
117+
<p>91</p>
118+
<p>92</p>
119+
<p>93</p>
120+
<p>94</p>
121+
<p>95</p>
122+
<p>96</p>
123+
<p>97</p>
124+
<p>98</p>
125+
<p>99</p>
126+
<p>100</p>
127+
</body>
128+
129+
</html>

‎bootstrap4/no_header_sticky-top_navbar.html

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<!-- Bootstrap CSS -->
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
11+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
12+
13+
<title>no header.sticky-top only nav.navbar</title>
14+
</head>
15+
16+
<body>
17+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
18+
<div class="container">
19+
<a class="navbar-brand " href="/">Navbar</a>
20+
</div>
21+
</nav>
22+
23+
<h1>no header.sticky-top only nav.navbar</h1>
24+
25+
<p>1</p>
26+
<p>2</p>
27+
<p>3</p>
28+
<p>4</p>
29+
<p>5</p>
30+
<p>6</p>
31+
<p>7</p>
32+
<p>8</p>
33+
<p>9</p>
34+
<p>10</p>
35+
<p>11</p>
36+
<p>12</p>
37+
<p>13</p>
38+
<p>14</p>
39+
<p>15</p>
40+
<p>16</p>
41+
<p>17</p>
42+
<p>18</p>
43+
<p>19</p>
44+
<p>20</p>
45+
<p>21</p>
46+
<p>22</p>
47+
<p>23</p>
48+
<p>24</p>
49+
<p>25</p>
50+
<p>26</p>
51+
<p>27</p>
52+
<p>28</p>
53+
<p>29</p>
54+
<p>30</p>
55+
<p>31</p>
56+
<p>32</p>
57+
<p>33</p>
58+
<p>34</p>
59+
<p>35</p>
60+
<p>36</p>
61+
<p>37</p>
62+
<p>38</p>
63+
<p>39</p>
64+
<p>40</p>
65+
<p>41</p>
66+
<p>42</p>
67+
<p>43</p>
68+
<p>44</p>
69+
<p>45</p>
70+
<p>46</p>
71+
<p>47</p>
72+
<p>48</p>
73+
<p>49</p>
74+
<p>50</p>
75+
<p>51</p>
76+
<p>52</p>
77+
<p>53</p>
78+
<p>54</p>
79+
<p>55</p>
80+
<p>56</p>
81+
<p>57</p>
82+
<p>58</p>
83+
<p>59</p>
84+
<p>60</p>
85+
<p>61</p>
86+
<p>62</p>
87+
<p>63</p>
88+
<p>64</p>
89+
<p>65</p>
90+
<p>66</p>
91+
<p>67</p>
92+
<p>68</p>
93+
<p>69</p>
94+
<p>70</p>
95+
<p>71</p>
96+
<p>72</p>
97+
<p>73</p>
98+
<p>74</p>
99+
<p>75</p>
100+
<p>76</p>
101+
<p>77</p>
102+
<p>78</p>
103+
<p>79</p>
104+
<p>80</p>
105+
<p>81</p>
106+
<p>82</p>
107+
<p>83</p>
108+
<p>84</p>
109+
<p>85</p>
110+
<p>86</p>
111+
<p>87</p>
112+
<p>88</p>
113+
<p>89</p>
114+
<p>90</p>
115+
<p>91</p>
116+
<p>92</p>
117+
<p>93</p>
118+
<p>94</p>
119+
<p>95</p>
120+
<p>96</p>
121+
<p>97</p>
122+
<p>98</p>
123+
<p>99</p>
124+
<p>100</p>
125+
</body>
126+
127+
</html>

0 commit comments

Comments
 (0)