bootstrap样式代码案例

运行结果如下所示:
在这里插入图片描述
代码如下所示:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /><title></title><link href="css/bootstrap.css" rel="stylesheet" /><style type="text/css">.container{border: 1px solid black;}.row{border: 1px solid black;}.row div{border:1px solid black;}#sjdis{width: 200px;height: 200px;background: red;}</style></head><body><div class="container"><div class="row"><div class="col-md-1">一等分</div><div class="col-md-1">一等分</div><div class="col-md-1 col-md-offset-1">一等分</div><div class="col-md-4 col-md-offset-3">一等分</div></div><div class="row"><div class="col-md-4">四等分</div><div class="col-md-8">八等分</div></div><div class="row"><div class="col-md-4"><div class="row"><div class="col-md-4">6等分</div><div class="col-md-6">6等分</div><div class="col-md-2">2等分</div></div></div><div class="col-md-4">四等分</div><div class="col-md-4">四等分</div></div></div><span class="h1">我是h1</span><span class="h2">我是h2</span><span class="h3">我是h3</span><span class="h4">我是h4</span><span class="h5">我是h5</span><span class="h6">我是h6</span><span class="lead">测试文字</span><br /><p class="text-left">左对齐</p><p class="text-right">右对齐</p><p class="text-center">居中对齐</p><p class="text-justify">两端对齐</p><br />列表<ul class="list-inline"><li>首页</li><li>岗位课</li><li>商城</li><li>关于我们</li></ul><br />表单:<form class="form-horizontal" action="" method="post"><div class="form-group"><span class="text-center col-sm-2">姓名:</span><div class="col-sm-10"><input type="text" class="form-control input-lg" /></div></div><div class="form-group">邮箱:<input type="email" class="form-control input-sm" /></div><input type="submit" class="form-control" value="提交"/></form><br />按钮:<input type="button" class="btn btn-default" value="灰色" /><br /><input type="button" class="btn btn-primary" value="深蓝色" /><br /><input type="button" class="btn btn-success" value="绿色" /><div id="sjdis"></div></body><script type="text/javascript" src="js/jquery-1.12.4.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script>
</html>

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

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

相关文章

JS中用构造函数创建对象

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <script>/* 构造函数的执行流程&#xff1a;* 1.立刻创建一个新的对象* 2.将新建的对象设置…

史上最全阿里 Java 面试题总结

转载自 史上最全阿里 Java 面试题总结 以下为大家整理了阿里巴巴史上最全的 Java 面试题&#xff0c;涉及大量 Java 面试知识点和相关试题。 JAVA基础 JAVA中的几种基本数据类型是什么&#xff0c;各自占用多少字节。 String类能被继承吗&#xff0c;为什么。 String&#…

SELECT * FROM user WHERE username LIKE #{aaa}与SELECT * FROM user WHERE username LIKE '%${value}%'

在Mybatis中模糊查询like有两种写法&#xff1a; 第一种为SELECT * FROM user WHERE username LIKE #{aaa} 另一种SELECT * FROM user WHERE username LIKE ‘%${value}%’ LIKE #{aaa}执行的SQL为&#xff1a; 使用的是&#xff1f;占位符&#xff1a;对用的是preparedStatem…

bootstrap组件的案例代码

运行结果如图所示&#xff1a; 代码如下所示&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,user-scalableno,initial-scale1.0,maximum-scale1.0,mi…

了解 C# foreach 内部语句和使用 yield 实现的自定义迭代器

在本期专栏中&#xff0c;我将介绍我们在编程时经常用到的 C# 核心构造&#xff08;即 foreach 语句&#xff09;的内部工作原理。了解 foreach 内部行为后&#xff0c;便可以探索如何使用 yield 语句实现 foreach 集合接口&#xff0c;我将对此进行介绍。 虽然 foreach 语句编…

JS中的原型

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">/** 原型 prototype* * 我们所创建的每一个函数&#xff0c;解析器都会向函数中添加一个属性prototype* …

扫盲,为什么分布式一定要有Redis?

转载自 扫盲&#xff0c;为什么分布式一定要有Redis? 考虑到绝大部分写业务的程序员&#xff0c;在实际开发中使用 Redis 的时候&#xff0c;只会 Set Value 和 Get Value 两个操作&#xff0c;对 Redis 整体缺乏一个认知。所以我斗胆以 Redis 为题材&#xff0c;对 Redis …

Mybatis insert操作细节【ID】

默认情况下映射文件中插入数据&#xff1a; <insert id"saveUser" parameterType"com.itheima.domain.User">INSERT INTO user (username,address,sex,birthday) VALUES (#{username},#{address},#{sex},#{birthday})</insert>单元测试 Testp…

关于人脸识别最近浏览器打不开摄像头的解决方案

好久没有发公众号啦&#xff0c;因为最近没有在技术方面有更高的提升&#xff0c;关于人脸识别浏览器兼容问题一直很头疼&#xff0c;时至今日&#xff0c;随着浏览器的更新&#xff0c;代码也不得不更新一下了&#xff0c;今天主要是给大家解决一个谷歌浏览器里面的错&#xf…

C# 7 中的模范和实践

原文地址:https://www.infoq.com/articles/Patterns-Practices-CSharp-7 关键点 遵循 .NET Framework 设计指南&#xff0c;时至今日&#xff0c;仍像十年前首次出版一样适用。API 设计至关重要&#xff0c;设计不当的API大大增加错误&#xff0c;同时降低可重用性。始终保持&q…

JS重写toString(),打印想要的值

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title></title><script type"text/javascript">function Person(name , age , gender){this.name name;this.age age;this.gender gender;}//修改Perso…

Mybatis实体类属性名与数据库类名不对应的两种解决方法

在Mybatis开发时&#xff0c;如果 Bean的属性名与数据库的类名不一致时&#xff0c;CRUD将出现问题。 数据库类名 Bean的属性名&#xff1a;&#xff08;默认&#xff09; 调整Bean中的属性名&#xff1a;&#xff08;测试不一致&#xff09; 此时原有代码将会报错&#xff…

苹果CMS的V10版本后台登录一直提示验证码错误的解决方案

今天&#xff0c;好奇的我准备 搭建一个电影网站&#xff0c;一切准备就绪&#xff0c;刚开始出现的问题是&#xff0c;不支持fileinfo&#xff0c;然后不能继续安装&#xff0c;这个的解决方案是&#xff1a; 直接在服务器里面查找文件&#xff1a;phop.ini文件&#xff0c;查…

揭开Java 泛型类型擦除神秘面纱

转载自 揭开Java 泛型类型擦除神秘面纱 泛型&#xff0c;一个孤独的守门者。 大家可能会有疑问&#xff0c;我为什么叫做泛型是一个守门者。这其实是我个人的看法而已&#xff0c;我的意思是说泛型没有其看起来那么深不可测&#xff0c;它并不神秘与神奇。泛型是 Java 中一…

JS中数组的创建

/** 数组&#xff08;Array&#xff09;* - 数组也是一个对象* - 它和我们普通对象功能类似&#xff0c;也是用来存储一些值的* - 不同的是普通对象是使用字符串作为属性名的&#xff0c;* 而数组时使用数字来作为索引操作元素* - 索引&#xff1a;* 从0开始的整数就是…

ASP.Net防范XSS漏洞攻击的利器HtmlSanitizer

项目名称:HtmlSanitizer NuGet安装指令:Install-Package HtmlSanitizer 官方网站:https://github.com/mganss/HtmlSanitizer 开源协议:MIT 可靠程度:更新活跃,目前已经是3.x版,成熟靠谱。 1、 什么是XSS漏洞? XSS漏洞又称为“跨站脚本”漏洞,指的是网站对于用户输入的内…

个人借款合同范本

甲方&#xff08;借款人&#xff09;&#xff1a;_________________ 身份证号码&#xff1a;_____________________ 乙方&#xff08;贷款人&#xff09;&#xff1a;_________________ 身份证号码&#xff1a;______________________ 甲乙双方就借款事宜&#xff0c;在平等…

Mybatis中使用Dao实现类实现增删改查【实际开发中使用代理dao】

在Mybatis开发中&#xff0c;使用到的是代理Dao的方式实现增删改查&#xff0c;这样就不需要在写Dao的实现类 但是Mybatis也支持写Dao实现类&#xff01;即DaoImpl 直接上DaoImpl&#xff0c;之前的代码可以参考前面几篇文章。 DaoImpl类 package com.itheima.dao.impl;impor…

阿里巴巴制定了这 16 条

转载自 阿里巴巴制定了这 16 条 本文内容整理自《阿里巴巴Java开发手册 1.4.0》&#xff0c;获取完整版请在公众号后台回复关键字&#xff1a;手册。 1、【强制】存储方案和底层数据结构的设计获得评审一致通过&#xff0c;并沉淀成为文档。 说明&#xff1a;有缺陷的底层数…

中英文输入

一、鼠标&#xff1a; 1.是一种输入设备。 2.主要包括&#xff1a;左键&#xff0c;滑轮&#xff0c;右键。 3.常用的操作&#xff1a;移动&#xff0c;单击&#xff0c;双击&#xff0c;右击&#xff0c;拖拽。 二、键盘&#xff1a; 1.输入设备。 2.常用的键盘分为&#xff1…