文档章节

BootStrap

大仁孙
 大仁孙
发布于 2016/07/13 15:05
字数 2358
阅读 59
收藏 0

bootstrap下载:

英文网址:http://getbootstrap.com/ 中文网址:http://v3.bootcss.com/
选择编译压缩版本,可下载到本地使用,也可网上引用CDN

bootstrap应用 - CDN引入:

引用框架(基础)与注意点:

 <!DOCTYPE html>
 <html lang="zh-CN">
 	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		**上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!**
		<title>Bootstrap应用简介</title>
	
		<!-- Bootstrap css引用-->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
<body>
	<h1>你好,世界!</h1>
	<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    **在引用bootstrap.min.js前需先引用jquery.js**
    <!-- Bootstrap js引用-->
	<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap学习

文中带 . 的标号为class选择器,如.lead为class ="lead";

第一部分:Bootstrap - 标签属性

1.全局样式style.css:
  • 移除body的margin声明;
  • body的背景色为白色;
  • 为排版设置了基本的字体、字号和行高
  • 设置全局链接颜色,且当链接处于悬浮(hover)状态时才会显示下划线
2.标题h1~h6样式:
  • margin-top、margin-bottom:h1~h3重置后是20px,h4~h6为10px;
  • line-height:默认为字体大小的1.1倍,文本颜色和字体都继承父级元素
  • 字体大小:h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px;
3.强调内容:
  • .lead一般配合段落标签使用,最好配合strong标签

  • small多配合h标题系列标签使用,作为副标题

  • strong、b加粗效果的标签

  • em、i、var、cite斜体效果的标签

  • 强调相关的类:

      .text-muted:提示,使用浅灰色(#999)
      .text-primary:主要,使用蓝色(#428bca)
      .text-success:成功,使用浅绿色(#3c763d)
      .text-info:通知信息,使用浅蓝色(#31708f)
      .text-warning:警告,使用黄色(#8a6d3b)
      .text-danger:危险,使用褐色(#a94442)	
    
4.文本对齐风格:
  • text-left:左对齐
  • text-center:居中对齐
  • text-right:右对齐
  • text-justify:两端对齐
5.列表:
  • .list-unstyled:去除序列,ul下li的无序排列和ol下li的有序排列;

  • .list-inline:垂直列表换成水平列表形式显示;

  • .dl-horizontal:水平定义列表效果,当屏宽大于768px的时候,才适用;

      <dl class="dl-horizontal">
      	<dt>我是定义列表标签</dt>
      	<dd>我是定义列表阐述</dd>	
      </dl>
    
6.code和pre
  • code:一般是针对单个单词或单行句子的代码,效果:标红、背景色、突出效果;
  • pre:一般是针对多行句子的代码,需要在标签上添加.pre-scrollable,控制代码块的最大高度为340px;超出部分显示滚动条;
  • code和pre代码中出现<或>一律用&lt,&gt代替。

第二部分:Bootstrap - 表格table

  • 只加.table: 给表格设定了margin-bottom:20px以及设置单元内距;在thead底部设置2px的浅灰实线,每个单元格设置1px的浅灰实线

  • 附加样式表格:

      .table-striped:斑马线表格
    
      .table-bordered:带边框的表格
    
      .table-hover:鼠标悬停高亮的表格
    
      .table-condensed:紧凑型表格
    
  • 响应式表格:.table-responsive table父级div的类名 ,特性:支持响应式布局,当浏览器宽度小于768px时表格下端出现可视的滚动条

      <!--实例代码-->
    
      <div class="table-responsive">
      	<table class="table table-bordered table-hover ">
      		<thead>
      			<tr>
      				<th>标题1</th>
      				<th>标题2</th>
      				<th>标题3</th>
      			</tr>
      		</thead>
      		<tbody>
      			<tr>
      				<td>内容1</td>
      				<td>内容2</td>
      				<td>内容3</td>
      			</tr>
      			<tr>
      				<td>内容1</td>
      				<td>内容2</td>
      				<td>内容3</td>
      			</tr>
      			<tr>
      				<td>内容1</td>
      				<td>内容2</td>
      				<td>内容3</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
    

第三部分:Bootstrap-图片和图标

1.图片:使用方法非常简单,只需在img标签内设相应的类名
  • img-responsive:响应式图片,主要针对响应式设计;

  • img-rounded:圆角图片;

  • img-circle: border-radius:50%;

  • img-thumbnail:缩略图片;

      举例(img-responsive:响应式,img-circle:border-radius:50%):
      <img class="img-responsive img-circle" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/		u=1084883328,2041867738&fm=21&gp=0.jpg" alt=""/>
    
2.图标:使用方法也很简单,任何行级标签都可以,通常用span标签进行添加

第四部分:Bootstrap-form表单

form自带属性:a: (action为提交的地址) b: (method:提交的方式 get-显性/post-隐性) c:role(h5的属性,增强语意) 添加属性:.form-horizontal(表单水平排列,配合网格系统使用).form-inline(内联表单)
1.input:(多使用.form-control类):习惯配合lable使用,外部设div(.form-group)
2.select:默认选择一个选项,多使用form-control,多行选择设置multiple
3.textarea:设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性
4.多选框(水平排列,lable加类.checkbox-inline)、单选框(水平排列,lable加类.radio-inline)
5.button:.btn .btn-default默认风格
<!-- form表单练习版 -->
<!-- container特点:margin-left:auto,margin-right:auto,左右15px的padding; -->
<div class="container">	
	<!-- page-header特点:padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee; -->
	<div class="page-header">
		<h2>注册表单</h2>
	</div>
	<!-- action:提交的地方,method:提交的方式(get,post:隐性提交),role无特殊意义,增强语义 -->	
	<form action="" role="form">

	<!-- form-group有个margin-bottom=15px -->
		<div class="form-group">
			<label for="username" ><span class="glyphicon glyphicon-user">用户名</span></label>
			<!-- form-control:宽度变成100%,border-radius为4px,padding:6px 12px;shadow等属性 -->
			<input class="form-control" type="text" id="username" placeholder="账号" />
		</div>	
		<div class="form-group">
			<label for="password"><span class="glyphicon glyphicon-user">密码</span></label>
			<input class="form-control"  type="password" id="password" placeholder="密码" />
		</div>	
	
		<!-- checkbox:margin-top:10px,margin-bottom:10px; -->
		<div class="checkbox">
			
			<label for="remember" class="checkbox-inline" >
				<input  type="checkbox" id="remember" />记住我
			</label>

			<label for="remember" class="checkbox-inline" >
				<input  type="checkbox" id="remember" />周杰伦
			</label>
		</div>
		<div class="form-group">
			<!-- 第一个.btn为定义button的基础风格,.btn-success在.btn的基础上进行了修改 -->
			<button class="btn btn-success" type="button" >提交</button>
		</div>			
	</form>
</div>

第五部分:Bootstrap-网格系统:

1.实现的原理:将容器划分为12等份,配合媒体查询使用
2.工作原理:.container(容器类名) .row(行类名) 宽度多以中屏为准:col -md(970) ,其他col-lg-1(1170),col-xs-1(自动),col-sm-1(750)
3.列偏移:.col-md-offset-1(加上此类的列元素,向右移动1个列的宽度),注意总列数不超过12
4.列排序:col-md-push:向右偏移 col-md-pull:向左偏移

第六部分:Bootstrap-导航:

1.基础样式:.nav
2.标签式导航(也称选项卡导航):.nav-tabs(),若有标签默认选中,添加class="active"
3.自适应导航:.nav-justified 配合 .nav-tabs或者.nav-pills使用
4.面包眉导航:ol添加类.breadcrumb
5.胶囊形(pills)导航
胶囊形(pills)导航听起来有点别扭,因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示,并带有圆角效果。其实现方法和“nav-tabs”类似,同样的结构,只需要把类名'nav-tabs'换成'nav-pills'即可
	<ul class='nav nav-pills'>
	      <li class='active'><a href='##'>Home</a></li>
	      <li><a href='##'>CSS3</a></li>
	      <li><a href='##'>Sass</a></li>
	      <li><a href='##'>jQuery</a></li>
	      <li class=“disabled”><a href='##'>Responsive</a></li>
	</ul>
6. 垂直堆叠的导航
在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在'nav-pills'的基础	上添加一个'nav-stacked'类名即可
<ul class='nav nav-pills nav-stacked'>
     <li class='active'><a href='##'>Home</a></li>
     <li><a href='##'>CSS3</a></li>
     <li><a href='##'>Sass</a></li>
     <li><a href='##'>jQuery</a></li>
     <li class='disabled'><a href='##'>Responsive</a></li>
</ul>

在下拉菜单一节中,下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,只需要添加在导航项之间添加“<li 	class=”nav-divider”></li>”即可

第七部分:Bootstrap-下拉菜单:

1.使用一个名为“dropdown”的容器包裹了整个下拉菜单元素
  <div class="dropdown"></div>
2.使用了一个button按钮做为父菜单,并且定义类名'dropdown-toggle'和自定义'data-toggle'属性,且值必须和最外容器类名一致
<button class='btn btn-default dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown'>
下拉菜单
    <span class='caret'></span>
  </button>
3.下拉菜单项使用一个ul列表,并且定义一个类名为'dropdown-menu'
<ul class=“dropdown-menu”>
4.Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或 者“dropdown-menu-right”类名
5.给li添加dropdown-header类;-- 给li添加dropdown-divider类; -- li添加.active; -- li添加.disabled;
6.导航菜单<div class=“ban-group”>
<div class=“btn-group”>
	<button class=“btn btn-default” type=“button”>首页</button>
	<button class=“btn btn-default” type=“button”>产品展示</button>
	<button class=“btn btn-default” type=“button”>案例分析</button>
	<button class=“btn btn-default” type=“button”>联系我们</button>
	<div class=“btn-group”>
		<button class=“btnbtn-default dropdown-toggle” data-toggle=“dropdown” type=“button”>关于我们<span 			class=“caret”></span></button>
		 <ul class=“dropdown-menu”>
     		<li><a href=“##”>公司简介</a></li>
     		<li><a href=“##”>企业文化</a></li>
     		<li><a href=“##”>组织结构</a></li>
     		<li><a href=“##”>客服服务</a></li>
		</ul>
  </div>

</div> ###### 7.垂直分组:把水平分组的“ban-group”类名换成“ban-group-vertical”即可 ###### 8.等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名,每组按钮都要加上btn-group的类

9.有的时候我们的下拉菜单会向上弹起,这个时候我们的三角方向需要朝上显示,实现方法:需要在“.btn-group”类上追加“dropup”类名(这也是做向上弹起下拉菜单要用的类名)

可参考网站:http://www.shiningcg.com/

© 著作权归作者所有

上一篇: AJAX
下一篇: 事件大全
大仁孙
粉丝 3
博文 35
码字总数 26287
作品 0
虹口
前端工程师
私信 提问
《前台框架BootStrap学习》系列技术文章整理收藏

《前台框架BootStrap学习》系列技术文章整理收藏 前台框架BootStrap学习系列整理了关于前台框架BootStrap方面的技术文章,一些实用的BootStrap使用示例,供大家学习BootStrap时参考 1CSS——...

开元中国2015
2015/06/22
218
0
最全的 Twitter Bootstrap 开发资源清单

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它由动态CSS语言LESS写成,与CSS框架...

Jeky
2012/11/29
15.5K
48
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
438
0
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
268
0
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

可考虑在你下一个项目中使用的 50 个 Bootstrap 插件 作者 jopen 2014-11-12 09:54:16 阅读目录 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Ta......

~少司命~
2015/08/17
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

CRM、DMP、CDP都是什么?有什么区别?

Markter对CRM系统(Customer Relationship Management System,客户关系管理系统),营销自动化等概念都已经比较熟悉,也许DMP(Data Management Platform,数据管理平台)也多多少少有些了解。...

怡海软件-CRM
11分钟前
3
0
中台是什么,到底要解决什么问题?

故事的开始 这个最早由阿里在2015年提出的“大中台,小前台”战略中延伸出来的概念,最近在国内大热。阿里、腾讯、百度、京东、美团、滴滴等一众互联网巨头,从去年到今年,接连开始组织架构...

喵二狸
22分钟前
2
0
Linux Centos 7 - MySQL 5.7离线安装

内部网络通过离线包的方式进行安装。 一、下载 下载地址:https://dev.mysql.com/downloads/mysql/ 进入页面后,点击右侧链接。 下载对应版本。 通过xftp6等工具上传到服务器上。 二、安装和...

华山猛男
23分钟前
2
0
EventBus 3 全解

EventBus 3 全解 [TOC] 使用 一个基于观察者模式的事件发布/订阅框架. 用于模块间通信和解耦, 使用方便,性能高. 基本使用 1. gradle导入依赖库 implementation 'org.greenrobot:eventbus:3....

马湖村第九后羿
25分钟前
3
0
HTTP 协议

什么是HTTP协议? HTTP是hypertext transport protocol的缩写,即超文本传输协议。 是用于万维网服务器与本地浏览器之间传输超文本的传送协议。可以使浏览器更加高效,使网络传输减少。能够保...

彩色泡泡糖
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部