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,一经查实,立即删除!

相关文章

linux开机启动nginx

1.从创建文件nginx 位置/etc/init.d/nginx 2.粘贴内容 #!/bin/sh # # nginx - this script starts and stops the nginx daemon # # chkconfig: - 85 15 # description: Nginx is an HTTP(S) server, HTTP(S) reverse \ # proxy and IMAP/POP3 proxy server #…

您可能不知道的五个高级Java同步器

除了基于每个Java对象具有的锁定位的通用同步外&#xff0c;您还可以使用Java中更复杂的同步器&#xff0c;例如&#xff1a; 信号量 –使用许可的概念表示一个位置中允许的最大线程数。 当使用值1时&#xff0c;其行为类似于同步&#xff0c;也称为二进制信号量。 但是&#…

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

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

借百度爸爸下蛋的好看搜索框

学习vue时写的一个小demo 虽然实现很简单&#xff0c;但还是推介看看&#xff0c;没什么难点&#xff0c;而且有些东西你可能会用到&#xff01;在线演示demo源码

数据库关系

第1层&#xff1a;高并发、高速查询 memory cached(内存高速缓存数据库)第2层&#xff1a;持久化保存 redis第3层&#xff1a;数据保存1、sql server,mysql,sqlite等关系型数据库2、mongo db 在很大程度上&#xff0c;redis可以替代mongo db&#xff08;持久化、文件保存&#…

web.config详解

<?xml version"1.0"?><!--注意: 除了手动编辑此文件以外&#xff0c;您还可以使用 Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的“网站”->“Asp.Net 配置”选项。设置和注释的完整列表在 machine.config.comments 中&#xff0c;该…

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

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…

[转] 分享一个快的飞起的maven的settings.xml文件

<?xml version"1.0"?> <settings> <localRepository>/home/yizhen/.m2/repository</localRepository><!--需要改成自己的maven的本地仓库地址--> <mirrors> <mirror> <id>alimaven</id> <name&g…

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

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

C8-2 圆的周长和面积 (100/100 分数)

题目描述 求圆的周长和面积&#xff0c;已知圆类从shape抽象类继承。 要求使用c class编写程序。可以创建如下class #include <iostream>using namespace std;const double pi 3.14;class Shape{public: Shape(){} ~Shape(){} virtual double getArea() 0; …

“前”方有坑,绕道而行(一)-- H5 CSS

1. 关于 数字、英文 不换行问题&#xff1b; 情景&#xff1a;昨天测试 小程序&#xff0c;输入英文&#xff0c;没有换行&#xff0c;且 下方有横向滚动条&#xff1b; 解决&#xff1a;word-break&#xff1b;  word-break:break-all; /*只对英文起作用&#xff0c;以字母…

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

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

SSM框架中常用的配置文件

学习框架&#xff0c;刚开始的时候最烦的就是一些配置文件&#xff0c;有很多需要配置的东西&#xff0c;今天把这些配置文件信息稍微整理一下&#xff0c;以后说不定会用的到。 web.xml文件 <?xml version"1.0" encoding"UTF-8"?> <web-app xm…

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

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

元素的居中方式总结

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

Man方法

Main方法相当一个主线程&#xff0c;JVM会自动寻找class文件中的main方法并执行(请思考tomcat加载java web项目启动的线程数和每次tomcat服务器接收到请求&#xff0c;是不是要发起一个线程去处理) 以下的例子展现了Main主线程中启动了两个分支线程&#xff08;mTh1和mTh2) pac…

八、网络服务集群

概述 neutron-server 接收和路由API请求到合适的OpenStack网络插件&#xff0c;以达到预想的目的。 5.1、控制节点安装 5.1.1、先决条件 在你配置OpenStack网络&#xff08;neutron&#xff09;服务之前&#xff0c;你必须为其创建一个数据库&#xff0c;服务凭证和API端点。 1…

JArchitect对Java开源贡献者免费

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