Full-width image just for index page

Question 1

You can achieve this with blocks. Take a look at the relevant section (Blocks and Inline Partials) in the dust.js guide.

You can specify blocks in your master template that can be optionally overridden in your calling templates

A block may be self-closing ({+block/}), in which case it is not displayed unless a calling template overrides the content of the block

You are already using the syntax for your {+body/} definition.

tl;dr

So in your master template you could do something like (note image block on 5th line):

<body>
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    {+image/}                
    <div class="container">
        {+body/}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

and in your index template provide the image override (below), leaving it out of your other templates:

{<image}
  ...your image
{/image}
{<body}
  ...your body
{/body}

Question 2

What you can do is add some page class to your body element when you are on index page. And create css style based on that class to add something after navigation. For example:

html:

<body class="main-page">
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    <div class="container">
        {+body /}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

css:

body.main-page > .container::before {
    display: block;
    content: "whatever content you need";
    width: 100%;
    height: 300px;
}