bootstrap具体知识点(2)
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)的更多相关文章
- bootstrap基础知识点YI
<!DOCTYPE html> <html lang="en"> ... </html> bootstrap页面都应该包含html5声明. 框架 ...
- bootstrap 架构知识点
.col-md-pull-2 向右相对定位偏移量 .col-md-push-2 向左相对定位偏移量 .pull-left 左浮动 .pull-right 右浮动 改变大小写 通过这几个类可以改 ...
- bootstrap常用知识点总结
api地址:https://v3.bootcss.com/css/#forms 栅格参数: bootstrap 其实 是把 网页等 分为 了 12分,bootstrap把 根据屏 幕 大小 把屏 幕分 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- 看完我的笔记不懂也会懂----bootstrap
目录 Bootstrap笔记 知识点扫盲 容器 栅格系统 源码分析部分 外部容器 栅格系统(盒模型)设计的精妙之处 Bootstrap笔记 写在开始: 由于我对AngulaJS的学习只是一个最浅显的过 ...
- 温故知新,Blazor遇见大写人民币翻译机(ChineseYuanParser),践行WebAssembly SPA的实践之路
背景 在之前<温故知新,.Net Core遇见Blazor(FluentUI),属于未来的SPA框架>中我们已经初步了解了Blazor的相关概念,并且根据官方的指引完成了<创建我的第 ...
- day09 orm查询优化相关
day09 orm查询优化相关 今日内容概要 orm字段相关补充 orm查询优化相关 orm事务操作 图书管理系统练习 今日内容详细 orm事务操作 """ 事务:ACI ...
- bootstrap实战练习中涉及的知识点(很有用哦!)
看的有关视频做的笔记,对bootstrap中涉及的知识点做了一定的解析,很有用哦!(新手上路,有不合适的地方可以指出哦!) 下面进入正题: Bootstrap是当下最流行的前端框架(界面工具集) 特点 ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
随机推荐
- P1726 上白泽慧音 tarjan 模板
P1726 上白泽慧音 这是一道用tarjan做的模板,要求找到有向图中最大的联通块. #include <algorithm> #include <iterator> #in ...
- HDU-6053 TrickGCD
题目连接: https://vjudge.net/problem/HDU-6053 Description You are given an array A , and Zhu wants to kn ...
- CodeForces 507E Breaking Good 2维权重dij
Breaking Good 题解: 2维权重dij, 先距离最短, 后改变最小. 在这个题中, 如果要改变最小, 则让更多的可用边放进来. 然后可以用pre存下关键边. 代码: ...
- codeforces 813 D. Two Melodies(dp)
题目链接:http://codeforces.com/contest/813/problem/D 题意:求两个不相交的子集长度之和最大是多少,能放入同一子集的条件是首先顺序不能变,然后每一个相邻的要么 ...
- hdu6354 杭电第五场 Everything Has Changed 计算几何
Everything Has Changed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java ...
- dp递推 数字三角形,dp初学者概念总结
数字三角形(POJ1163) 在上面的数字三角形中寻找一条从顶部到底边的路径,使得路径上所经过的数字之和最大.路径上的每一步都只能往左下或 右下走.只需要求出这个最大和即可,不必给出 ...
- [ERR] 1118 - Row size too large (> 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB prefix of 0 bytes is stored inline.
昨天,在测试新的数据库时,迁移表遇到了这个问题.现在记录一下解决方案. 1.在配置文件中添加关闭严格模式的配置:sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS ...
- 为什么不建议使用Date,而是使用Java8新的时间和日期API?
Java 8:新的时间和日期API 在Java 8之前,所有关于时间和日期的API都存在各种使用方面的缺陷,因此建议使用新的时间和日期API,分别从旧的时间和日期的API的缺点以及解决方法.Java ...
- 关于jpa的Specification自定义函数,实现oracle的decode;以及如何在静态方法中调用注入的service
如何在静态方法中调用注入的service Public class ClassA{ public static ClassA classA; @Resource private Service ser ...
- C++ 深入浅出工厂模式(初识篇)
初识工厂模式 我们先看工厂模式的介绍 这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创 ...