Bootstrap学习笔记01

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学习中的整理的笔记,小白一枚,如有错误欢迎大家留言指出~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368680.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2017-2018-2 20179216 《网络攻防与实践》 SQL注入攻击

1. SQL语言 结构化查询语言(Structured Query Language)简称SQL&#xff1a;是一种特殊目的的编程语言&#xff0c;是一种数据库查询和程序设计语言&#xff0c;用于存取数据以及查询、更新和管理关系数据库系统&#xff1b;同时也是数据库脚本文件的扩展名。 2. SQL注入 SQL注…

华为智能手表与鸿蒙,不再是大号手环!华为鸿蒙手表来了:要和苹果抢生态?...

5 月 27 日上午&#xff0c;华为终端官方微博官宣&#xff0c;WATCH 3 腕上智慧&#xff0c;一表万象&#xff0c;旗舰归来&#xff0c;将于 6 月 2 日晚 20:00 与 HarmonyOS、MatePad Pro 2 等产品一同发布。依靠手环的超高销量&#xff0c;华为、小米等企业发力&#xff0c;在…

页面重构-让我们的布局自适应

css重构之旅 >前言&#xff1a; 今年我大一,马上就要大二了。从高三毕业暑假到大学的这一年马上过去&#xff0c;马上迎来大二生活.学习前端也有将近一年了。一昧去追求那些视觉的效果和相对高端和新颖的技术&#xff0c;反而忽略了最基础的布局技巧。 回味 2017年3月&am…

重新同步多线程集成测试

我最近在Captain Debug的Blog上偶然发现了一篇文章“ 同步多线程集成测试 ”。 该文章强调了设计涉及被测类以异步方式运行业务逻辑的集成测试的问题。 给出了这个人为的示例&#xff08;我删除了一些评论&#xff09;&#xff1a; public class ThreadWrapper {public void d…

鸿蒙文化博物馆,有趣、有味、有文化!“周末儿童博物馆”在成博欢乐启幕

昨晚&#xff0c;成都博物馆“周末儿童博物馆”儿童节特别活动“六一欢乐会”拉开帷幕&#xff0c;丰富多彩的各种活动及精彩表演吸引了大批小朋友走进博物馆&#xff0c;提前度过了一个有趣、有味、有文化的“六一”国际儿童节。根据常设展“人与自然&#xff1a;贝林捐赠展”…

Spring MVC:表单处理卷。 3 –复选框处理

我已经发布了有关使用Spring MVC标签库处理checkbox标签的帖子。 现在&#xff0c;我要开发此主题并继续使用“复选框”标签。 它并不难&#xff0c;但是在某些情况下&#xff0c;您最好使用它。 在本文中&#xff0c;我将结合java.util.List和java.util.Map提供Springcheckbox…

html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音

在应用系统的开发过程中&#xff0c;经常要使用到新消息的提醒功能&#xff0c;比如说后台有一个告警消息&#xff0c;web页面就会实时的收到这个告警的消息&#xff0c;且发出提示音。这其实就是涉及到两个方面的知识&#xff0c;一个是http实时消息的推送&#xff0c;在这儿我…

元素的居中方式总结

最近有点空闲时间&#xff0c;所以想好好看看几个一直没机会看的问题。把它写下来&#xff0c;是促进自己更好地理解&#xff0c;同时也是一个备忘吧&#xff01; 先说元素居中&#xff0c;元素居中&#xff0c;从最开始接触前端就一直挥之不去的一个问题&#xff0c;也许是太…

JArchitect对Java开源贡献者免费

JArchitect是用于Java代码库的静态分析工具&#xff0c;它提供交互式GUI和HTML报告&#xff0c;用于查找代码中过于复杂或有问题的区域&#xff0c;执行分析以重构并比较随时间的变化。 在版本3中&#xff0c;添加了类似LINQ的查询语言&#xff0c;该工具使该工具成为功能极其强…

android让一个控件跟上面控件对其,学个明白--Android控件架构

Android控件架构1.什么是View&#xff1f;View是Android中所有控件的基类。View是界面层的控件的一种抽象&#xff0c;它代表了一个控件。在Android中每个控件都会在界面中占得一块矩形的区域。在Android中控件被分为两类&#xff1a;View和ViewGroup。ViewGroup控件作为父控件…

分享一个自制的计算子网划分的小工具

使用 javascirpt 写的&#xff0c;因此可以使用浏览器浏览即可 code: <meta charset"utf-8">输入划分网段的数量&#xff1a; <input id"inp_netCount" /> <input type"button" οnclick"createElem()" value"sta…

tmux颜色高亮跟vim不一致的情况

安装完tmux之后&#xff0c;按照网上大神的配置&#xff0c;稍微配置了下~/.tmux.conf&#xff1a; # 改变快捷键前缀 unbind C-b set -g prefix C-a # 绑定配置加载按键 bind r source-file ~/.tmux.conf \; display-message "Config reloaded.."# 设置终端类型为2…

html5表白页面3d,七夕节表白3d相册制作(html5+css3)

七夕节表白3d相册制作涉及知识点定位阴影3d转换动画主要思路&#xff1a;通过定位将所有照片叠在一起&#xff0c;在设置默认的样式以及照片的布局&#xff0c;最后通过设置盒子以及照片的旋转动画来达到效果。代码如下&#xff1a;3d相册/* 使用单位将所有照片叠在一起 */img{…

(1)pandas 基础教程

步骤1、环境准备 右击桌面上选择【Open in Terminal】 打开终端。在弹出的终端中输入【ipython】进入Python的解释器中&#xff0c;如图1所示。 图1 ipython解释器步骤2、导入所需要的包 导入实验常用的python包。如图2所示。【import pandas as pd】pandas用来做数据处理。【i…

CSS3效果:波浪效果

实现效果 如图所示&#xff1a; 首先得准备三张图&#xff0c;一张是浅黄色的背景图loading_bg.png&#xff0c;一张是深红色的图loading.png&#xff0c;最后一张为bolang.png。 css代码 body{background:#ffe894;}.loading_bg{width:113px; height:111px;background:url(lo…

html创建文件域的代码,word如何插入域代码

在word里怎么进行域代码的设置&#xff1f;如果知道要插入的域的域代码&#xff0c;可以将其直接键入在文档中。首先按 CtrlF9&#xff0c;然后在括号中键入代码就可以了。【Word插入域方法】1、Word2007中&#xff0c;在要插入域的位置单击。2、在“插入”选项卡上的“文字”组…

前端页面适配的rem换算

为什么要使用rem 之前有些适配做法&#xff0c;是通过js动态计算viewport的缩放值&#xff08;initial-scale&#xff09;。 例如以屏幕320像素为基准&#xff0c;设置1&#xff0c;那屏幕375像素就是375/3201.18以此类推。 但直接这样强制页面缩放过于粗暴&#xff0c;会导致页…

css清除浮动

css设计浮动属性的主要目的&#xff0c;是为了实现文本绕排图片的效果。 一.浮动 当浮动一张图片或者其他元素时&#xff0c;浏览器会将浮动元素往上方推&#xff0c;直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了&#xff0c;因为它就会占…

gitlab搭建配置;ssh配置;

1.centos7上搭建gitlab&#xff0c;过程略&#xff1b; 命令&#xff1a;gitlab-ctl [start] [stop] [restart] [reconfigure] [tail] 查看gtilab日志 [status] 查看gitlab运行状态信息 2.修改默认ip端口&#xff1a; vim /etc/gitlab/gitlab.rb &#xff1b; external_url h…

家用计算机历史记录,教您如何查看电脑使用记录

很多朋友想查看自己之前使用过的文件或者文档来查询资料&#xff0c;或者是想看电脑是否被人使用过&#xff0c;但是&#xff0c;如何查看电脑使用记录呢&#xff1f;下面系统之家小编教大家查看电脑使用记录小技巧&#xff0c;不用担心找不到电脑使用记录。希望对大家有所帮助…