bootstrap常见开发知识(重点要截图)
1布局容器如下
!-- 固定宽度1170px -->
<div class="container">container</div>
<!-- 宽度100% -->
<div class="container-fluid">container-fluid</div>
2内容排版
<h1 class="page-header">这里是大标题的下划线</h1>
<small>副标题小一号</small>
<big>副标题大一号</big>
<strong>副标题</strong>
<em>斜体</em>
<del>删除</del>
3文本对齐方式
.text-left 向左 .text-center 中间 .text-right向右
<p class="text-uppercase">[字母全大写]我是upper的信息</p>
<p class="text-lowercase">[字母全小写]我是upper的信息</p>
<p class="text-capitalize">[首字母大写]我是upper的信息</p>
4列表样式
.list-unstyled 去掉列表前面小点
.list-inline 横向排列
<ul class="list-unstyled list-inline">
<li>spring</li>
<li>mybatis</li>
<li>html5</li>
</ul>
5自定义
.dl-horizontal 横向列表展示
<dl class="dl-horizontal">
<dt>自定义列表头</dt>
<dd>自定义列表详细信息</dd>
</dl>
6表格
table 基础样式
table-bordered 加边框
table-hover 鼠标悬停变色
table-striped 隔行变色
table-condensed 减小行高
<table class="table table-bordered table-hover table-striped table-condensed">
<tr><th>标题1</th><th>标题2</th></tr>
<tr><td>内容01</td><td>内容02</td></tr>
<tr><td>内容11</td><td>内容12</td></tr>
<tr><td>内容21</td><td>内容22</td></tr>
<tr><td>内容31</td><td>内容32</td></tr>
<tr><td>内容41</td><td>内容42</td></tr>
</table>
table-responsive给table的父元素添加,不能显示则出现滚动条
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed">
<tr><th>标题1</th><th>标题2</th><th>标题1</th><th>标题2</th><th>标题1</th><th>标题2</th></tr>
<tr><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
<tr><td>内容11</td><td>内容12</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
<tr><td>内容21</td><td>内容22</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
<tr><td>内容31</td><td>内容32</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
<tr><td>内容41</td><td>内容42</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
</table>
</div>
7图片自适应大小
img-responsive 图片自适应大小
img-circle 椭圆图片
img-rounded 四角矩形
img-thumbnail 四角矩形加边框
<!-- 宽度100% -->
<div class="container-fluid">
<img alt="自适应图片" src="images/big.jpg" class="img-responsive img-thumbnail ">
</div>
8栅格系统(xs,sm,md,lg)
col-md-offset-2偏移2个单位
col-md-pull-2向左移动2个单位
col-md-push-2向右移动2个单位
9辅助类
下拉三角<span class="caret"></span>
快速浮动 pull-left左浮动 pull-right右浮动
清除浮动clearfix 给父盒子添加
10表单
<form action="">
<div class="form-group">
<label for="cemail">邮箱</label>
<input type="email" name="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="phone">手机</label>
<input type="text" name="phone" class="form-control">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby">HTML</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">Spring</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">SpringMVC</label>
</div>
<div class="form-group">
<label class="radio-inline"><input type="radio" name="sex">男</label>
<!-- 添加两个disables -->
<label class="radio-inline disabled"><input type="radio" name="sex" disabled>女</label>
</div>
</form>
form-control给数据框<input>,<textarea>添加
form-group给输入框的父元素添加样式
checkbox-inline给<lable>标签添加样式
radio-inline给<lable>标签添加样式
11组合数据框
input-group-addon给组合的内容加
input-group给父元素添加
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">查询</span>
<input type="text" class="form-control" name="search">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="search">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
12响应表单
表单行内显示form-inline
结合栅格系统组成响应式表单form-horizontal
注意:栅格系统不能给input标签添加,需要套用父元素div或span
<form action="" class="form-horizontal">
<div class="form-group">
<label for="uname" class="col-md-2 col-sm-4 col-xs-5 text-right">邮箱</label>
<div class="col-md-10 col-sm-8 col-xs-7">
<input type="text" name="uname" id="uname" class="form-control">
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-md-2 col-sm-4 col-xs-5 text-right">密码</label>
<div class="col-md-10 col-sm-8 col-xs-7">
<input type="password" name="pwd" id="pwd" class="form-control">
</div>
</div>
</form>
13按钮及按钮组
btn-group表示按钮组
<div class="btn-group">
<button class="btn btn-primary">button按钮</button>
<input class="btn btn-info" type="button" value="input按钮">
<a href="#" class="btn btn-danger">a标签按钮</a>
</div>
14下拉菜单
dropdown-menu 下拉列表的内容 ul加样式
dropdown-menu-left 下拉列表对齐方式
dropdown-menu-right 下拉列表对齐方式
dropdown 包含按钮和列表的div加样式 ul父元素
data-toggle 按钮触发器
divider分割线<li>中间不能有内容
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉按钮<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li class="divider"></li>
<li><a href="#">react</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
15标签页
nav标签页的基类
nav-tabs普通标签页
nav-pills胶囊式标签页
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">tab-one</a></li>
<li><a href="#">tab-two</a></li>
</ul>
16导航栏
navbar 导航栏基类 ,用于<nav>元素
navbar-default 默认导航栏样式,用于<nav>元素
container 是<nav>的子元素,导航栏内容都放在其中
navbar-header 导航栏头部样式
collapse折叠导航栏样式基类
navbar-collapse 折叠导航栏样式
nav 导航栏的链接基类
navbar-nav 导航栏的链接样式
navbar-left和navbar-right 组件排列,导航链接,按钮和文本对齐方式
navbar-fixed-top 导航栏固定在顶部 ,用于<nav>元素
navbar-fixed-bottom 导航栏固定在底部,用于<nav>元素
navbar-inverse 可以实现反色导航,用于<nav>元素
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 页面的头部 -->
<div class="navbar-header">
<a href="#"><img alt="图片" src="path"></a>
</div>
<!-- 导航链接 -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于我</a></li>
</ul>
</div>
</div>
</nav>
17具有自适应的导航条
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 页面的头部 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
<!-- 导航链接 -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于我</a></li>
</ul>
</div>
</div>
</nav>
相关推荐
Bootstrap开发精解 原理 技术 工具及最佳实践 随书代码
bootstrap开发包+文档
ASP.NET后台通用MVC+EF6+Bootstrap开发框架,全部采用最新的技术,后代代码采用IOC+AOP+DDD模式,灵活性强。绝对的asp.net开发者的福利,绝对的asp.net开发者的福利,绝对的asp.net开发者的福利,绝对的asp.net...
响应式网页设计:Bootstrap开发速成的配套资源,提供120多个Bootstrap功能范例网页文件,说明如何使用Bootstrap框架所提供的各种CSS与组件等内容,最终以3个完整实例(书籍宣传网页、产品推广网页、网站首页)制作出...
Bootstrap开发精解:原理、技术、工具及最佳实践
bootstrap开发环境
spring boot+mybatis+spring mvc+bootstrap开发停车位管理系统(调用百度地图API)
Bootstrap开发框架本文档主要介绍《基于 Metronic 的 Bootstrap 开发框架》 的基础上,通过分析各个模块相关的代码、各种常见组件的使用、特殊应用场景的处理, 熟悉掌握框架里面相关代码和组件的使用,以便能够更...
一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码! 采用主流框架,容易上手,简单易学,学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助解决.NET项目70%的重复工作,让开发更多关注业务...
基于HTML/CSS/JS/Bootstrap开发的在线论坛系统+MySQL数据库+源码+开发文档说明,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于HTML/CSS/JS/Bootstrap开发的...
基于python+Flask+Jinja2+Bootstrap 开发的招聘网站+源码+MySQL数据库+开发文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于python+Flask+Jinja2+...
springboot+mybatis+bootstrap开发员工OA后台管理系统 项目描述 jboa项目有请假以及报销单的申请和审核session共享加登陆拦截人事对人员的管理 员工添加报销单提交到(本部门)部门经理,部门经理通过如果总金额...
基于bootstrap开发的电子商城首页项目,其使用的技术HTML+css3,
《BootStrap开发技术》课程标准.pdf《BootStrap开发技术》课程标准.pdf《BootStrap开发技术》课程标准.pdf《BootStrap开发技术》课程标准.pdf《BootStrap开发技术》课程标准.pdf《BootStrap开发技术》课程标准.pdf
【Java技术】教你用Bootstrap开发漂亮的前端界面
tomcat+servlet+jsp+bootstrap开发设计社团管理系统;用于管理学生社团的B/S架构的web系统。 本系统分为二种用户: 1.管理员:修改密码,用户管理,角色管理,菜单管理,新闻管理,留言管理,财务管理,社团管理,...
综合 spring mvc,spring,hibernate,bootstrap 开发图书管理系统
基于Metronic的Bootstrap开发框架经验总结
springboot2开发的java个人理财系统 运行环境 jdk7(8)+mysql5.7+IntelliJ IDEA+maven 项目技术(必填) springboot+mybatis+spring mvc+bootstrap+jquery+thymeleaf http://localhost:8080/ 普通用户登录 zuidaima_...