Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Improve the SharePoint UI Using Bootstrap 3

16,368 views

Published on

Bootstrap has become the go-to standard for web developers looking for a simple and powerful framework to use when building websites. It provides many capabilities and features that not only simplify markup, leading to increased productivity and easier maintenance, but can also enhance the website by enabling the developer with a simple way to add complex capabilities that they may not have even known was possible.

Why aren't we using it in SharePoint development? There's no reason we can't! This session will provide seasoned SharePoint developers and designers with an introduction to Bootstrap 3 so we can review the components in the framework and learn how to incorporate Bootstrap into our solutions. Which components should we be leveraging? Which components should we be avoiding? How do we utilize Bootstrap to increase our mobile and responsive experiences?

To answer these questions, you will be introduced to Bootstrap and we will review its' capabilities. We then compare to existing SharePoint features so we can make proper decisions on when and when not to use Bootstrap. Leveraging this foundation, the session will move into demos of building a branding solution using Bootstrap as well as show the creation of a SharePoint app which will be built using Bootstrap. Coming out of this session you will have a clear understanding of what Bootstrap 3 is, when and how to use it properly in your SharePoint solutions and apps, and a new perspective on SharePoint development!

Published in: Technology
  • How to Grip Her Attention - Unlock Her Legs ♥♥♥ http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ➤➤ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • GIVE HER A BIGGER PACKAGE THIS VALENTINE'S DAY ▲▲▲ https://bit.ly/30G1ZO1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report  https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ♣♣♣ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How to Improve the SharePoint UI Using Bootstrap 3

  1. 1. How to Improve the SharePoint UI Using Bootstrap 3 Ryan McIntyre National Architect, Neudesic Level: Introductory to Intermediate
  2. 2. Agenda • SharePoint 2013 Responsiveness • Bootstrap 3 Introduction & Review • How Bootstrap 3 can help SharePoint • Create responsive master page & apps
  3. 3. Introducing Contoso
  4. 4. SharePoint OOTB Responsiveness
  5. 5. SharePoint OOTB Responsiveness
  6. 6. SharePoint OOTB Responsiveness
  7. 7. SharePoint Gaps • Web Parts • App Parts • Search • Top & Left Nav
  8. 8. Bootstrap 3
  9. 9. CSS Grid system Tables Code Topography Forms Buttons Images Helper classes Responsive utilities
  10. 10. Components Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Responsive embed Wells
  11. 11. JavaScript Transitions Modal Popover Alert Scrollspy Button Dropdown Tab Collapse Tooltip Carousel Affix
  12. 12. Grid System
  13. 13. Grid System Medium (>=992px) Small (>=768px) Extra-Small (Default)
  14. 14. Basic Bootstrap 3 http://bit.ly/1xrKo8B http://splivebootstrap.azurewebsites.net/
  15. 15. How Can Bootstrap Help SharePoint? Page Layout Forms Navigation Data Display App (iframe) sizing Page Controls
  16. 16. Master Page with Bootstrap 3
  17. 17. App with Bootstrap 3
  18. 18. Bootstrap/SP Gotchas • CSS Conflicts • Publishing Page Mode (Edit vs View) • Define Supported Site Templates • App vs Host Branding • SEO • Weigh Pros/Cons Before Defaulting to Bootstrap over SharePoint Controls
  19. 19. Wrap-Up and Action Items • Bootstrap 3 review • How to use Bootstrap 3 in SharePoint 2013 • Contoso • Sign up for Office 365 trial • http://getbootstrap.com/ • https://responsivesharepoint.codeplex.co m/ • Bootstrap Theme: http://bit.ly/1wu8v4U
  20. 20. Thank You! ryan.mcintyre@neudesic.com @ryanmcintyre http://blog.randomdust.com

×