Accessorizing Ning Networks with Twitter Bootstrap

[JFarrow]

So i've been playing around with the Twitter Bootstrap framework, building new responsive pages for home, about network and otherwise.  I just wanted to open a discussion regarding the possibilities of using Bootstrap in hope of discovering (or creating) new ways to further integrate them within the Ning system.  Before we go any further, I'll admit that I haven't quite got it perfect yet, thus my reasoning behind posting this discussion.  I am interested to hear back from any other NCs who might  have experimented with Bootstrap as I cannot find any discussions on the creators forum regarding bootstrap.

Extending Ning With Bootstrap

The possibilities for extending Ning with bootstrap seem endless, using the file manager a bit of hard work and imagination.  Here are a couple of new clean pages that I made for my network using Twitter Bootstrap.
View New Home PageExample:

View New About PageExample:

Twitter bootstrap also built using LESS for CSS, so I am optimistic about being able to (eventually) fully integrate bootstrap into my entire network, thus allowing me to have features to pull in member profile data, extend the capabilities of my network.

 Tips

You can customize your bootstrap download to match the color scheme of your network here.

If you are interested in practicing with the same intentions, I will give you a tip.  Download the bootstrap folder and place it into your Public Dropbox folderto make changes as you see fit and when you have it the way you like it, then upload it to your network to save a lot of headaches.

If you are interested in discussing my experiments with twitter bootstrap or are in need of some help with your own network, connect with me from my profile on creators and don't be shy.

[JFarrow]

good luck homeboy...let me know if you need any help

[Ceddy J]

Thanks man! I'm going to figure it out and when I do, I'm going to be very proud of myself. This will be some of the most extensive work I have done and I want to attempt to attack it to show you guys that I have been learning in all the time I have been here learning the basics of html.

[Ceddy J]

There is one question I have, do I check all of the boxes in the download. Making sure I that part right so I can replace it before I continue to puzzle.

[Ceddy J]

I ran across this site that allows you to design it live http://www.boottheme.com/#generatetheme?id=1359787337058.277002 <That's my design so far.

[JFarrow]

Here are a TON of other Bootstrap resources which may be of help

Display

JQUERY.TOCIFY.JS

A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.

BOOTSTRAP-PROMPTS

An implementation to replace the alert(), prompt(),confirm() notifications on the browser when using Twitter Bootstrap with Modal information

SUBNAV FOR BOOTSTRAP 2

Example of how to implement SubNavs in Bootstrap navigation menus.

JQUERY-BOOTSTRAP-SCRIPTING

Uses the modal dialog provided by bootstrap and provides a controlable dialog functionality for web pages as a jQuery plugin.

BOOTSTRAP-LIGHTBOX

This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog

MENTION.JS

Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin

PINES NOTIFY

JavaScript notifications for Bootstrap or jQuery UI

ACC-WIZARD

An accordion-based wizard based on Bootstrap styles.

JQUERY-BOOTSTRAP-PAGINATION

A simple, full-featured, pagination system for jQuery that outputs Twitter Bootstrap marked up pagination links.

BANGBANG TAG INPUT

A jQuery plugin to handle multiple tagged input.

TOCIFY

A Bootstrap styled jQuery Table of Contents

SORICH87/BOOTSTRAP-TOUR

Quick and easy way to build your product tours with Twitter Bootstrap Popovers

BOOTSTRAP-TAGS

Bootstrap tags is a lightweight jQuery plugin meant to extend the Twitter Bootstrap UI to include tagging.

BOOTSTRAP ARROWS

Add-on to the popular Twitter Bootstrap framework to include the use of arrows at any angle in your UI designs

BOOTSTRAP-MODAL

Extends Bootstrap's native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.

PILLBOX FUEL UX

Pillbox container (often used for tags) control

DATAGRID FUEL UX

Editable, searchable data display table.

BOOTMETRO

Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 App Store" style

BOOTSTRAP TOUR

Easy to configure site tour wizard

JQUERY-SLIMSCROLL

Transforms any div into a scrollable area with a nice scrollbar (default Bootstrap styling).

BOOTSTRAP-PROGRESSBAR

Multi-Color progressbar component for Twitter Bootstrap

BOOTSTRAP HTML5 VIDEO PLAYER

HTML5 video player plugin for jQuery based on bootstrap UI

BOOTPAG

A dynamic pagination jQuery plugin for Twitter Bootstrap

BOOTSTRAP-IMAGE-GALLERY

An extension to the Modal dialog of Twitter's Bootstrap toolkit,

TABLECLOTH.JS

Style, sort and manipulate tables quickly

PAGEDOWN-BOOTSTRAP

A port of the Pagedown Markdown editor for use with Twitter Bootstrap.

MENU DROPDOWN ON HOVER PLUGIN

Slick dropdown on hover and a good discussion of the tradeoffs for mobile.

TWITTER BOOTSTRAP HOVER DROPDOWN PLUGIN

A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.

CSS3 MICROSOFT MODERN BUTTONS

"Modern" the style formerly known as "Metro" appearance Bootstrap button styles.

LIGHTBOX

Fading jQuery lightbox to show images/logins or other niceness.

D3 BOOTSTRAP POPOVERS

Uses the markup and css from bootstrap to make pretty D3 popovers.

TWITTER BOOTSTRAP NOTIFICATIONS, FROM NIJIKO YONSKAI

Growl style alerts for Bootstrap

BOOTBOX.JS - ALERT, CONFIRM AND FLEXIBLE DIALOGS FOR TWITTER'S BOOT...

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes.

[Ceddy J]

Houston we have a problem.

I know did all the coding right including inputting the links to the bootstrap.min.css and bootstrap-responsive.min.css and my code still the html page didn't come as I did in the design process.

I put the files below so that you could see them.

Here are the links of the css files uploaded:

https://www.dropbox.com/s/k0bkn0oibiyd5z0/bootstrap-responsive.min.css

https://www.dropbox.com/s/020jggoypd9az50/bootstrap.min.css

[Ceddy J]

I will continue to investigate what I did wrong. Still not quite sure.

[JFarrow]

it looks to me like you do not have your CSS files loaded into your PUBLIC folder on dropbox.. you will want to creat a folder inside the public folder call it bootstrap  then have two folders inside that folder for CSS and JS and put the files inside there..now when inside Windows Explorer, Dropbox>Public>Bootstrap>CSS right click on the file and where it says Dropbox, hover and choose copy public link  that's the link you should plug into the head of those pages..

[Ceddy J]

Once I changed the links in the html doc with the new ones from Dropbox it distorted the design. https://www.dropbox.com/sh/gzsnm6s9cyiw3g8/zYYiOn6sf6

[JFarrow]

i suppose this post was forecasting the future