目录
在Hbuilder创建一个html项目,命名为bootstrap
Bootstrap是一套现有的CSS样式集合,是基于jquery的前端框架。简单好用,集成了多种插件。
文档 全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网
1.安装和使用
下载:
http://v3.bootcss.com/getting-started/
http://jquery.com/
2.bootstrap的使用和布局容器
在Hbuilder创建一个html项目,命名为bootstrap
使用本地
或使用在线链接
布局容器
3.栅格网格系统和列偏移
效果如图
列偏移
实践
效果
4.栅格网格系统 列排序与列嵌套
5.常用样式 标题和段落
添加副标题可以用<small>标签或<span class = "small">
强调
You can use the mark tag to <mark>highlight</mark> text.
删除
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
<u>This line of text will render as underlined</u>
小号文本
<small>This line of text is meant to be treated as fine print.</small>
着重
<strong>rendered as bold text</strong>
斜体
<em>rendered as italicized text</em>
对齐(左,居中,右,两端都对齐)
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写(小写,大写,首字母大写)
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
6.常用样式 列表
7.常用样式 代码
<!--使用<code></code>来显示单行内联代码-->
this is a simple code
<code>
this is a simple code<br>
this is a simple code
</code>
<!--快捷键-->
<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存内容</p>
<!--多行代码 保留原本的格式-->
<pre>
def orm(request):
method = request.get.method
if method == "GET"
return HttpResponse("文本")
</pre>
<!--显示html代码时需转化为字符实体-->
<pre>
<h1>你好</h2>
</pre>
<!-- 当长度超过指定值时,可以添加滚动条 -->
<pre class = "pre-scrollable">
<ol>
<li>.........</li>
<li>..........</li>
<li>........</li>
<li>.........</li>
<li>..........</li>
<li>.........</li>
<li>..........</li>
<li>........</li>
<li>.........</li>
<li>..........</li>
<li>.........</li>
<li>..........</li>
<li>........</li>
<li>.........</li>
<li>..........</li>
<li>.........</li>
<li>..........</li>
<li>........</li>
<li>.........</li>
<li>..........</li>
</ol>
</pre>
效果
8.常用样式 表格
效果
9.常用样式 表单 文本框和下拉框
10.常用样式 表单控件 单选框和复选框
11.常用样式 表单按钮
12.常用样式 表单布局 水平表单和内联表单
<form action = "#" class="form-horizontal" role = "form">
<h2 align = "center">用户信息表</h2>
<!--表单中的表单元素组-->
<div class="form-group">
<div class = "row">
<label for = "uname" class="control-label col-md-2 col-md-push-1">姓名</label>
<div class="col-md-6 col-md-push-1">
<input type = "text" id = "uname" class="form-control" placehold="请输入姓名"/>
</div>
</div>
<div class = "row">
<label for = "upwd" class="control-label col-md-2 col-md-push-1">密码</label>
<div class="col-md-6 col-md-push-1">
<input type = "text" id = "upwd" class="form-control" placehold="请输入密码"/>
</div>
</div>
</div>
<div class="form-group">
<label for = "uname" class="control-label col-md-2 col-md-push-1">姓名</label>
<div class="col-md-6 col-md-push-1">
<label class = "checkbox-inline">
<input type = "checkbox" name = "hobby"/>唱歌
</label>
<label class = "checkbox-inline">
<input type = "checkbox" name = "hobby"/>跳舞
</label>
</div>
</div>
<div class="form-group">
<label for = "uname" class="control-label col-md-2 col-md-push-1">城市</label>
<div class="col-md-6 col-md-push-1">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<div class="form-group">
<label for = "uname" class="control-label col-md-2 col-md-push-1">简介</label>
<div class="col-md-6 col-md-push-1">
<textarea class="form-control" id = "remark"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-push-6">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
12 缩略图
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/li.png" style = "width:240x;height:360px;"/>
<h3>李健</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/yu.PNG" style = "width:240x;height:360px;"/>
<h3>庾澄庆</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/jay.jpg" style = "width:240x;height:360px;"/>
<h3>周杰伦</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/xie.jpg" style = "width:240x;height:360px;"/>
<h3>谢霆锋</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
效果
进一步调整,加入面板样式
<div class="panel panel-warning">
<div class="panel-heading">
<h2 align = "center">四位导师</h2>
</div>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/li.png" style = "width:240x;height:360px;"/>
<h3>李健</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/yu.PNG" style = "width:240x;height:360px;"/>
<h3>庾澄庆</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/jay.jpg" style = "width:240x;height:360px;"/>
<h3>周杰伦</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src = "/img/xie.jpg" style = "width:240x;height:360px;"/>
<h3>谢霆锋</h3>
<p>音乐人</p>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
</div>
</div>
13 导航
本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。
表格导航或标签
创建一个标签式的导航菜单:
- 以一个带有 class .nav 的无序列表开始。
- 添加 class .nav-tabs。
下面的实例演示了这点:
实例
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
结果如下所示:
胶囊式的导航菜单
基本的胶囊式导航菜单
如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可,其他的步骤与上面相同。
下面的实例演示了这点:
实例
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
结果如下所示:
垂直的胶囊式导航菜单
您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked,让胶囊垂直堆叠。
下面的实例演示了这点:
实例
<p>垂直的胶囊式导航菜单</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
结果如下所示:
两端对齐的导航
您可以在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified,让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。
下面的实例演示了这点:
实例
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
结果如下所示:
禁用链接
对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态,如下面的实例所示:
实例
<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li class="disabled"><a href="#">iOS(禁用链接)</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li class="disabled"><a href="#">VB.Net(禁用链接)</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
结果如下所示:
该 class 只会改变 <a> 的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接。
下拉菜单
导航菜单与下拉菜单使用相似的语法。默认情况下,列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。
带有下拉菜单的标签
向标签添加下拉菜单的步骤如下:
- 以一个带有 class .nav 的无序列表开始。
- 添加 class .nav-tabs。
- 添加带有 .dropdown-menu class 的无序列表。
实例
<p>带有下拉菜单的标签</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
结果如下所示:
带有下拉菜单的胶囊
步骤与创建带有下拉菜单的标签相同,只是需要把 .nav-tabs class 改为 .nav-pills,如下面的实例所示:
实例
<p>带有下拉菜单的胶囊</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
结果如下所示:
更多导航元素组件实例
标签页与胶囊式标签页
类 | 描述 | 实例 |
---|---|---|
.nav nav-tabs | 标签页 | 尝试一下 |
.nav nav-pills | 胶囊式标签页 | 尝试一下 |
.nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆叠排列的 | 尝试一下 |
.nav-justified | 两端对齐的标签页,在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。 | 尝试一下 |
.disabled | 禁用的标签页 | 尝试一下 |
标签添加下拉菜单 | 尝试一下 | |
带下拉菜单的胶囊式标签页 | 尝试一下 | |
.tab-content | 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改 | 尝试一下 |
.tab-pane | 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改 |
14 下拉菜单
先导入插件
<!--引入bootstrap的核心css文件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!--引入jquery的核心js文件,在bootstrap之前-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!--引入bootstrap的核心js文件-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
15 模态框
用法
您可以切换模态框(Modal)插件的隐藏内容:
- 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
- 通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
效果