bootstrap -1 基础
来源:互联网 发布:王宝强离婚案 知乎 编辑:程序博客网 时间:2024/06/07 22:34
bootstrap是一个移动优先的框架,对于不是很复杂的页面,PC和移动基本上不做特别适配都可以完成的。
基本模板
<!DOCTYPE html><html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js"></script> </body></html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">meta viewport是为了增加对移动端的支持,device-width 会根据设备大小适配,scale为比例 1:1;
可以增加 maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕。根据实际情况使用。
=====================================================================================
图片响应式:
<img src="..." class="img-responsive" alt="响应式图像">img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。
.img-responsive { display: inline-block; height: auto; max-width: 100%;}=====================================================================================================================
网格系统
最多可分12列 。例如,要创建三个相等的列,则使用三个 .col-xs-4。
基本结构:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div></div><div class="container">....为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 *范围是从 1 到 11。
row也可以嵌套使用
=====================================================================================
<abbrtitle="Real Simple Syndication"class="initialism">RSS</abbr>
以下代码用于引用
<blockquote> 这是一个带有源标题的引用。
<small>Someone famous in <citetitle="Source Title">Source Title</cite>
</small>
</blockquote>
<blockquoteclass="pull-right"> 这是一个向右对齐的引用。
<small>Someone famous in <citetitle="Source Title">Source Title</cite>
</small>
</blockquote>
显示代码,使用 <pre> 或<code>标签即可。
=====================================================================================
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格:
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
<divclass="table-responsive">
<tableclass="table">
</table>
</div>
可以实现响应式表格布局。
=====================================================================================
- 向父 <form> 元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
<form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> <p class="help-block">这里是块级帮助文本的实例。</p> </div> <div class="checkbox"> <label> <input type="checkbox">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button></form>内联
如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。
水平
- 向父 <form> 元素添加 class .form-horizontal。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。
- 向标签添加 class .control-label。
- bootstrap -1 基础
- Bootstrap(1)基础概念
- 【Bootstrap学习笔记1】基础
- Bootstrap 基础
- Bootstrap基础
- Bootstrap基础
- bootstrap基础
- bootstrap基础
- BootStrap基础
- Bootstrap基础
- bootstrap基础
- bootstrap基础
- Bootstrap基础
- Bootstrap基础1——栅格
- BootStrap less基础语法
- bootstrap基础代码
- bootstrap基础01
- 前台框架bootstrap基础
- NAND flash和NOR flash的区别详解
- python-001
- matlab中 mcc、mbuild和mex命令详解
- Kotlin 学习笔记(二) 编码规范和导入包
- 136. Single Number
- bootstrap -1 基础
- LeetCode 312 Burst Balloons 题解
- 网络游戏同步法则
- jdk、jre、jvm区别与联系
- 英伟达GPU显卡计算能力评估
- 【大数据部落】用R语言挖掘Twitter数据
- Spring实战(一) —— HelloWorld
- 手动添加jar包到本地maven仓库
- 机器学习算法 Python&R 速查表