分享一个Bootstrap的知识详解

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>

效果如下：

易语言学习手册 十天学会易语言图解教程 pdf版

十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。 第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

3

查看详情

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中文网其它相关文章！