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. 点击作者,会列出其出版的 ...
随机推荐
- Cygwin ssh
http://www.evalumation.com/blog/86-cygwin-windows7-sshd
- Xamarin.Android开发实践（四）
原文:Xamarin.Android开发实践(四) Xamarin.Android下获取与解析JSON 一.新建项目 1.新建一个Android项目,并命名为为NetJsonList 2.右击引用,选 ...
- linux shell 执行多个命令的方法
(1)在每个命令之间用:(分号)隔开. (2)在每个命令之间用&&隔开. &&表示:若前一个命令执行成功,才会执行下一个.这样,可确保所有的命令执行完毕后,其执行过程都 ...
- linux下的压缩解压命令 tar 的简单描述
命令名称:tar 命令所在路径:/bin/tar 语法:tar选项·「-zcf」·「压缩后文件名」「目录」 -c 打包 -v 显示详细信息 -f 指定文件名 -z 打包同时压缩 tar命令解压缩语法: ...
- cygwin中vim的使用方法
vim类似Windows中的记事本,功能非常强大. vim的使用技巧 1.vim text.txt text存在则打开,不存在则类似新建一个叫text的txt文件 2.退出 按esc切换到命令模式,然 ...
- grub2的/etc/grub.d目录下的脚本文件
00_header,05_debian_theme,10_linux,20_memtest86+,30_os- prober,40_custom这五个脚本对应grub.cfg上的各个部分,有的版本的g ...
- 将 jsp 页面的值 传到struts2 action中(不是表单中的值)
JSP: 页面: <%@ page language="java" pageEncoding="GBK"%> <%@taglib prefi ...
- Windows服务编程集合
http://zyan.cc/windows_mstsc/ Optionname--Optionvalues描述 type=----own, share, interact, kernel, file ...
- 基于visual Studio2013解决C语言竞赛题之0423比赛安排
题目
- php 遍历文件夹及文件，获取文件名和文件路径存入数据库中
<?php header("Content-Type:text/html; charset=gbk"); require('../../include/connect.php ...