Bootstrap初试

总体感觉就是,Bootstrap的画风整体好唯美,简约。但是功能又很强大。个人来说,挺喜欢这种风格。
参考资料

初涉框架,觉得要熟悉一个框架,就是要熟悉框架能提供的效果,代码什么的查一下就可以了。若理解不对,望大佬指正。

Bootstrapd的使用非常简单,往往是在元素上添加特定的类就能达到框架的效果。

因为Bootstrap样式很多,就不全列了,选了一些个人比较喜欢比较常用的一些。

1.网格系统

Bootstrap的这个系统很好地解决了布局的问题


Bootstrap网格系统
Bootstrap网格系统

并且,在4+8的布局中,可以把“8”再分为12个网格进行布局

  <div class="container">
     <div class="row" >
        <div class="col-md-4"></div>
        <div class="col-md-8">
              <div class="col-md-4"></div> //每一个模块都能放元素
              <div class="col-md-4"></div>
              <div class="col-md-4"></div>
        </div>
    </div>
</div>

</div>

2.按钮

Bootstrap的按钮基本上是圆角的,不会像没有CSS修饰过的那么难看。


按钮

而且经常在导航栏内需要用到按钮组


按钮组

好清淡的风格呀~~

3.表单

在登录界面需要用到input的输入框,Bootstrap有完整的框架可直接套用


表单

4.模态框

这一个算是我最喜欢bootstrap的一点,挺方便的

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

模态框

一般使用按钮作为模态框的触发器
并且可以在一个页面中设定多个模态框,然后为每个模态框创建不同的触发器

以上这些只是bookstrap的一小部分,还有响应式工具....等等很多强大的工具,继续慢慢挖掘吧。这种清新而不做作的画风,我可是很喜欢咧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,065评论 0 66
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,935评论 3 184
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,129评论 0 42
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,523评论 25 708
  • 如果没有记错,我是2015年注册的简书账号,今年7月11号的时候我才写了第一篇文章,像是暌违已久,又像初来乍到,两...
    Jing_hm阅读 261评论 2 4