BootstrapBootstrap学习笔记01

1、Make Images Mobile Responsive

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

操作:   给图片添加 .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

据此处:
 块级按钮(拉伸到父元素100%的增长率)。
创建一个块级的按钮,按钮将会见展开并填写满页面,任何在片后的素以会晤自动生成至下一行(换行)。

原理如下图(图片来源于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学习着之整治的记,小白同枚,如发生不当欢迎大家留言指出~

相关文章