Bootstrap【Bootstrap基础学习】05 Bootstrap学习总结

吓吧,Copy了几乎天,这个总结算是将自己本着Bootstrap的有的了然写一下咔嚓。

Bootstrap只是同一效别人写好的前端框架,直接用来用就好。

唯独对规范的前端而言,如果非失管拥有的代码都扣留同样举来理解吧,恐怕也就一味是浮于表面要一度了。

读其中的CSS和js,才是王道!

设若您唯有是一个暨自身同一的写照后台的,只想浮于表面,快速利用的丁,那么得看接下来自己要好写的一些用于记忆之物。如果是前者,那么还是不要扣了。

扣押了面前的那些章节,让我们来简单写一个用来快速上手的略列表。在此间我也仅写一些顶通用的:

基本CSS(基础,这是我们的底蕴)

  • 布局:container  row  col-*-*(xs,sm,md,lg  1-12)
  • 排版:text-*
  • 表格:table-*
  • 表单:form-*
  • 按钮:btn-*
  • 图片:img-*
  • 设施显隐:visible-*-*  hidden-*-* (xs,sm,md,lg  1-12)

零件CSS(组合系,需要般配局部role什么的,按自然的平整来采取)

  • 字图标:glyphicon-*
  • 下拉菜单组件:dropdown-*
  • 输入框组:input-*
  • 导航(tab页):nav-*
  • 导航栏:**navbar-*
  • 标签:label-*
  • 警告:alert-*
  • 进度条:progress-*
  • 媒体:media-*
  • 列表:list-*
  • 面板:panel-*

按钮或标签的data-toggle类型(控制系,可以直接按一定之零件规则来娱乐,大多数啊可以直接用js语句来弄)

  • 下拉菜单:dropdown

    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
          data-toggle="dropdown">
    
  • 折叠面板:collapse

  • 模态框:modal
  • tab页切换:tab
  • tooltip提示:tooltip
  • 弹出框:popover

吓吧,这是自自己总结的老三单切入点,可以助我们迅速稳定要哪一样片的东西。具体的拉开扩展或者局部任何的琐碎东西就不写了,都可百度到。

学Bootstrap用时9龙,时间重点花在扣押各种零部件和用每种示例,除了本篇外此前写的4篇都多起网上搜罗示例复制粘贴。

自然主要原因是节后综合症,有点懈怠了哟~~(☆_☆)~

相关文章