官网:www.bootcss.com

一. 全局css样式

栅格系统
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head>
<body> <div class="container-fluid">
<div class="row"> <div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="thumbnail">上述3个meta标签*必须*放在最前面</div></div>
</div>
</div>
</body>
</html>

表单登录界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="col-lg-3 thumbnail">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="email" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>
</div> <script src="jQuery/js/jquery.js"></script>
</body>
</html>

表格的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="thumbnail">
<table class="table table-striped table-bordered table-hover">
<tr class="success">
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr class="danger">
<td>1</td>
<td>ivy</td>
<td>18</td>
</tr>
<tr class="info">
<td>2</td>
<td>yvette</td>
<td>19</td>
</tr>
</table>
</div>
</div>
<script src="jQuery/js/jquery.js"></script>
</body>
</html>

二. 组件

组件是由一个html,一个css, 一个js组成的一个部分

 Glyphicons 字体图标,不能和其它类一起,只能单独使用,可以通过span标签

  下拉菜单例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="thumbnail"> <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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>
</div>
</div>
<script src="jQuery/js/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

未完待续.............

BootStrape基础使用的更多相关文章

  1. bootstrape select使用小结

    看看上面的效果是bootstrape使用的效果.虽然不是很好看,但是符合bootstrape的风格.来看看普通的select的样式 bootstrape下的select和普通select在bootst ...

  2. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  3. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. Golang, 以17个简短代码片段,切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  6. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  7. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  8. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  9. .NetCore MVC中的路由(1)路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

随机推荐

  1. JS中map()与forEach()的用法

    相同点: 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组) 3.匿名函数中的this都是指向window 4 ...

  2. Grafana添加Zabbix为数据源(二)

    接触过grafana的同学肯定会觉得grafana比zabbix的图像灵活好看很多,下面就让我们一起进行grafana的web界面配置 1.鼠标移动到左上角,点击Plugins,然后选择"c ...

  3. 新股定价谁说了算?一文读懂中国IPO询价制度

    总体来说,在市场化条件下,确定股票首次公开发行的价格可以分为两个步骤:一是股票估值:选择一定的股票估值模型,对拟发行股票的公司进行估值,并初步确定发行价格和询价区间:二是发现股票市场价格,主要方式是I ...

  4. ProbCog[github]使用心得

    1. After installing ProbCog,you can run blnquery and mlnquery. If the terminal warns that 'command n ...

  5. java内存模型的原子性、可见性、有序性与指令重排序

    在并发编程中,我们通常会遇到以下三个概念:原子性.可见性和有序性.我们先看具体看一下这三个概念: 1.原子性 操作时不可分割的比如a=0,此操作不可分割,而++a,实际上是a=a+1,为两个操作.想将 ...

  6. svn clearup svn cleanup failed–previous operation has not finished; run cleanup if it was int错误的解决办法

    今天svn提交,出现异常:svn cleanup failed–previous operation has not finished; run cleanup if it was interrupt ...

  7. 软件缺陷5C标准

    Correct(准确) :每个组成部分的描述准确,不会引起误解 Clear(清晰): 每个组成部分描述清晰,易于理解 Concise(简洁): 只包含必不可少的信息,不包括任何多余的内容 Comple ...

  8. bg_imgae

  9. 让样式文件,或js文件的相对路径,变成成绝对路径

    添加两行代码即可 <% String path = request.getContextPath(); String basePath = request.getScheme() + " ...

  10. 关于安装Git后,项目目录右键菜单无Git Bash Here命令的选项

    修改注册表配置 1.第一步,window + R,输入regedit回车进入注册表 2.依次进入HKEY_CLASSES_ROOT --> Directory -->Background ...