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

可以吗,Copy了几天,那一个总结算是把自个儿对Bootstrap的一对知道写一下啊。

Bootstrap只是一套外人写好的前端框架,直接拿来用就好。

唯独对于规范的前端而言,假设不去把装有的代码都看二次来精通的话,大概也就只是浮于表面而已了。

学学当中的CSS和js,才是王道!

假设你只是1个和自家同一的写后台的,只想浮于表面,快捷利用的人,那么可以看接下来本身自身写的有个别用来回想的事物。要是是前者,那么照旧不要看了。

看了后面的那多少个章节,让大家来归纳写2个用来飞快上手的小列表。在此地笔者也只写一些最通用的:

主导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篇都大约从网上搜罗示例复制粘贴。

理所当然主要缘由是节后综合症,有点懈怠了呀~~(☆_☆)~

相关文章