测开之路一百二十一:常用组件之助手类
时间:2019-08-31
本文章向大家介绍测开之路一百二十一:常用组件之助手类,主要包括测开之路一百二十一:常用组件之助手类使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一些工具的使用
引入标签
上下文背景
原样式
加背景色:bg-xxx
插入符号图标:caret
内容块居中:center-balock
快速浮动
原格式
分别往两边浮动
显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap布局</title>
<!--网页源数据跨平台兼容做一些说明-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--跨屏自适应说明-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入font-awesome-->
<link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!--bootstrap和jquery-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>助手类</h1>
<p></p>
<!--上下文背景-->
<!--原样式-->
<div class="container">
<div class="row">
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<p>段落五</p>
</div>
</div>
<p></p>
<!--改背景色bg-xxx-->
<div class="container">
<div class="row">
<p class="bg-primary">段落一</p>
<p class="bg-default">段落二</p>
<p class="bg-success">段落三</p>
<p class="bg-danger">段落四</p>
<p class="bg-warning">段落五</p>
</div>
</div>
<p></p>
<!--插入符号图标-->
<div class="container">
<div class="row">
<div class="btn-group">
<button class="btn btn-primary">首页</button>
<button class="btn btn-primary">个人资料</button>
<button class="btn btn-primary">邮件 <span class="caret"></span></button>
</div>
</div>
</div>
<p></p>
<!--内容块居中:center-block-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div style="width: 200px" class="bg-danger center-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi, aspernatur atque dolores
maiores quas quod ullam vero. Culpa dicta facilis incidunt, iure laudantium optio sapiente tempore
totam velit voluptate!</p>
</div>
</div>
</div>
</div>
<p></p>
<!--快速浮动-->
<!--原格式-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet cum dolore eveniet inventore,
ipsam laboriosam libero maxime minus modi mollitia nam nesciunt officia praesentium, quisquam
repellat,
sapiente velit veritatis.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet cum dolore eveniet inventore,
ipsam laboriosam libero maxime minus modi mollitia nam nesciunt officia praesentium, quisquam
repellat,
sapiente velit veritatis.</p>
</div>
</div>
</div>
</div>
<p></p>
<div class="container">
<div class="row">
<div class="col-md-12">
<!--给定一个宽度-->
<div style="width: 300px;border: 1px solid #000" class="pull-left"><!--往左:pull-left-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet cum dolore eveniet inventore,
ipsam laboriosam libero maxime minus modi mollitia nam nesciunt officia praesentium, quisquam
repellat,
sapiente velit veritatis.</p>
</div>
<div style="width: 300px;border: 1px solid #000" class="pull-right"><!--往左:pull-right-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet cum dolore eveniet inventore,
ipsam laboriosam libero maxime minus modi mollitia nam nesciunt officia praesentium, quisquam
repellat,
sapiente velit veritatis.</p>
</div>
</div>
</div>
</div>
<!--显示和隐藏-->
<p></p>
<!--默认是显示的-->
<div class="container">
<div class="row">
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias delectus deleniti dolorum explicabo
ipsam quisquam sed similique sunt vel. Aut ducimus eveniet excepturi fugiat impedit quod repellat tempora
ullam!</p><!--内容和位置均消失:hidden-->
<p class="show">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias delectus deleniti dolorum explicabo
ipsam quisquam sed similique sunt vel. Aut ducimus eveniet excepturi fugiat impedit quod repellat tempora
ullam!</p>
<p class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias delectus deleniti dolorum explicabo
ipsam quisquam sed similique sunt vel. Aut ducimus eveniet excepturi fugiat impedit quod repellat tempora
ullam!</p><!--内容消失,位置不消失:invisible-->
</div>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/zhongyehai/p/11440508.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何在Linux中设置快捷方式图标
- foreman ubuntu16 快速安装
- Three.js教程(2):工具篇
- Linux系统多网卡环境下的路由配置详解
- 前端3D文字效果
- Bash中尖括号的更多使用方法
- linux mpstat命令使用详解
- CentOS7安装调试Mysql数据库的步骤详解【实例】
- 深入理解Bash中的尖括号(适合初学者)
- linux安装php7的方法详解
- centos7.2搭建nginx的web服务器部署uniapp项目
- 通过 SSH 在远程 Linux 系统上运行命令的方法
- 详解Linux Namespace之User
- Centos7.0安装ceph(JEWEL)及以上版本的实例解析
- 详解Linux内核进程调度函数schedule()的触发和执行时机