3.以移动设备为优先

<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”>

　　

窗口和设备的窗口保持一致，初始缩放都保持100%，禁止出现横向的滑块

4.bootstrap css布局容器

<div class=”container”> 固顶宽度 1170px  </div>

<div class=”container-fluid”> 宽度为100% </div>

有关排版的标签

<h1></h1> font-size : 36px

<h2></h2> font-size : 30px

<h3></h3> font-size : 24px

<h5></h5> font-size : 14px

<h6></h6> font-size: 12px

.page-header 设置页头 ， 给标题加一个分割线

<small></small> 副标题 小一号

<big></big> 副标题 大一号

<strong></strong> 推荐使用的加粗

<em></em> 推荐使用的

<del></del> 删除线

5.文本对齐

左对齐

<h3 class="page-header text-left"><big>产</big>品<small>内容<small></h3>

右对齐

<h3 class="page-header text-right"><big>产</big>品<small>内容<small></h3>

居中

<h1 class="page-header text-center">产品展示</h1>

英文大写

class="text-uppercase"

英文小写

class="text-lowercase"

首字母大写

class="text-capitalize"

6.列表

无序列表去掉前面的点和原来的格式

<ul class="list-unstyled">

<li>html</li>

<li>css</li>

<li>js</li>

<li>php</li>

</ul>

纵向边横向

<ul class=" list-inline">

<li>html</li>

<li>css</li>

<li>js</li>

<li>php</li>

</ul>

7.自定义列表

<dl class="dl-horizontal">

<dt>标题</dt>

<dd>标题解释</dd>

</dl>

效果：

8.表格

(1).table表格的一个基类

代码：

	<table class="table">

			<tr>

				<td>编号</td>

				<td>产品的名称</td>

				<td>状态</td>

			</tr>

			<tr>

				<td>0001</td>

				<td>奥迪</td>

				<td>未付款</td>

			</tr>

				<tr>

				<td>0002</td>

				<td>奥陀</td>

				<td>已付款</td>

			</tr>

			</tr>

				<tr>

				<td>0003</td>

				<td>爱玛</td>

				<td>已发货</td>

			</tr>

			</tr>

				<tr>

				<td>0004</td>

				<td>绿箭</td>

				<td>未发货</td>

			</tr>

		</table>

　　

效果：

(2).table-bordered

表格边框

(3).table-hover

鼠标指上去有悬停效果，可以变色

(4).table-striped

单双行分离，隔行混色

9.table-condensed

字体紧凑

10.表格响应式

给table的父元素加

<div class="table-responsive">

</div>

以移动设备为优先，如果内容不能完全显示，会出现滚动条

状态类设置的是行tr或td

11.表格颜色

		<tr class="active">

				<td>编号</td>

				<td>产品的名称</td>

				<td>状态</td>

			</tr>

			<tr class="success">

				<td>0001</td>

				<td>奥迪</td>

				<td>未付款</td>

			</tr>

			<tr class="info">

				<td>0002</td>

				<td>奥拓</td>

				<td>已付款</td>

			</tr>

			<tr class="danger">

				<td>0003</td>

				<td>保时捷</td>

				<td>已发货</td>

			</tr>

			<tr class="warning">

				<td>0004</td>

				<td>路虎</td>

				<td>未发货</td>

			</tr>

　　

12.响应式图片

(1).响应式

<img src="img/1.jpg"  class="img-responsive"></img>

(2).图片变圆

class="img-responsive img-circle"

(3).圆角矩形

class="img-responsive img-rounded"

(4).在外面加一个圆角的边框

class="img-responsive img-thumbnail" 圆形

13.栅格系统

(1).需求：PC端 中等屏幕，一行显示三张图片

栅格系统一定要放入容器中

<div class=”container”></div>

<div class=”container-fluid”></div>

栅格系统，浏览器窗口自动分配最多12列，栅格系统是由行row和列col

每一行12个格子，col-md-3：12/3=4 每一行4个格子

(2).栅格参数

超小屏幕<768px

小屏幕 平板

中等屏幕

大屏幕

类前缀

Col-xs-

Col-sm-

Col-md-

Col-lg-

最大宽度

None

750px

970px

1170px

如果想做成响应式效果，使用栅格系统的参数

小于768  手机端

Col-xs-

大于768  小于992平板

Col-sm-

大于 992  小于1200

Col-md-

大于1200

Col-lg-

偏移 offset

注意： 只能向右偏移

语法： col-xs/sm/md/lg-offset-数值

Col-md-offset-2 pc中等屏幕向右偏移2个列

<div class="row">

<div class="col-md-1">11</div>

<div class="col-md-1">22</div>

<div class="col-md-1">11</div>

<div class="col-md-1">22</div>

<div class="col-md-1">11</div>

<div class="col-md-1">22</div>

<div class="col-md-1">11</div>

<div class="col-md-1">22</div>

<div class="col-md-1">11</div>

<div class="col-md-1">22</div>

<div class="col-md-1">11</div>

<div class="col-md-1">22</div>

</div>

<div class="row">

<div class="col-md-4">444</div>

<div class="col-md-2 col-md-offset-3">22</div>

</div>

　　

14.排序(了解)

语法：col-xs/sm/md/lg-pull 向左偏移

Col-xs/sm/md/lg-push 向右偏移

代码：

效果：

15.辅助样式

情景文本颜色：.text-muted(柔和)

.text-success

.text-info

.text-primary

.text-warning

.text-danger

背景文本颜色：.bg-success

.bg-info

.bg-primary

.bg-waring

.gb-danger

小三角：<span class="caret"></span>

快速浮动：pull-left 左浮动 pull-right  右浮动

清除浮动：.clearfix 给父盒子加

16.复选框排版案例

代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<!-- 屏幕和设备保持一致，初始缩放为1：1，禁止用户缩放 -->

	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

	<title>test1</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">

	<!-- 必须先引入jquery 再引入js文件-->

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

	<script type="text/javascript" src="js/bootstrap.min.js"></script>

	<style type="text/css">

	</style>

</head>

<body style="background:#333333;">

	<div class="container" style="background:#e6e6e6;">

		<form>

			<div class="form-group">

				<label for="cemail">邮箱</label>

				<input type="email" name="cemail" id="cemail" id="cemail" class="form-control" />

			</div>

			<div class="form-group">

				<label for="pwd">密码</label>

				<input type="password" name="pwd" id="pwd" class="form-control" />

			</div>

			<div class="form-group">

				<label for="tel">手机号</label>

				<input type="text" name="tel" id="tel" class="form-control">

			</div>

			<!-- 复选框 -->

			<div class="form-group">

				<label class="checkbox-inline"><input type="checkbox" name="hobby">音乐</label>

				<label class="checkbox-inline"><input type="checkbox" name="hobby">旅游</label>

				<label class="checkbox-inline"><input type="checkbox" name="hobby">睡觉</label>

				<label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled>敲代码</label>

			</div>

			<!-- 单选框 -->

			<div class="form-group">

				<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>

				<label class="radio-inline disabled"><input type="radio" name="sex" value="女" disabled>女</label>

			</div>

		</form>

	</div>

</body>

</html>

效果：

总结

1.div决定一组,分隔与下面的距离

<div class="form-group"></div>

2.把输入框拉成一行

给输入框加的input textarea

<input type="email" name="cemail" id="cemail" id="cemail" class="form-control" />

3.复选框和禁止复选框

给外面包含的盒子加<div class=”form-group”>

.Checkbox-inline给label标签加 包含<input>和内容加颜色

.radio-inline 给label标签加 给包含的<input>加内容和颜色

<!-- 复选框 -->

<div class="form-group">

<label class="checkbox-inline"><input type="checkbox" name="hobby">音乐</label>

<label class="checkbox-inline"><input type="checkbox" name="hobby">旅游</label>

<label class="checkbox-inline"><input type="checkbox" name="hobby">睡觉</label>

<label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled>敲代码</label>

</div>

<!-- 单选框 -->

<div class="form-group">

<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>

<label class="radio-inline disabled"><input type="radio" name="sex" value="女" disabled>女</label>

</div>

4.输入框组

<div class="input-group"></div> 合并input组

class="glyphicon glyphicon-user" 使用组件图标

class="input-group-addon" 把span和input合并成一个

代码：

<!-- 输入框组 -->

<div class="form-group">

<div class="input-group">

<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

<input type="search" name="sc" id="sc" class="form-control">

</div>

</div>

<!-- 输入框组 -->

<div class="form-group">

<div class="input-group">

<input type="search" name="sear" id="sear" class="form-control">

<div class="input-group-addon">查询内容</div>

</div>

</div>

　　

效果：

5.响应式表单

Form-inline

form-horizontal 所有东西往左右移动 没有边距了

<form class="form-horizontal"></form>

6.按钮

可以加按钮效果有哪些标签

<input type=”button” value=”按钮”>

<button>按钮</button>

<a href=”#”>内容</a>

.btn 是按钮样式的基类

按钮样式 .btn-primary .btn-default .btn-success .btn-warning .btn-danger

<a class="btn btn-default active btn-xs" href="#">修改内容</a>

Btn-lg btn-md btn-sm btn-xs 从大到小

active ： 按下状态

btn-xs ： 最小的按钮大小

按钮组

代码：

	<!-- 按钮组 -->

			<div class="btn-group">

				<button class="btn btn-primary">可以看看</button>

				<button class="btn btn-warning">不要买呀</button>

				<button class="btn btn-danger">你还不买</button>

			</div>

　　

效果：

代码：

   　　　　　　　　　　　　 <button class="btn btn-danger">确定要删除吗</button>

			<input class="btn btn-primary" type="button" value="修改">

			<a class="btn btn-default" href="#">修改内容</a>

　　

样式：

7.缩略图

代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<!-- 屏幕和设备保持一致，初始缩放为1：1，禁止用户缩放 -->

	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

	<title>test1</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">

	<!-- 必须先引入jquery 再引入js文件-->

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

	<script type="text/javascript" src="js/bootstrap.min.js"></script>

	<style type="text/css">

	</style>

</head>

<body style="background:#333333;">

	<div class="container" style="background:#e6e6e6;">

		<div class="row">

			<!-- 开头 -->

			<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12">

				<div class="thumbnail">		<!-- 加一个圆角的边框 -->

					<img src="img/1.jpg" class="img-responsive">

					<div class="caption">

						<h3 class="bg-info">

							Thumbnail label

						</h3>

						<p class="text-muted">

							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

						</p>

					</div>

					<div class="text-right">

						<button class="btn btn-success btn-xs">去看看</button>

						<button class="btn btn-info btn-xs">可以购买</button>

					</div>

				</div>

			</div>

			<!-- 结尾 -->

			<!-- 开头 -->

			<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12">

				<div class="thumbnail">		<!-- 加一个圆角的边框 -->

					<img src="img/1.jpg" class="img-responsive">

					<div class="caption">

						<h3 class="bg-info">

							Thumbnail label

						</h3>

						<p class="text-muted">

							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

						</p>

					</div>

					<div class="text-right">

						<button class="btn btn-success btn-xs">去看看</button>

						<button class="btn btn-info btn-xs">可以购买</button>

					</div>

				</div>

			</div>

			<!-- 结尾 -->

			<!-- 开头 -->

			<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12">

				<div class="thumbnail">		<!-- 加一个圆角的边框 -->

					<img src="img/1.jpg" class="img-responsive">

					<div class="caption">

						<h3 class="bg-info">

							Thumbnail label

						</h3>

						<p class="text-muted">

							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

						</p>

					</div>

					<div class="text-right">

						<button class="btn btn-success btn-xs">去看看</button>

						<button class="btn btn-info btn-xs">可以购买</button>

					</div>

				</div>

			</div>

			<!-- 结尾 -->

		</div>

	</div>

</body>

</html>

　　

效果：

8.下拉菜单

Dropdown-menu 给下拉列表中的内容给 ul加样式

Dropdown 给包含触发的按钮和下拉列表加样式 --父元素

Data-toggle 按钮的触发器

Dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 下拉列表右对齐

Divider 给<li>加 <li></li>之间没有内容

9.标签页

Nav 是标签的一个基类 --给ul加

Nav-tabs 普通标签页

Nav-pills 胶囊式标签页

Nav-stacked 垂直排列

Active 默认选中状态

	<h2>标签页1</h2>

		<ul class="nav nav-tabs">

			<li class="active"><a href="#">home</a></li>

			<li><a href="#">homeProfile</a></li>

			<li><a href="#">homeMessage</a></li>

		</ul>

		<h2>标签页2</h2>

		<ul class="nav nav-pills">

			<li class="active"><a href="#">home</a></li>

			<li><a href="#">homeProfile</a></li>

			<li><a href="#">homeMessage</a></li>

		</ul>

<h2>标签页3</h2>

		<ul class="nav nav-pills nav-stacked">	<!-- 纵向的 -->

			<li class="active"><a href="#">home</a></li>

			<li><a href="#">homeProfile</a></li>

			<li><a href="#">homeMessage</a></li>

		</ul>

　　

效果：

10.导航栏

l navbar-fixed-top: 固顶在顶部

l Navbar-inverse: 可以实现反色导航条 用于<nav>元素

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">

1111

</nav>

11.分页

代码：

效果：

bootstrap具体知识点(2)的更多相关文章

  1. bootstrap基础知识点YI

    <!DOCTYPE html> <html lang="en"> ... </html> bootstrap页面都应该包含html5声明. 框架 ...

  2. bootstrap 架构知识点

    .col-md-pull-2 向右相对定位偏移量 .col-md-push-2 向左相对定位偏移量 .pull-left 左浮动 .pull-right 右浮动     改变大小写 通过这几个类可以改 ...

  3. bootstrap常用知识点总结

    api地址:https://v3.bootcss.com/css/#forms 栅格参数: bootstrap 其实 是把 网页等 分为 了 12分,bootstrap把 根据屏 幕 大小 把屏 幕分 ...

  4. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  5. 看完我的笔记不懂也会懂----bootstrap

    目录 Bootstrap笔记 知识点扫盲 容器 栅格系统 源码分析部分 外部容器 栅格系统(盒模型)设计的精妙之处 Bootstrap笔记 写在开始: 由于我对AngulaJS的学习只是一个最浅显的过 ...

  6. 温故知新，Blazor遇见大写人民币翻译机(ChineseYuanParser)，践行WebAssembly SPA的实践之路

    背景 在之前<温故知新,.Net Core遇见Blazor(FluentUI),属于未来的SPA框架>中我们已经初步了解了Blazor的相关概念,并且根据官方的指引完成了<创建我的第 ...

  7. day09 orm查询优化相关

    day09 orm查询优化相关 今日内容概要 orm字段相关补充 orm查询优化相关 orm事务操作 图书管理系统练习 今日内容详细 orm事务操作 """ 事务:ACI ...

  8. bootstrap实战练习中涉及的知识点（很有用哦！）

    看的有关视频做的笔记,对bootstrap中涉及的知识点做了一定的解析,很有用哦!(新手上路,有不合适的地方可以指出哦!) 下面进入正题: Bootstrap是当下最流行的前端框架(界面工具集) 特点 ...

  9. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. 你真的了解Mybatis的${}和#{}吗？是否了解应用场景？

    转自:https://www.cnblogs.com/mytzq/p/9321526.html 动态sql是mybatis的主要特性之一.在mapper中定义的参数传到xml中之后,在查询之前myba ...

  2. 分享一个赚钱方法：用趣分类app在家轻松赚钱

    什么是趣分类 近期,垃圾分类是社会各界和广大市民关心的一个热门话题,随着垃圾分类工作的推进,各地都掀起学习垃圾分类的热潮.为了我们的美好生活,打响"垃圾分类"这场硬仗刻不容缓.据了 ...

  3. Count on a tree 树上区间第K小

    Count on a tree 题意:求路径 u到v上的 第k小的权重. 题解:先DFS建数, 然后对于每个节点往上跑出一颗主席树, 然后每次更新. 查询的时候, u, v, k, 找到  z = l ...

  4. 百度之星初赛A轮 A 度度熊拼三角 贪心

    度度熊拼三角  Accepts: 2536  Submissions: 4433  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 6553 ...

  5. Prometheus安装

    Prometheus安装 下载地址: https://prometheus.io/download/ 现在时间是: 2019.09.07 安装环境: Linux centos7 minimal 虚拟机 ...

  6. yzoj P2343 & 洛谷 P1437 [HNOI2004]敲砖块

    题意 在一个凹槽中放置了N层砖块,最上面的一层油N块砖,从上到下每层一次减少一块砖.每块砖都有一个分值,敲掉这块砖就能得到相应的分值,如图所示. 如果你想敲掉第i层的第j块砖的话,若i=1,你可以直接 ...

  7. 微服务SpringCloud之配置中心和消息总线

    在微服务SpringCloud之Spring Cloud Config配置中心SVN博客中每个client刷新配置信息时需要post请求/actuator/refresh,但客户端越来越多时,,需要每 ...

  8. 一文看尽Java-多线程概念

    一.前言 主要讲解一下多线程中的一些概念,本文之后就开始针对JUC包的设计开始解读: 二.概念     线程安全     1.存在共享数据(临界资源):2.多个线程同时操作共享数据:只有同时出现这两种 ...

  9. ASP.NET Core 3.0 迁移避坑指南

    一.前言 .NET Core 3.0将会在 .NET Conf 大会上正式发布,截止今日发布了9个预览版,改动也是不少,由于没有持续关注,今天将前面开源的动态WebApi项目迁移到.NET Core ...

  10. 洛谷 P1059【明明的随机数】 题解

    事实上,完全可以先将输入进来带有重复的元素们保存进一个数组并对该数组进行排序,再将该数组的各个元素逐个判断是否与前一元素相同(重复与否的判断),将不重复的元素转移至另一个数组,与此同时进行对不重复元素 ...