noop(); pop(); map();

    @bndynet/bbootstrap

    2.2.1 • Public • Published
    ,-----.   ,--.  ,--. ,------. ,--.   ,--.     ,--.  ,--. ,------. ,--------.
    |  |) /_  |  ,'.|  | |  .-.  \ \  `.'  /      |  ,'.|  | |  .---' '--.  .--'
    |  .-.  \ |  |' '  | |  |  \  : '.    /       |  |' '  | |  `--,     |  |
    |  '--' / |  | `   | |  '--'  /   |  |   .--. |  | `   | |  `---.    |  |
    `------'  `--'  `--' `-------'    `--'   '--' `--'  `--' `------'    `--'
    

    Bbootstrap

    npm npm

    A set which includes some useful components. Demo

    Components

    Note: You can use the above components in your project directly. So don't need include them. If you need moment locales support, you should add library to your website.

    Quick start

    <link rel="stylesheet" href="https://unpkg.com/@bndynet/bbootstrap/dist/css/bbootstrap.min.css">
    <script src="https://unpkg.com/@bndynet/bbootstrap/dist/js/bbootstrap.min.js"></script>
    
    <script>
        bb.setup();
    </script>

    Below are available themes, you can use one of them instead of bbootstrap.min.css.

    • bbootstrap-dark.min.css
    • bbootstrap-meterail.min.css

    Application Utils

    bb.toggleLeftSide();
    bb.toggleRightSide();
    bb.alert('');
    bb.confirm('', function(){} [, function(){}]);
    bb.prompt('', function(val){});
    bb.info('');
    bb.success('');
    bb.error('');
    bb.loading();
    bb.loading(false);

    Advanced Customization

    Default English, you can define your languages as below:

    // MUST be before `setup` method
    bb.defineLang('zh-CN', {
        ok: '确定',
        cancel: '取消',
        yes: '是',
        no: '否',
        browse: '浏览'
    });
    bb.setup({
        locale: 'zh-CN',
    });
    console.log(bb.langs.default); // print default and you can overwrite them using above code

    Below are available options, you can override them via bb.setup({}).

    {
        locale: 'en-US',
        // Moment.js format used
        datetimeFormat: 'YYYY-MM-DD H:mm',
        timeFormat: 'H:mm',
        dateFormat: 'YYYY-MM-DD'
        alertify: {
            maxNotifications: 2,
            closeNotificationOnClick: true,
            delay: 5000,
            customeClass: '',
            notificationPosition: "bottom right",
        },
        // Below is for enabling page loading progress bar for ajax, document and all events
        progressBar: {
            theme: 'primary|secondary|success|info|warning|danger|dark|light',  // theme in bootstrap, or
            color:  '#ff0000',
        },
    }

    Changelog

    v2.2.0

    • Refactor style code to support custom themes
    • Add dark theme

    v2.1.0

    • New component: Pin element on window top when scroll the element position $('#id').pinTopOnScroll([resolve, reject])

    v2.0.0

    • Remove locales of moment.js and animate.css as option

    v1.6.4

    • New style .text-placeholder to hide real text - Demo

    v1.6.3

    • Supports to customize file input button text in language

    v1.6.2

    • Add new icons
    • Fix some icons size and position

    v1.6.1

    • New style .card-flip for Card
    • Fix some typos
    • Alias bb for bbootstrap
    • Alias methods bb.alert, bb.confirm, bb.prompt bb.info, bb.success, bb.error and bb.loading

    v1.6.0

    v1.5.1

    • Rewrite .alert styles
    • Add .layout-admin-[primary|success|...]
    • Add .dropdown-menu-[primary|success|...]

    v1.5.0

    • Rename .side-left to .sidebar-main
    • Rename .side-right to .sidebar-assist
    • Admin Layout
    • New styles .shadow-xs and .shadow-hover for existing shadows in bootstrap - Code
    • New styles .toggle-hover to toggle .hover-show and .hover-hidden - Code

    v1.4.1

    • Fix some bugs

    v1.4.0

    • Perfect layout styles
    • Add .tags, .tag, .tag-theme styles - Demo
    • Enhancement for .card with .card-sm and .card-theme - Demo
    • Add .workflow styles - Demo

    v1.3.1

    • Fix some bugs
    • Add icons without font

    v1.3.0

    • Styles: Add some layout styles
    • Component(progressBar): By default the page progress bar is disabled unless set progressBar.theme or progressBar.color
    • Component(progressBar): rename option pace to progressBar
    • Component(alertify): closeNotificationOnClick is true by default

    v1.2.1

    No changes

    v1.2.0

    • Add momentjs library
    • Add Lodash library
    • Add datatime picker component
    • Add pretty select component
    • Add dialog component
    • Add language customization support
    • Mark method bbootstrap.setup() is required for enabling some js components

    v1.1.2

    • Fix README typo

    v1.1.1

    • Add themes support for pace via bbootstrap.setup({pace: {theme: 'theme in bootstrap'}}}
    • The page loading progress will not be displayed by default, unless you set color or theme of pace

    v1.1.0

    • Add alertify component
      alertify.alert('message');
      alertify.confirm('message', fnOK [,fnCancel]);
      alertify.notify|success|error('message' [, fnCallback]);
    • Add automatic page load progress bar for ajax request, document loading and so on
    • Add method bbootstrap.setup({}) for configurating global settings

    v1.0.2

    • Add styles about overflow
    • Add styles about status and loading
      // loading for full screen
      $.bloading();
      $.bloading(false);
      // loading for specific element
      $('#id').bloading('bounce-rectangle', 'primary');
      $('#id').bloading('circle', 'info');
      $('#id').bloading(false);
    • Add styles about link and link list
    • Add tooltip via JavaScript
      $('#id').btooltip('title', 'placement');    // show tooltip, placement is optional
      $('#id').btooltip(false);                   // close tooltip

    v1.0.1

    • Add text block styles
    • Add input with feedback styles
    • Enhancement: Show selected file for file input of bootstrap

    v1.0.0

    • Add pretty Checkbox and Radio

      <!-- checkbox -->
      <div class="form-check checkbox checkbox-primary">
          <input class="form-check-input" id="checkbox1" type="checkbox">
          <label class="form-check-label" for="checkbox1">Check me</label>
      </div>
      
      <!-- radio -->
      <div class="form-check radio radio-primary">
          <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
          <label class="form-check-label" for="radio1">Option 1</label>
      </div>

    Install

    npm i @bndynet/bbootstrap

    DownloadsWeekly Downloads

    19

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    3.9 MB

    Total Files

    18

    Last publish

    Collaborators

    • bndy