1. 技术文章
  2. BootStrap

BootStrap

由 喜欢而已 提交于 2020-02-29 04:54:36

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/

标签
cdn
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!