bootstrap框架:常用内容一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
**代码IE=edge告诉IE使用最新的引擎渲染网页
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Bootstrap 101 Template</title>
<style type="text/css">
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ***导航条*** 务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性 添加 .navbar-fixed-top 类可以让导航条固定在顶部-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
<div class="container">
<div class="row">
<!-- xs总是水平排列的,自适应宽度 -->
<div class="col-xs-8" style="background: pink;">你好，世界！</div>
<div class="col-xs-3" style="background: red;margin-left: 20px;">你好，中国！</div>
</div>
<div class="row">
<!-- 因为相对于md中等电脑屏幕来说,宽度大于970时才会堆叠 -->
<div class="col-md-3" style="background: yellow;">第一块</div>
<div class="col-md-3" style="background: green;">第二块</div>
<div class="col-md-3" style="background: gray;">第三块
<div class="row">
<div class="col-md-4" style="background: tan;">内嵌第一个</div>
<div class="col-md-4" style="background: orange;">内嵌第二个</div>
</div>
</div>
<!-- 可同时设置两个类来控制不同屏幕下的布局,并且用offset进行右偏移 -->
<div class="col-md-3 col-xs-6 col-md-offset-2" style="background: blue;">第四块</div>
</div>
</div>
<!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background: pink;">你好，世界！</div>
<div class="col-xs-6" style="background: red;">你好，中国！</div>
</div>
</div>
<!-- Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。 -->
<h1>你好，世界！<small>副标题</small></h1>
<a href="###">你好，世界！</a>
<p>
<!-- 通过添加 .lead 类可以让段落突出显示 ,mark 加颜色底色突出,del 删除文本(加中间线),u 下划线 ,small 小号字体, em 斜体, 设置 .text-right 等类是文档对齐, .text-uppercase 字母大写, .text-capitalize 首字母大写-->
<div class="lead">兰亭序 作者：王羲之</div>
<mark>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。</mark>群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，<u>信可乐也。</u>
<del>夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；</del>或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，曾不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。<small>古人云：“死生亦大矣。”岂不痛哉！</small>
<em>每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。</em>固知一死生为虚诞，齐彭殇为妄作。 <blockquote>
<!-- 这个可以再文档前面加一道杠 -->
<p>悲夫！故列叙时人</p>
</blockquote>后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。<p class="text-right">后之览者，亦将有感于斯文。</p>
<p class="text-uppercase">hello-world!</p>
<p class="text-capitalize">hello-world!</p>
<!-- 通过给dl添加 .dl-horizental 类来是描述水平排列 -->
<dl class="dl-horizontal">
<dt>你好</dt><dd>一种打招呼的方式</dd>
<dt>谢谢</dt><dd>表示感谢的意思</dd>
</dl>
<!-- 带有基本样式的***表格*** -->
<div class="container">
<table class="table table-hover">
<caption>这是一个表格</caption>
<tr>
<th>#</th>
<td class="active">姓名</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr>
<th>1</th>
<td>小明</td>
<td>58</td>
<td>下棋</td>
</tr>
<tr>
<th>2</th>
<td>小红</td>
<td>79</td>
<td>跳舞</td>
</tr>
</table>
</div>
<!-- ***表单操作*** -->
<form>
<!-- 将控件包裹在 .form-group 中可以获得最好的排列 -->
<!-- 用label可进行方便选取 强烈建议为所有输入框添加 label 标签!!!!-->
<!-- 想要获取水平的表单,需用一个类名为.form-horizental 的div将表单包裹起来 -->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width: 200px;">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" style="width: 200px;">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- 内联表单 .form-inline 注意一定下添加label标签 -->
<!-- Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。 -->
<form class="form-inline">
<!-- 在输入框里设置图标:设置相应的 .has-feedback 类并添加正确的图标即可 -->
<div class="form-group has-feedback">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="name" style="width: 300px;color: red;">
<!-- 在输入框右边添加一个搜索图标 -->
<span class="glyphicon glyphicon-search form-control-feedback" style="color: red;"></span>
</div>
<div class="form-group has-error">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<!-- 通过在**文本输入框** <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。 -->
<div class="input-group" style="width: 300px;">
<span class="input-group-addon">请填写</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<!-- 单选框与多选框 默认外观是堆叠样式 设置.checkbox-inline或.radio-inline可使水平排列-->
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<!-- 设置disabled 使其不可选择 -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
</p>
<!-- 下拉列表 -->
<select class="form-control" style="width: 200px;">
<option>请选择</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!-- ***下拉菜单*** -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
欢迎选择
<!-- 这是表示有下拉的箭头 -->
<span class="caret"></span>
</button>
<!-- 下拉选项 -->
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<!-- 加一条分割线 -->
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- 把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了 -->
<!-- 给按钮设置大小,在button标签内设置 btn-lg,sm,xs,md -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- 分裂式按钮下拉菜单 -->
<!-- 给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。-->
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<!-- 底下这句貌似没用 -->
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- **按钮类** -->
<!-- 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。 -->
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary btn-sm">（首选项）Primary</button>
<!-- 使用active类可以使按钮处在已经被按下的状态 -->
<button type="button" class="btn btn-success active">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- 使用.disabled类可是按钮处于禁止状态 -->
<button type="button" class="btn btn-danger disabled">（危险）Danger<span class="glyphicon glyphicon-star" aria-hidden="true"></span></button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<!-- 关闭按钮 -->
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
bootstrap框架:常用内容一的更多相关文章
- Bootstrap框架常用总结
Bootstrap框架常用标签: 标题标签:<h1>-<h6> bootstrap中也设置的相同的样式 - 若要使用 必须使用空标签来定义 比如<s ...
- 使用BootStrap框架设置全局CSS样式
一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
- day01 前端bootstrap框架
day01 django框架之bootstrap框架 今日内容概要 前端框架之bootstrap 该框架支持cv编写前端页面 利用socket模块编写一个简易版本的web框架 利用wsgiref模块编 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：内容居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap框架的学习（一）
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- 基于BootStrap框架构建快速响应的GPS部标监控平台
最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
- 移动Web学习笔记（第1天）-bootstrap框架的使用
移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的网页 移动APP : 手机上需要下载安装的应用程序 1. 移动web介绍 1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发 ...
随机推荐
- 第一节:web 框架本质
1.web请求本质是什么: web请求本质:就是一个socket. 浏览器充当是客户端,python充当一个服务器端 浏览器请求相当一次tcp请求,请求完成断开连接 ,下次去的时候 ...
- Python设计模式-装饰器模式
装饰器模式 装饰器模式,动态地给一个对象添加一些额外的职责,就增加功能来说,装饰器模式比生成子类更为灵活. 代码示例 #coding:utf-8 #装饰器模式 class Beverage(): ...
- 系列文章（一）：探究电信诈骗的关键问题与应对策略——By Me
导读:伴随着互联网与移动网的融合,移动互联网变得更加开放.与此同时,伴随着新型的移动互联网服务模式的出现,移动互联网的安全问题也出现了新的形式及特点. 如今,移动互联网遭受到的攻击已严重影响了人们的隐 ...
- Android图片加载框架Picasso最全使用教程4
通过前几篇的学习,我们已经对Picasso的加载图片的用法有了很深的了解,接下来我们开始分析Picasso为我们提供的其他高级功能及内存分析,Let’sGo ! Picasso进行图片的旋转(Rota ...
- python之路 前段之html，css
一.HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏 ...
- Ubuntu16.04安装Appium
准备工作 1.安装Node 下载地址:https://nodejs.org/en/download/ 下载完后解压,设置环境变量 配置Node环境变量$sudo vim /etc/profile 在文 ...
- adas--智能驾驶辅助系统
先进驾驶辅助系统(Advanced Driver AssistantSystem),简称ADAS,是利用安装于车上的各式各样的传感器(可侦测光.热.压力等变数), 在第一时间收集车内外的环境数据, 进 ...
- C# 异步同步调用
本文将主要通过“同步调用”.“异步调用”.“异步回调”三个示例来讲解在用委托执行同一个“加法类”的时候的的区别和利弊. 首先,通过代码定义一个委托和下面三个示例将要调用的方法: /*添加的命名空间 u ...
- Sybase：delete与truncate、drop区别
Sybase:delete与truncate.drop区别 区别: TRUNCATE TABLE TABLENAME:删除内容.释放空间但不删除定义. DELETE FROM TABLENAME:删除 ...
- 苹果Dock样式的菜单
在线演示 本地下载