Bootstrap3学习笔记
Bootstrap3简单介绍----专题1
声明:本文章是给初学bootstrap3的同学添加记忆的, 一定有非常多欠缺和不完好的地方, 希望能帮助到大家, 也希望能让很多其它的人了解boostrap并用在自己的项目中.
本文章的全部代码请大家在最新的浏览器里执行试验
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。是一个CSS/HTML框架。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。包含NASA的MSNBC（微软全国广播公司）的Breaking
News都使用了该项目。
Bootstrap3(下面我就简称BT)环境搭建
从http://getbootstrap.com/getting-started/获取BT里面包括css fonts js 三个目录 在HTML文件头里引入这些就OK了.
假设不想下载也能够用官方给出的CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
BT网格系统
网格的意思就是把页面切割成格子依照每行分成12列(假设希望改动成24列等等能够LESS重编译自己定制). 网格系统能够依据设备的视口响应当小于767px的时候列就会垂直排列,当然列加起来等于12.以下看样例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Browser Show</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="images/jigsaw.png">
<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js 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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
[class *= col-] {
background: #e8e8e8;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
</div>
</body>
</html>
这里的container 是让内容在页面的中间是一个容器
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXR2YW5jZTAxNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
排版
排版我介绍一些经常使用到的.BT的默认字体是Helvetica 假设没有最后还有sans-serif. font-size 14px line-height 20px 段落的margin-bottom 10px
设置段落颜色代表不同语义
<p class="text-warning">warning</p>
<p class="text-info">info</p>
<p class="text-success">success</p>
表格
BT3中有4种表格的样式各自是table-striped 条纹背景
table-bordered 带边框的
table-hover 鼠标放上带高亮的
table-condensed 紧凑型表格
以下是代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Browser Show</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="images/jigsaw.png">
<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js 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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> </head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
</tbody>
</table>
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
</tbody>
</table>
<table class="table table-condensed">
<thead>
<tr>
<th>name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
<tr>
<td>mike</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
也能够给每一行加入颜色 有3中样式 success warning info 这个上面已经介绍过了 和段落的一样
表单
BT3提供的表单能够让输入框圆角, 选中的时候会有蓝色光晕等
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<title>Browser Show</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="images/jigsaw.png">
<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js 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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> </head> <body>
<div class="container">
<div class="row">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</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> </div>
</div>
</body> </html>
这里注意的是.最好将输入框放到form-group中 为了增强搜索引擎的阅读必须有label标签 可是怎样不让其显示能够加入.sr-only
水平排列的表单能够给form 加入form-horizontal类
能够通过input-lg input-sm控制输入框的高度 宽度是利用网格系统col-md-xx 来控制的
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email">
</div>
</form>
能够再输入框的前面加入一些提示标记
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
button
BT3提供了.7中button的样式 不同颜色 也提供4种button的大小 当中一种是btn-block 这个意思就是 让button充满整个行
请看代码
<button type="button" class="btn">button</button>
<button type="button" class="btn btn-primary btn-lg">button</button>
<button type="button" class="btn btn-info btn-sm">button</button>
<button type="button" class="btn btn-success btn-xs">button</button>
<button type="button" class="btn btn-warning btn-block">button</button>
<button type="button" class="btn btn-danger">button</button>
<button type="button" class="btn btn-link">button</button>
学习BT组件请看本博客的BT学习-----2
Bootstrap3学习笔记的更多相关文章
- Bootstrap3 学习笔记
图片新窗口打开浏览
- AngularJS 1.2.x 学习笔记（表单校验篇）
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- Python 开发与接口测试学习笔记
这是我跟着虫师学习中积累下来的学习笔记,写得比较简单,适合想学习Python开发与接口测试的初学者学习. 一.开发投票系统 1.参考官网文档,创建投票系统. https://docs.djangopr ...
- Django学习笔记（9）—— 开发用户注册与登录系统
一,项目题目: 开发用户注册与登录系统 该项目主要练习使用Django开发一个用户注册与登录的系统,通过这个项目然后巩固自己这段时间所学习的Django知识. 二,项目需求: 开发一个简单的用户登录与 ...
- 《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap
本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...
- Django学习笔记（18）——BBS+Blog项目开发（2）主体思路及流程
这篇博客主要完成一个BBS+Blog项目,那么主要是模仿博客园的博客思路,使用Django框架进行练习. 准备:项目需求分析 在做一个项目的时候,我们首先做的就是谈清楚项目需求,功能需求,然后才开始写 ...
- Django学习笔记（16）——扩展Django自带User模型，实现用户注册与登录
一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...
- Django学习笔记（11）——开发图书管理页面
一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...
随机推荐
- js中的一元运算符
一元运算符只有一个参数,即要操作的对象或值.它们是 ECMAScript 中最简单的运算符. delete delete 运算符删除对以前定义的对象属性或方法的引用.例如: var o = new O ...
- 通过Qt样式表定制程序外观（比较通俗易懂）
1. 何为Qt样式表[喝小酒的网摘]http://blog.hehehehehe.cn/a/10270.htm2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. ...
- CSS块元素与内联元素（转）
为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...
- zzuli生化危机（dfs）
生化危机 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 73 Solved: 21SubmitStatusWeb Board Description ...
- TCP/IP之三次握手、四次挥手
参照:http://www.cnblogs.com/hnrainll/archive/2011/10/14/2212415.html 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建 ...
- [转]CENTOS 6.5 配置YUM安装NGINX+服务器负载均衡
原文连接: CENTOS 6.5 配置YUM安装NGINX http://blog.sina.com.cn/s/blog_69f467b70102uyux.html 参考博文: Centos下安装. ...
- 浙江工商大学15年校赛C题 我删我删,删删删 【简单模拟】
Description: 有一个大整数.不超过1000位.假设有N位.我想删掉其中的任意S个数字.使得删除S位后,剩下位组成的数是最小的. Input: 有多组数据数据,每组数据为两行.第一行是一个大 ...
- ASP.NET MVC 5 学习教程：添加模型
原文 ASP.NET MVC 5 学习教程:添加模型 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...
- 基于JSP+SERVLET的新闻发布系统(三)
拖了这么久..今天把栏目管理还有新闻管理模块的也挂出来.. 栏目管理跟用户管理一样. 这里重点讲解新闻管理. 效果图如上: 1,可选择栏目类别,且栏目类别是动态生成的. 默认生成的文章是未审核状态的. ...
- 关于C++异常机制的笔记(SEH, try-catch)
昨天晚上加班解决了一个问题,是由于无法正确的捕获到异常导致的.刚开始用try-catch,但是没法捕获到异常:后面改成SEH异常才解决.因此今天将这个问题重新梳理了一遍,关于try-catch, SE ...