Skip to content

Commit 296b6df

Browse files
emxsysemxsys
committed
Work in progress.
1 parent b5986e0 commit 296b6df

1 file changed

Lines changed: 77 additions & 43 deletions

File tree

‎docs/index.md‎

Lines changed: 77 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ web application template ready for customization.
1313
To start from scratch, you can download this template: [Bootstrap Starter Template](https://getbootstrap.com/docs/4.0/examples/starter-template/)
1414

1515

16-
#### Dependencies
16+
### Dependencies
1717

1818
In the `<head>` section of your web page, include the CSS for Bootstrap 4 and Font Awesome via CDNs.
1919

20+
We'll also use a custom CSS file to override the default Bootstrap where we need to. Ensure a
21+
custom.css file exists (create an empty file if necessary).
22+
2023
```html
2124
<!-- Bootstrap 4.0 CSS compiled and minified -->
2225
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
@@ -28,6 +31,8 @@ In the `<head>` section of your web page, include the CSS for Bootstrap 4 and Fo
2831
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
2932
crossorigin="anonymous">
3033

34+
<!-- Custom styles and overrides -->
35+
<link href="custom.css" rel="stylesheet">
3136
```
3237

3338
Just before the `</body>` tag, add the JavaScript dependencies for BootStrap and JQuery
@@ -39,63 +44,92 @@ Just before the `</body>` tag, add the JavaScript dependencies for BootStrap and
3944
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
4045
```
4146

42-
#### NavBar
47+
### NavBar: main-menu
4348

4449
Our web app will use a Bootstrap [Navbar](https://getbootstrap.com/docs/4.0/components/navbar/) component to render our main menu at the top of the page. The Navbar is responsive: it will automatically adjust its layout based on the page width.
4550

4651
The Navbar component is placed the beginning of the `<body>` element.
4752

4853
We'll add menu items for the features that we will implement in this tutorial, including:
4954

50-
- Layer panel for managing the layers displayed on the WorlWind globe
55+
- Layer panel for managing the layers displayed on the WorldWind globe
5156
- Settings panel for configuring the WorldWind globe
5257
- Search box for place name searches and geocoding
5358

5459
```html
55-
<!--Main Menu-->
56-
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
60+
<!--Main Menu-->
61+
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
62+
63+
<!--Branding icon and text-->
64+
<a class="navbar-brand" href="https://worldwind.arc.nasa.gov/web">
65+
<img src="images/nasa-logo_32.png" width="30" height="30" class="d-inline-block align-top" alt="">
66+
WorldWind
67+
</a>
5768

58-
<!--Branding icon and text-->
59-
<a class="navbar-brand" href="https://worldwind.arc.nasa.gov/web">
60-
<img src="images/nasa-logo_32.png" width="30" height="30" class="d-inline-block align-top" alt="">
61-
WorldWind
62-
</a>
63-
64-
<!--Hamburger menu displayed on small screens/windows-->
65-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
66-
<span class="navbar-toggler-icon"></span>
67-
</button>
68-
69-
<!--Main menu content-->
70-
<div class="collapse navbar-collapse" id="main-menu">
71-
<ul class="navbar-nav mr-auto">
72-
<!--Layers-->
73-
<li class="nav-item">
74-
<a class="nav-link" data-toggle="collapse" href="#layers" role="button">
75-
<span class="fas fa-list" aria-hidden="true"></span>
76-
<span class="d-md-none d-lg-inline" aria-hidden="true">Layers</span>
77-
</a>
78-
</li>
79-
<!--Settings-->
80-
<li class="nav-item">
81-
<a class="nav-link" data-toggle="collapse" href="#markers" role="button">
82-
<span class="fas fa-map-marker-alt" aria-hidden="true"></span>
83-
<span class="d-md-none d-lg-inline" aria-hidden="true">Markers</span>
84-
</a>
85-
</li>
86-
</ul>
87-
<!--Search Box-->
88-
<form class="form-inline">
89-
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
90-
<button class="btn btn-outline-success" type="submit">
91-
<span class="fas fa-search" aria-hidden="true"></span>
92-
</button>
93-
</form>
94-
</div>
95-
</nav>
69+
<!--Hamburger menu displayed on small screens/windows-->
70+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
71+
<span class="navbar-toggler-icon"></span>
72+
</button>
73+
74+
<!--Main menu content-->
75+
<div class="collapse navbar-collapse" id="main-menu">
76+
<ul class="navbar-nav mr-auto">
77+
<!--Layers-->
78+
<li class="nav-item">
79+
<a class="nav-link" data-toggle="collapse" href="#layers" role="button">
80+
<span class="fas fa-list" aria-hidden="true"></span>
81+
<span class="d-md-none d-lg-inline" aria-hidden="true">Layers</span>
82+
</a>
83+
</li>
84+
<!--Settings-->
85+
<li class="nav-item">
86+
<a class="nav-link" data-toggle="collapse" href="#settings" role="button">
87+
<span class="fas fa-map-marker-alt" aria-hidden="true"></span>
88+
<span class="d-md-none d-lg-inline" aria-hidden="true">Markers</span>
89+
</a>
90+
</li>
91+
</ul>
92+
<!--Search Box-->
93+
<form class="form-inline">
94+
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
95+
<button class="btn btn-outline-success" type="submit">
96+
<span class="fas fa-search" aria-hidden="true"></span>
97+
</button>
98+
</form>
99+
</div>
100+
</nav>
101+
102+
```
103+
104+
### Main element
96105

106+
The `<main/>` element will host main content of our web app: the globe and other content. In this tutorial,
107+
we want the element to be the full width of the page so we apply the Bootstrap `container-fluid`
108+
class to the element. The `container` element used in many Bootstrap templates constrains the width.
109+
110+
We also override Bootstrap's default padding around the element via Bootstrap's [spacing utilities](https://getbootstrap.com/docs/4.0/utilities/spacing/).
111+
We use `p-0` which sets the padding to zero. You can experiment with other padding options.
112+
113+
```html
114+
<!-- Use container-fluid for 100% width and set padding to 0 -->
115+
<main role="main" class="container-fluid p-0">
97116
```
98117

118+
To make layout easier, we add some padding to the top of the `body` element so that children do not slide
119+
under the Navbar.
120+
121+
```css
122+
body {
123+
/*Account for the height of the navbar component*/
124+
padding-top: 3.5rem;
125+
}
126+
```
127+
128+
### Cards: panels for layers and settings
129+
130+
We'll use Bootstrap [Card](https://getbootstrap.com/docs/4.0/components/card/) components to host the WorldWind layers and settings content.
131+
132+
99133

100134
## Lesson 2: WorldWind Globe
101135
- Add a globe to the application

0 commit comments

Comments
 (0)