BootStrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面;
width指定视区的逻辑宽度;
device-width指示视区宽度应为设备的屏幕宽度;
initial-scale指令用于设置Web页面的初始缩放比例
initial-scale=1则将显示未经缩放的Web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- 载入Bootstrap 的css -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
布局容器
1、.container 类用于固定宽度并支持响应式布局的容器。
2、.container-fluid类用于100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid"></div>
栅格网格系统
列组合:
列总和数不能超12,大于12,则自动换到下一行
列偏移:只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。
列排序:列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名 col-md-push- 和 col-md-pull- (其中星号代表移动的列组合数)。往前pull,往后push。
列嵌套:Bootstrap框架的网格系统还支持列的嵌套。
你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列.
常用样式1
1. 标题 bootstrap对h1~h6的标题效果进行覆盖 提供了对应的类名,为非标题元素设置样式 .h1~.h6 副标题 small标签 或 .small类名 2. 段落 通过.lead 来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。 <small>:小号字 <b><strong>:加粗 <i><em>:斜体 3. 强调 .text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442) 4. 对齐效果 Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐。 2. 代码 (1)使用来显示单行内联代码 (2)使用样式:pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条) (3)使用<kbd></kbd>来显示用户输入代码,如快捷键
表单:
- 文本框
.form-control 表单元素的样式
表单控件的大小 .input-lg .input-sm
2. 下拉框
.form-control 表单元素的样式
multiple="multiple" 设置下拉框多选
3. 文本域
.form-control 表单元素的样式
4. 复选框
垂直显示 .checkbox
水平显示 .checbox-inline
5. 单选框
垂直显示 .radio
水平显示 .radio-inline
6. 按钮
1. 使用按钮
基础样式: .btn
附加样式:btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
2. 多标签使用
其他标签可以通过添加按钮样式设置成按钮效果(a标签、span标签等)
3. 按钮大小
大按钮 .btn-lg
正常按钮 .btn-sm
小按钮 .btn-xs
4. 按钮禁用
1.通过disabled属性(真正的禁用元素)
2.通过disabled样式(样式上禁用)
表单布局:
水平表单
设置样式: .form-horizontal
内联表单
设置样式: .form-inline
导航:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<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>
<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>
<p>面包屑式导航菜单</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
<hr>
<p>分页导航</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<p>翻页导航</p>
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
模态框:
操作模态框
通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
通过 JavaScrip t:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框打开模态框:('#identifier').modal('hide')