Introduction
This post covers the steps needed to set up a SharePoint site for the creation of web pages that support current web technologies including Bootstrap. These web pages have much more freedom in design and dynamic toolsets than the restrictions provided by the native SharePoint toolset, and it allows the creation of pages that automatically adapt to any device used.
Create Site and Add Supporting Libraries
The first step is to create a standard SharePoint site. This site can use any number of the
SharePoint site templates provided, you can select one that provides specific
tools that you need, or simply a team site to get started. A team site is used in this example.
Bootstrap uses javascript jquery files to enable specific
functionality, so first download the supporting libraries for jquery here:
Rename the jquery file you just downloaded to simply
jquery.js (extension hidden in windows).
Then add to your SharePoint sites site assets library.
Next, you need to download the resources used for Bootstrap. Navigate to the bootstrap website:
and download the latest fully tested version of Bootstrap
(not Beta or Alpha). Unzip the
file. Copy the following components from
the bootstrap folders to your site assets library (extensions may be hidden in
windows):
bootstrap.min.css
bootstrap.min.js
bootstrap.min.js
Finally, create a blank text document and title it
“style.css”. Place this document in the
site assets library as well. Your site
assets library should now look like:
Next, we create a library for our images. While we could put images in the site assets
library, an image library provides an image preview and other functionality
useful when managing multiple images.
Navigate to site contents in your SharePoint site, choose
“add an app”, and choose “Picture Library”.
Name your picture library what you wish, I called mine “Site Images”.
Create Site Page
Now that you have the supporting assets ready, you can
create your site page. Open SharePoint
Designer and open your site.
Click on your “Site Pages” library.
In the top ribbon, “New” section, choose “Page” ->
“ASPX”. Do not choose “html” as
SharePoint security will not allow it to render. Rename your page away from the default
“untitled”.
Open your new site page.
SharePoint will have included some markup by default on the page. Remove the opening and closing “form”
tags. Leave the rest. Save the page.
Link Site Page to Supporting Libraries
In your new site page, expand the “head” section. First, add links to both the bootstrap
stylesheet and your custom stylesheet.
In the head section of your new page, create the link to the
Bootstrap style sheet, as follows:
<link
rel="stylesheet" type="text/css" href="../SiteAssets/bootstrap.min.css"></link>
Repeat for the four other supporting components so that you
end up with this:
<link
rel="stylesheet" type="text/css" href="../SiteAssets/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="../SiteAssets/style.css"></link>
<link rel="stylesheet" type="text/css" href="../SiteAssets/style.css"></link>
<script
type="text/javascript" src="../SiteAssets/jquery.js"></script>
<script type="text/javascript" src="../SiteAssets/bootstrap.min.js"></script>
<script type="text/javascript" src="../SiteAssets/bootstrap.min.js"></script>
Click on each of these links in SharePoint Designer. If they are configured properly, SharePoint
Designer should open the corresponding file.
Test jQuery
Next, we will insert some test script to ensure that jQuery
is loading and functioning properly. In
the head section of your new webpage, insert the following text:
<script type="text/javascript">
$(document).ready(function()
{
alert('jquery
loaded');
});
</script>
Save your page in SharePoint Designer. Navigate to your SharePoint site, and open your
new site page located in your site pages folder. If you see a alert that says ‘jquery loaded’,
then you are ready to proceed. If not,
check your links of accuracy and the format of your html page.
Create Your Page Using Bootstrap
Your page is now ready for creation using the many features
of bootstrap. If you are familiar with
the technology, proceed! If not, here is
a starting point.
Within the “body” tags, add three new sections. “Header”, “Section”, and “Footer” as follows:
<header></header>
<section></section>
<footer></footer>
Within each of these tags, add opening and closing
“container” tags as follows:
<header>
<div
class=”container”></div>
</header>
<section>
<div
class=”container”></div>
</section>
<footer>
<div
class=”container”></div>
</footer>
Next add the row tags as follows:
<header>
<div
class=”container”>
<div
class=”row”></div>
</div>
</header>
<section>
<div
class=”container”>
<div
class=”row”></div>
</div>
</section>
<footer>
<div
class=”container”>
<div
class=”row”></div>
</div>
</footer>
<header>
<div
class=”container”>
<div
class=”row”>
<div
class=”col-md-4”>
This
is four column row section.
</div>
<div
class=”col-md-8”>
This
is an 8 column row section.
</div>
</div>
</div>
</header>
Add a Bootstrap button within one of your rows using the
following syntax:
<a href="#" class="btn btn-default">Button</a>
Add an image to your site page as follows (after first
placing it in the site images library):
<img
alt="Island Health Logo" src="../Site%20Images/IslandHealthLogo.gif"></img>
If you want to add custom styles to this page, use the
style.css file created earlier and placed in the site assets library. You can access this library from directly in
SharePoint Designer, enabling easy flipping back and forth between your page
and the style sheet. Do not modify the
style css that comes with bootstrap.
You can now build out your page as you wish
using all of the features of bootstrap.
No comments:
Post a Comment