分享一个Bootstrap的知识详解

PHPz
发布: 2018-10-13 17:06:23
原创
2026 人浏览过

1、Make Images Mobile Responsive

用处:   使图片适配你的页面宽度。

操作:   给图片添加 .img-responsive class属性。

<img src="/images/cat.jpg" class="img-responsive">
登录后复制

2、Center Text with Bootstrap

用处:   使文本居中。

操作:   给文本添加 center-text class属性。

<p class="text-center">Hi, I'm Yamei.</p>
登录后复制

补充:  .text-right、.text-left、.text-primary(文本内容带有个primary class)、.text-success、.text-muted(减弱)、.text-info、.text-warning、.text-danger

3、Create a Bootstrap Button

用处:   创建一个Bootstrap自己button风格的按钮。

操作:   给文本添加 btn class属性。

<button class="btn">Like</button>
登录后复制

 效果如下:

4、Create a Block Element Bootstrap Button

用处:  块级按钮(拉伸至父元素100%的宽度)。 创建一个块级的按钮,按钮将会伸展并填满页面,任何在块之后的元素将会自动浮动到下一行(换行)。

原理如下图(图片来自fcc):

操作:   保留 .btn class属性,加入.btn-block

<button class="btn btn-block">Like</button>
登录后复制

效果如下:

5、Taste the Bootstrap Button Color Rainbow

用处:  添加一个class为.btn-primary的原始(蓝色)按钮。

操作:   保留 .btn .btn-block class属性,加入.btn-primary

<button class="btn btn-block btn-primary">Like</button>
登录后复制

效果如下:

补充: .btn-danger、.btn-warning(谨慎操作的按钮)、.btn-info(用于要弹出信息的按钮)、.btn-default、.btn-link(让按钮看起来像个链接,但仍然保持按钮的行为)、.btn-success

          .btn-lg、.btn-sm、.btn-xs,分别为大、小、超小

          .disabled 禁用按钮

          .active 呈现按钮被点击的样子

       

                         (.active的效果图)

 

 *以上是我个人在FCC学习中的整理的笔记,小白一枚,如有错误欢迎大家留言指出~

【相关视频推荐:Bootstrap教程

以上是分享一个Bootstrap的知识详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板