BootstrapBootstrap学习笔记01

1、Make Images Mobile Responsive

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

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

<img src="t.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>

 效果如下:

Bootstrap 1

4、Create a Block Element Bootstrap Button

用处:
 块级按钮(拉伸至父成分百分之百的拉长率)。
成立一个块级的按钮,按钮将会张开并填满页面,任何在块之后的成分将会自行生成到下一行(换行)。

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

Bootstrap 2

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

<button class="btn btn-block">Like</button>

功能如下:

Bootstrap 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>

作用如下:

Bootstrap 4

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

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

          .disabled 禁止使用按钮

          .active 彰显按钮被点击的规范

        Bootstrap 5

                        
(.active的成效图)

 

 *如上是自作者个人在FCC学习中的整理的笔记,小白一枚,如有错误欢迎大家留言提议~

相关文章