技术控

    今日:110| 主题:49431
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Creating A Bootstrap Admin Template With Charts

[复制链接]
檐铃伴风夜成眠 发表于 2016-10-7 08:30:05
121 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Hey hey! It has now been a few weeks since I have put together a tutorial for you guys! I just recently worked with Bootstrap for a small landing page project , which sparked the idea to put together a Bootstrap admin template for you with some charts!
  Like every tutorial, I try to keep it brief and informative to inspire a few ideas for usage! So this will just be a simple admin dashboard layout for you to branch off of!
  Bootstrap Admin Dashboard

   We have noticed a lot of our users have their own admin dashboards running with ZingChart. This seems to be the way a lot of companies are building the basis of their reporting and results. Bootstrap is a useful framework for putting together front-end web design projects fast.
  This quick demo took me about an hour to put together with charts included, so Bootstrap is definitely really efficient to work with.
   Note:You will need to load in the Bootsrap CDN link to your HTML tags before beginning!
  Bootstrap Grid System

   Let's jump right in! The bootstrap grid system is the basis of building out an admin template. It is based on three elements. The "container"
, the "row"
, and the "col"
.
  These are actually three web components that Bootstrap has put together. That have inherent properties within them. Together they form the basis of the very popular Bootstrap grid system.
   Most of these components are housed within a
that is given a Bootstrap specific class name. This comes with its own built-in attributes. It is similar to giving your regular
elements classes, except these come with some properties built in! Pretty cool.
  "Container"

   This is a very common class used in web development that is used for the same purpose in Bootstrap. The "container"
holds all of the content together. Very simple, very intuitive.
  "Row"

   "Row" is another component as well. This div just adds one horizontal row for all of your column components to be housed in. You can have multiple rows in one container based on the type of layout you want content.
  "Col"

   The "column" component is essentially the main make-up of the Bootstrap grid system. This is where all of the functionality is placed. There is a small amount of math and logic that applies here, but it is quick to pick up.
   The system is based on the ability to house 12 columns across your "row" . You can choose any combinations of numbers 1-12 that together, add up to 12.
   There are also different sized columns to choose from. They come in extra-small, small, medium, and large. This dictates the width of your "columns" within the " row ". Here are examples of the column class syntax:
  
       
  •   Extra Small:
    .
       
  •   Small:
    .
       
  •   Medium:
    .
       
  •   Large:
    .
      
  Grid Example

  Here is a visual below to show you how this grid system works! It is showing the system behind extra small columns.
   
Creating A Bootstrap Admin Template With Charts-1 (framework,companies,efficient,reporting,recently)

  Dashboard

  Cool! You now have a brief rundown. Let's build out this dashboard! This will be comprised of two chart sections, a navbar, and a sidebar panel. Just the pure essentials of a simple admin page.
  Navbar

   The navbar I used in this demo was the default bootstrap navbar-default class. The
    contains another Bootstrap component for the navbar with some simple
  • . It also contains a "navbar-header" div where your logo would normally go (I chose to just place text link).
      You can do a number of different things here, but I kept it pretty basic and put in some small CSS changes like background color and font. Other than that the code is pretty basic. Here it is below:
      [code][/code]  Sidebar Panel

       The sidebar panel is also another feature Bootstrap has a component for. I used the panel panel-default class for this. Within this panel-default are components for panel-heading and panel-body , which I used. These just contain links. Here is the code below:
      [code]


            

              Dashboard
            


            

              Messages
            


            

              Widgets
            


            

              Analytics
            


            

              Forms
            


          
    [/code]  Columns

      The columns are the next thing I added. This dashboard was (loosely) inspired by a shot I saw on Dribbble. I needed to set up a column grid system with three individual panels. Bootstrap makes this very easy with their responsive columns.
       I wanted one smaller sidebar, one main chart that takes up a lot of space, and a set of three charts that makes up the rest. I figured the sidebar could be a col-xs-2 , the main chart could be a col-xs-6 , and the last set of charts could be a col-xs-4 .
       I used the extra-small columns here so it would fit within the iframe on this blog post. For standard web design, you should most likely use medium columns! Here is the set up of the code:
      [code]


      


       


          


            

              Dashboard
            


            

              Messages
            


            

              Widgets
            


            

              Analytics
            


            

              Forms
            


          


       


       


          


       


       


          


       


      


    [/code]  Here is the full functioning dashboard below!
      Read more!
      ZingChart

       I used ZingChart within this Bootstrap admin dashboard. I won't go too much into the creation of these charts (you can see check the "JS" tab to see) . However, there are two things here that are vital to using the charts on this page.
      
         
    • You need to give the charts individual ID names and render names for them to both render on the page (common mistake).
         
    •   If you give them a height and width of 100% they will be truly responsive as the built in Bootstrap components are (these components are inherently built to respond to different device sizes).
         
    •   If you want stacked charts in one
      you can use agraphset!
        
      Data Sources

      If you are in the process of creating an admin dashboard, you will definitely be pulling some of your data into this. ZingChart offers some pretty extensive docs on how to do this:
      
         
    •   MySql
         
    •   JSON
         
    •   PHP & Ajax
        
      Conclusion

      Right on! We now have the basis for a very basic Bootstrap admin dashboard! I hope you have more than enough information to get going on one of your own projects!
       If you have any additional questions, post a comment below. Or, you can reach us through chat on ourwebsite!
友荐云推荐




上一篇:Quick Tip: Use Enums in Rails for Mapped Values
下一篇:ForceUpdate
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

纪兴胜 发表于 2016-10-9 05:08:25
好贴,好贴,必须顶一个!
回复 支持 反对

使用道具 举报

jiangtaoataotao 发表于 2016-11-15 08:29:12
视死如归的架势啊!
回复 支持 反对

使用道具 举报

bhbo 发表于 2016-11-18 21:30:49
我女友不当尼姑的原因是她四级没过,庵里不收.
回复 支持 反对

使用道具 举报

如果头顶上发个 发表于 2016-11-20 18:01:44
千金散尽还复来,莫把金樽空对月!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表