Components

Alerts

New alert with a white background

    <div class="alert alert-default" role="alert">
       <strong>Well done!</strong> You successfully read this important alert message.
    </div>

Avatars

Helper classes to format avatar, with different sizes and correct border radius

    <div class="user user-xsmall">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>
    <div class="user user-small">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>
    <div class="user user-base">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>
    <div class="user user-large">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>
    <div class="user user-xlarge">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>
    <div class="user user-xxlarge">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>

Some modifier classes to add the premium icon or give a clickable sensation


    <div class="user user-xsmall is-premium">
      <img class="user-avatar" src="images/avatar.jpg"/>
      <div class="user-premium-icon"></div>
    </div>
    <div class="user user-small is-premium">
      <img class="user-avatar" src="images/avatar.jpg"/>
      <div class="user-premium-icon"></div>
    </div>
    <div class="user user-large is-premium">
      <img class="user-avatar" src="images/avatar.jpg"/>
      <div class="user-premium-icon"></div>
    </div>
    <div class="user user-xxlarge is-premium">
      <img class="user-avatar" src="images/avatar.jpg"/>
      <div class="user-premium-icon"></div>
    </div>

    <br/>

    <div class="user user-large is-clickable">
      <img class="user-avatar" src="images/avatar.jpg"/>
    </div>

Badges

We are using two types of badges :

  • One for our officers and subjects members and the other for the follower.

Badges styles can be applied to any element. Typically you'll want to use either a <span> or an <li> element:

Badges Modifier Class
  • Default
    		•  badge
  • Primary
    		•  badge unchecked
  • Primary
    		•  badge badge-primary
  • Primary
    		•  badge badge-primary unchecked
  • Primary
    		•  badge badge-danger

    Dropdowns

    Forms

    Add some sugar to the default boostrap form control

        <textarea class="form-control" placeholder="What do you have in mind ?"></textarea>

    Links

    Default style of link is disabled. A link can force with the class .link or display a help link with the class .help-link

    Links Modifier Class
    Default
    Link link
    Help link link-help

    Medias

    Evernote Note with a Sharing Link as a demonstration of a very long title of a file I likeé
    Automated Code Review for evernote sharing solution in the cloud environment in the cloud environment in the cloud environment
    Azendoo sort du navigateur et prépare un mode déconnecté | Collaboratif-Info
    La revue en ligne des pratiques collaboratives : Entreprise 2.0, réseau social d'entreprise, Knowledge Management, communautés de pratique, ...
    http://www.collaboratif-info.fr/actualite/azendoo-sort-du-navigateur-et-prepare-un-mode-deconnecte
    image66011.jpg
    Nouveau texte modal de refresh
    by Fred Castagnac
    Shared from Dropbox 
        <div class="media-gallery-item media-gallery-item--floating">
      <div class="media-gallery-item-image media-gallery-item-image--medium">
        <img src="https://app.azendoo.com/gridfs/uploads/webfile/image/54466bb2324f7174e80005a1/az-page-background%20220141021-12006-dr3iou-7b8f8c487ad2890e9058c11383f59391.png"/>
      </div>

      <div class="media-gallery-item-content">
        <a class="u-bold" href="#">Evernote Note with a Sharing Link as a demonstration of a very long title of a file I likeé</a>
      </div>

      <div class="media-gallery-item-description text-muted small">
        Automated Code Review for evernote sharing solution in the cloud environment in the cloud environment in the cloud environment
      </div>

      <div class="media-gallery-item-controls clearfix">
        <a href="javascript:void(0)" class="pull-left media-gallery-item-control">
          <i class="fa fa-file-o"></i>
        </a>

        <ul class="pull-right">
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-arrow-down"></i></a></li>
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-trash"></i></a></li>
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-info"></i></a></li>
        </ul>
      </div>
    </div>

    <div class="media-gallery-item media-gallery-item--floating">
      <div class="media-gallery-item-image media-gallery-item-image--small">
        <img src="https://app.azendoo.com/gridfs/weblinks/mini_magick20141029-28290-9lwfwa.png"/>
      </div>

      <div class="media-gallery-item-content">
        <a class="u-bold" href="#">Azendoo sort du navigateur et prépare un mode déconnecté | Collaboratif-Info</a>
      </div>

      <div class="media-gallery-item-description text-muted small">
        La revue en ligne des pratiques collaboratives : Entreprise 2.0, réseau social d'entreprise, Knowledge Management, communautés de pratique, ...
      </div>

      <div class="media-gallery-item-link text-muted small">
        http://www.collaboratif-info.fr/actualite/azendoo-sort-du-navigateur-et-prepare-un-mode-deconnecte
      </div>

      <div class="media-gallery-item-controls clearfix">
        <a href="javascript:void(0)" class="pull-left media-gallery-item-control">
          <i class="fa fa-link"></i>
        </a>

        <ul class="pull-right">
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-info"></i></a></li>
        </ul>
      </div>
    </div>

    <div class="media-gallery-item media-gallery-item--floating">
      <div class="media-gallery-item-image media-gallery-item-image--large">
        <img src="https://app.azendoo.com/gridfs/uploads/webfile/image/5450a982324f716e82001b1a/image6601120141029-15796-1tmdbqt-9fa2065b878cb7a759a45f301b248981.png"/>
      </div>

      <div class="media-gallery-item-content">
        <a class="u-bold" href="#">image66011.jpg</a>
      </div>

      <div class="media-gallery-item-controls clearfix">
        <a href="javascript:void(0)" class="pull-left media-gallery-item-control">
          <i class="fa fa-picture-o"></i>
        </a>

        <ul class="pull-right">
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-arrow-down"></i></a></li>
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-info"></i></a></li>
        </ul>
      </div>
    </div>

    <div class="media-gallery-item media-gallery-item--floating">
      <div class="media-gallery-item-content">
        <a class="u-bold" href="#">Nouveau texte modal de refresh</a>
      </div>

      <div class="media-gallery-item-description text-muted small">
        by <a href="javascript:void(0)">Fred Castagnac</a>
      </div>

      <div class="media-gallery-item-separator"></div>

      <div class="media-gallery-item-description text-muted small">
        Shared from Dropbox
      </div>

      <div class="media-gallery-item-controls clearfix">
        <a href="javascript:void(0)" class="pull-left media-gallery-item-control">
          <i class="fa fa-dropbox"></i>
        </a>

        <ul class="pull-right">
          <li><a href="javascript:void(0)" class="media-gallery-item-control"><i class="fa fa-info"></i></a></li>
        </ul>
      </div>
    </div>

    Modal

    Panel

    Display pnal block of content in the html page

    The panel displayed content example 
        <div class="panel">
      The panel displayed content example
    </div>

    Popover

    Tooltip

    Well

    Display well block of content in the html page

    The well displayed content example 
        <div class="well">
      The well displayed content example
    </div>