Bootstrap3基础 btn-xs/sm... 按钮的四种大小

礼悟：
　　公恒学思合行悟，尊师重道存感恩。叶见寻根三返一，江河湖海同一体。
虚怀若谷良心主，愿行无悔给最苦。读书锻炼养身心，诚劝且行且珍惜。

　　     ide：visual studio 2017　　
            browser：Firefox / Chrome
   　　bootstrap：3.3.7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <!-- 页面的宽度与设备屏幕的宽度一致 -->
	<meta name="viewport" content="width=device-width">
	<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
	<meta name="viewport" content="initial-scale=1">
	<!-- 禁止用户缩放 -->
	<meta name="viewport" content="user-scalable=no">

    <!-- 引入外部bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
    <button class="btn btn-primary">btn-primary</button>
    <button class="btn btn-warning btn-xs">btn-warning</button>
    <button class="btn btn-success btn-sm">btn-success</button>
    <button class="btn btn-info btn-lg">btn-info</button>
</body>
</html>

效果

Bootstrap，优秀的前端开源框架，值得学习。
学习资源：v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源，可以分享给我的话，用您的资源学习也可以。
博文是观看视频后，融入思考写成的。博文好，是老师讲得好。博文坏，是给最苦没认真。

原文地址：https://www.cnblogs.com/jizuiku/p/8282606.html

时间： 2024-08-30 09:33:37

Bootstrap3基础 btn-xs/sm... 按钮的四种大小的相关文章

css中按钮的四种状态

css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下,不弹起 .btn2用active按钮点击按下,会弹起 <button class="btn btn1">Save Settings</button> <button class="btn bt

Android基础总结之三：Activity的四种Launcher Mode（转）

转:http://m.blog.csdn.net/blog/shift_wwx_2010/9225951 •••••••••••••••••••••••••••••••••••••••••••••••••••••••• 前言:这篇文章参考的资料比较多,我觉得这个launcher mode比较关键,我会尽量完善再完善. launchMode在多个Activity跳转的过程中扮演着重要的角色,它可以决定是否生成新的Activity实例,是否重用已存在的Activity实例,是否和其他Activity

页面上画按钮的四种方法

在一个页面上画一个按钮,有四种办法: <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生. <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它. <button> 这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容.(当然

C#基础入门学习笔记——C#的四种基本数据类型

字符类型 char ,存储用''(单引号)括起来的一个字符,例如: char sex='男';//存储性别字符串类型 string ,存储用""(双引号)括起来的一串字符,例如: string address="北京市宣武区牛街北口";//存储地址整数类型 int ,存储整数,例如: int age=23;//存储年龄双精度浮点型 double ,存储小数,例如: double salary=7991.63;//存储工资以上四种是最常用的数据类型. 需要注意

Android点击Button按钮的四种事件监听方法总结

首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="m

Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Firefox / Chrome bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

Android中按钮的点击事件的四种写法

如题,在Android中按钮的点击事件有四种写法,如下图. 界面为四个Button+一个TextView+一个ImageView activity_main布局文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

Android的按钮四种点击事件

本文记录一下按钮的四种点击事件第一种 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //------------第一种---------------------- Button

基础总结篇之二：Activity的四种launchMode （转载）

转自:http://blog.csdn.net/liuhe688/article/details/6754323 合抱之木,生於毫末:九層之台,起於累土:千里之行,始於足下.<老子> 今天在社区看到有朋友问“如何在半年内成为顶级架构师”,有网友道“关灯睡觉,不用半年的...”,的确,做梦还来的快一些.作为一个程序员,树立远大的目标是值得欣赏的,但不能只去空想,要一步一步地实践才行.成大事者,须从小事做起:万事起于忽微,量变引起质变. 我们今天要讲的是Activity的四种launchMode.