bootstrap框架基础知识_bootstrap 基础框架 - CSDN
  • BootStrap基础知识总结

    2018-11-26 23:05:44
    文章目录目标掌握什么是响应式及响应式的原理掌握BootStrap的栅格系统了解BootStrap的其他组件及JS控件表单校验案例技术分析步骤分析代码实现使用JQuery发送请求局部刷新页面使用BootStrap开发一个响应式的页面出来...

    目标

    掌握什么是响应式及响应式的原理

    掌握BootStrap的栅格系统

    了解BootStrap的其他组件及JS控件

    表单校验案例

    技术分析

    • trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
    • triggerHandler : 仅仅只会触发事件所对应的函数
    • is()

    步骤分析

    1. 首先给必填项,添加尾部添加一个小红点
    2. 获取用户输入的信息,做相应的校验
    3. 事件: 获得焦点, 失去焦点, 按键抬起
    4. 表单提交的事件

    代码实现

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" href="../css/style.css" />
    		<title></title>
    		<!--
    			1. 首先给必填项,添加尾部添加一个小红点
    			2. 获取用户输入的信息,做相应的校验
    			3. 事件: 获得焦点, 失去焦点, 按键抬起
    			4. 表单提交的事件
    			
    			Jq的方式来实现:
    				1. 导入JQ的文件
    				2. 文档加载事件: 在必填项后天加一个小红点
    				3. 表单校验确定事件: blur focus keyup
    				4. 提交表单 submit
    		-->
    		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
    		<script>
    			
    			$(function(){  //默认做一些页面初始化
    				//动态在必填项后面添加小红点
    				$(".bitian").after("<font class='high'>*</font>");
    				
    				//给必填项绑定事件
    				$(".bitian").blur(function(){
    					//首先获取用户当前输入的值
    					var value = this.value; //123
    					//清空上一次提示的信息
    					$(this).parent().find(".formtips").remove();
    					
    					//判断当前的值是哪一项输入的值
    					if($(this).is("#username")){  //判断是否是用户名输入项
    						if(value.length < 6){
    							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
    						}else{
    							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
    						}
    					}
    					
    					if($(this).is("#password")){  //判断是否是密码输入项
    						if(value.length < 6){
    							$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
    						}else{
    							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
    						}
    					}
    				}).focus(function(){
    					$(this).triggerHandler("blur");
    				}).keyup(function(){
    					$(this).triggerHandler("blur");
    				})
    				
    				
    				
    				//给表单提交绑定事件
    				$("form").submit(function(){
    					//触发所有必填项的校验
    					$(".bitian").trigger("focus");
    					//找到错误信息的个数
    					if($(".onError").length > 0){
    						return false;
    					}
    					return true;
    				});
    			});
    			
    			
    			
    			
    			
    			
    			
    		/*	
    			$(function(){
    				// 在所有必填项后天加一个小红点 *
    				$(".bitian").after("<font class='high'>*</font>");
    				
    				//事件绑定
    				$(".bitian").blur(function(){
    //					var value = this.value;
    					var value = $(this).val();
    					//清空当前必填项后面的span 
    //					$(".formtips").remove();
    					$(this).parent().find(".formtips").remove();
    					//获得当前事件是谁的
    					if($(this).is("#username")){
    						//校验用户名
    						if(value.length < 6){
    							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
    						}else{
    							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
    						}
    					}
    					
    					if($(this).is("#password")){
    						//校验密码
    						if(value.length < 3){
    							$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
    						}else{
    							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
    						}
    					}
    				}).focus(function(){
    					$(this).triggerHandler("blur");
    				}).keyup(function(){
    					$(this).triggerHandler("blur");
    				});
    				
    //				$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})
    
    				//给表单绑定提交事件
    				$("form").submit(function(){
    					//触发必填项的校验逻辑
    					$(".bitian").trigger("focus");
    					
    					var length = $(".onError").length
    					if(length > 0){
    						return false;
    					}
    					return true;
    				});
    			});*/
    			
    		</script>
    	</head>
    	<body>
    		<form action="../index.html">
    			<div>
    				用户名:<input type="text" class="bitian" id="username" />
    			</div>
    			<div>
    				密码:<input type="password"  class="bitian" id="password" />
    			</div>
    			<div>
    				手机号:<input type="tel" />
    			</div>
    			<div>
    				<input type="submit" />
    			</div>
    		</form>
    	</body>
    </html>
    
    
    

    使用JQuery发送请求局部刷新页面

    ​ 数据交换格式:

    ​ json

    ​ xml

    • 什么是JSON

      JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#Java、JavaScript、PerlPython等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

    • JSON格式

      ​ JSON对象

      { key1:value}   
      {"username":"zhangsan","password":"123"}
      

      ​ JSON数组

      [{ key1:value},{ key1:value},{ key1:value}]
      

    使用BootStrap开发一个响应式的页面出来

    需求分析

    开发一套响应式页面.让他能够在各种设备上显示正常,提升用户体验

    技术分析

    BootStap概述
    • 什么是BootStrap

    • BootStrap有什么作用

      • 提高开发人员的工作效率
    • 什么是响应式页面

      • 适应不同的分辨率显示不同样式,提高用户的体验

    • BootStrap的中文网

    • 下载BootStrap

    • BootStrap结构

      • 全局CSS
        • bootStrap中已经定义好了一套CSS的样式表
      • 组件
        • BootStrap定义的一套按钮,导航条等组件
      • JS插件
        • BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
    BootStrap的入门开发
    • 引入相关的头文件
    		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    		<link rel="stylesheet" href="../css/bootstrap.css" />
    		
    		<!--需要引入JQuery-->
    		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
    		
    		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    		<script type="text/javascript" src="../js/bootstrap.js" ></script>
    		
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    
    • BootStrap的布局容器

    .container 类用于固定宽度并支持响应式布局的容器。

    <div class="container">
      ...
    </div>
    

    .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

    <div class="container-fluid">
      ...
    </div>
    
    • row

      Bootstrap 栅格系统的工作原理:

      • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
      • 通过“行(row)”在水平方向创建一组“列(column)”。
      • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
      • 类似 .row.col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
      • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding

    • BootStrap的栅格系统

      • 响应式设计: 这种设计依赖于CSS3中的媒体查询
      • 栅格样式:
        • 设备分辨率大于1200 使用lg样式
        • 设备分辨率大于992 < 1200 使用md样式
        • 设备分辨率大于768 < 992 使用sm样式
        • 设备分辨率小于768使用xs样式
    • BootStrap的全局CSS

      • 定义了一套CSS
        • 对页面中的元素进行定义
        • 列表元素,表单,按钮,图片…

    使用BootStrap布局网站首页

    需求分析

    请使用BootStrap对我们的首页进行优化

    技术分析

    步骤分析

    1. 新建一个HTML页面.引入bootStrap相关的js和CSS
    2. 定义一个整体的div, 将整体的div分成8个部分
    3. 完成没部分的内容显示

    代码实现

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--
    			准备工作:
    			<meta name='viewport'>
    			1.导入bootstrap css文件
    			2.导入JQuery
    			3.bootstrap.js
    			
    			4.写一个div  class = container 支持响应式的布局容器
    			
    		-->
    		<link rel="stylesheet" href="../css/bootstrap.min.css">
    
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    
    		<!--
    			
    		jQuery文件。务必在bootstrap.min.js 之前引入
    		 -->
    		<script src="../js/jquery-1.11.0.js"></script>
    
    		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    		<script src="../js/bootstrap.min.js"></script>
    
    	</head>
    
    	<body>
    		<div class="container">
    
    			<div class="row">
    				<div class="col-md-4">
    					<img src="../img/logo2.png" />
    				</div>
    				<div class="col-md-4 hidden-xs">
    					<img src="../img/header.png" />
    				</div>
    				<div class="col-md-4">
    					<a href="#">登录</a>
    					<a href="#">注册</a>
    					<a href="#">购物车</a>
    				</div>
    			</div>
    
    			<!--菜单-->
    			<div class="row">
    				<div class="col-md-12">
    					<nav class="navbar navbar-inverse" role="navigation">
    						<div class="container-fluid">
    							<!-- Brand and toggle get grouped for better mobile display -->
    							<div class="navbar-header">
    								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    						        <span class="sr-only">Toggle navigation</span>
    						        <span class="icon-bar"></span>
    						        <span class="icon-bar"></span>
    						        <span class="icon-bar"></span>
    						      </button>
    								<a class="navbar-brand" href="#">首页</a>
    							</div>
    
    							<!-- Collect the nav links, forms, and other content for toggling -->
    							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    								<ul class="nav navbar-nav">
    									<li class="active">
    										<a href="#">手机数码</a>
    									</li>
    									<li>
    										<a href="#">鞋靴箱包</a>
    									</li>
    									<li>
    										<a href="#">电脑办公</a>
    									</li>
    									<li class="dropdown">
    										<a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分类 <span class="caret"></span></a>
    										<ul class="dropdown-menu" role="menu">
    											<li>
    												<a href="#">手机数码</a>
    											</li>
    											<li>
    												<a href="#">鞋靴箱包</a>
    											</li>
    											<li>
    												<a href="#">电脑办公</a>
    											</li>
    											<li class="divider"></li>
    											<li>
    												<a href="#">Separated link</a>
    											</li>
    											<li class="divider"></li>
    											<li>
    												<a href="#">One more separated link</a>
    											</li>
    										</ul>
    									</li>
    								</ul>
    								<form class="navbar-form navbar-right" role="search">
    									<div class="form-group">
    										<input type="text" class="form-control" placeholder="请输入要搜索的商品">
    									</div>
    									<button type="submit" class="btn btn-default">搜索</button>
    								</form>
    
    							</div>
    							<!-- /.navbar-collapse -->
    						</div>
    						<!-- /.container-fluid -->
    					</nav>
    				</div>
    			</div>
    
    			<div>
    				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="../img/1.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="../img/2.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="../img/3.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
       
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    
    				
    				
    			</div>
    			
    			<!--最新商品这里-->
    			<div class="row">
    				<div class="col-md-12">
    					<h3>最新商品<img src="../images/title2.jpg"/></h3>
    				</div>
    			</div>
    			
    			<!--商品部分 -->
    			<div class="row">
    				<!--左边div-->
    				<div class="col-md-2 hidden-sm hidden-xs">
    					<img src="../products/hao/big01.jpg" width="100%" height="100%" />
    				</div>
    				<!--右边div-->	
    				<div class="col-md-10">
    					<!--上面部分-->
    					<div class="row">
    						<!--中等广告图-->
    						<div class="col-md-6">
    							<img src="../products/hao/middle01.jpg" width="100%" />
    						</div>
    						
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    					</div>
    					<!--下面部分-->
    					<div class="row">
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						
    					</div>
    				</div>
    			</div>
    			
    			<div class="row">
    				<div class="col-md-12">
    					<img src="../products/hao/ad.jpg" width="100%" />
    				</div>
    			</div>
    			
    			
    			
    			
    			<!--最新商品这里-->
    			<div class="row">
    				<div class="col-md-12">
    					<h3>最新商品<img src="../images/title2.jpg"/></h3>
    				</div>
    			</div>
    			
    			<!--商品部分 -->
    			<div class="row">
    				<!--左边div-->
    				<div class="col-md-2 hidden-sm hidden-xs">
    					<img src="../products/hao/big01.jpg" width="100%" height="100%" />
    				</div>
    				<!--右边div-->	
    				<div class="col-md-10">
    					<!--上面部分-->
    					<div class="row">
    						<!--中等广告图-->
    						<div class="col-md-6">
    							<img src="../products/hao/middle01.jpg" width="100%" />
    						</div>
    						
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    					</div>
    					<!--下面部分-->
    					<div class="row">
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						<!--商品项-->
    						<div class="col-md-2 col-xs-4" style="text-align: center;">
    							<img src="../products/hao/small01.jpg" />
    							<p>豆浆机</p>
    							<p>$998</p>
    						</div>
    						
    					</div>
    				</div>
    			</div>
    			
    			
    			<!--页脚广告-->
    			<div>
    				<img src="../image/footer.jpg" width="100%" />
    			</div>
    			<!--网站声明-->
    			<div style="text-align: center;">
    				<a href="http://www.itheima.com">关于我们</a>	
    					<a href="http://www.itheima.com">联系我们</a>	
    					<a href="http://www.itheima.com">招贤纳士</a>	
    					<a href="http://www.itheima.com">法律声明</a>	
    					<a href="http://www.itheima.com">友情链接</a>	
    					<a href="http://www.itheima.com">支付方式</a>	
    					<a href="http://www.itheima.com">配送方式</a>	
    					<a href="http://www.itheima.com">服务声明</a>	
    					<a href="http://www.itheima.com">广告声明</a>	
    					<br />
    					Copyright © 2018 yxy 版权所有
    			</div>
    
    		</div>
    	</body>
    
    </html>
    

    前端内容总结

    • JQ方式校验表单(要求做出来)

    • json : (了解)

      • json对象 {}
      • json数组 [{},{}]
    • $.get(url,function(data){}) (了解)

    • bootstrap: Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

      • 全局CSS样式: css样式
        • 栅格系统:
          • 将屏幕划分成12个格子,12列
          • class=‘row’ 当前是行
          • 行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)
          • col-lg-数字: 在超宽屏幕上使用
          • col-md-数字: 在中等屏幕上,PC电脑
          • col-sm-数字: 在平板电脑上
          • col-xs-数字: 在手机上
      • 组件: 导航条 , 进度条, 字体
      • javascript插件 : 轮播图
      • 复制粘贴
    • 什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验

    • HTML: 超文本标记语言: 设计网页,决定了网页的结构

    • CSS: 层叠样式表 ,主要是用来美化页面, 将美化和HTML代码进行分离,提高代码复用性

    • javascript: 脚本语言,由浏览器解释执行, 弱类型语言(var i), 提供用户交互

    • jquery: javascript函数库,进一步的封装

      • 选择器:

        • ID选择器
        • 类选择器
        • 元素选择器
        • 通配符选择器
        • 选择器分组
      • 层级选择器

        • 后代选择器
        • 子元素选择器
        • 相邻兄弟选择器
        • 兄弟选择器 : 找出所有的弟弟
      • 属性选择器:

        • 选择器[属性名称=‘属性的值’]
      • 表单选择器

        • :input
        • :text
        • :password

        body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)

      • 基本的过滤器

        • :first
        • :last
        • :even
        • :odd
        • :gt
        • :lt
        • :eq
      • 表单对象属性

        • :selected
        • :checked
    展开全文
  • bootstrap框架基础知识2

    2019-10-02 12:53:15
    bootstrap思维导图 Bootstrap简介 1.来自Twitter,是目前最流行的前端框架 2.是基于HTMl,CSS,javascript的一个简洁灵活的开源框架,便于人员随时上手 3.目前版本V3 bootstrap受欢迎的原因 1.快速制作响应的网页...

    bootstrap思维导图
    在这里插入图片描述
    Bootstrap简介

    1.来自Twitter,是目前最流行的前端框架
    2.是基于HTMl,CSS,javascript的一个简洁灵活的开源框架,便于人员随时上手
    3.目前版本V3

    bootstrap受欢迎的原因

    1.快速制作响应的网页来适配各种终端
    2.开发简单,方便
    3.移动先行
    4.代码开源
    5.代码有良好是规范

    1.支持Internet Exporer 8-11
    2.开发环境(webstorm)
    3.引入Bootstrap框架文件
    3.1压缩处理文件bootstrap.min.css
    bootstrap.min.js
    3.2使用bootstrap中文网提供的免费CDN加速服务

    基本模板

    <html>
    <head lang="en">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
    <link href="css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
    	<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
    <script scr="js/jquery-1.12.4.js"></script>
    <script scr="js/bootstrap.js"></script>
    </body>
    </html>
    

    boostrap架构
    在这里插入图片描述
    栅格系统

    1.栅格系统是通过一系列(row)与列
    (column)的组合来创建页面的布局设置的内容就可以放在这些创建好的布局中
    2.实现原理
    2.1通过定义容器的大小,平分为12份
    2.2调整内外边距
    2.3结合媒体查询

    栅格系统的使用
    1.列组合

    <div class="container">
    	<div class="row">
    		<div class="col-md-8">.col-md-8</div>
    		<div class="col-md-4">.col-md-4</div>
    	</div>
    </div>
    

    2.列偏移

    <div class="container">
    	<div class="row">
    		<div class="col-md-4">.col-md-8</div>
    		<div class="col-md-4 col-md-offset-4">.col-md-4.col-md-offset-4</div>
    	</div>
    </div>
    
    

    3.列嵌套

    <div class="container">
    	<div class="row">
    		<div class="col-md-9">
    			<div class="row">
    				<div calss="col-md-6"></div>
    				<div calss="col-md-6"></div>
    			</div>
    		</div>
    		<div class="col-md-3></div>
    	</div>
    </div>
    

    4.列排序

    <div class="row">
    	<div class="col-md-9 col-md-push"></div>
    	<div class="col-md-3 col-md-pull-9></div>
    </div>
    
    

    CSS全局样式

    1.又称为CSS布局
    2.是Bootstrap三大核心内容的基础,即基础的布局语法
    3.包括
    3.1基础排版(Typograhy)
    3.2表单(Form)
    3.3按钮(Buttons)
    3.4图片(images)

    1.标题

    <h1><h2><h3><h4><h5><h6>
    2.页面主体
    特别强调的锻炼标签
    <p class="lead"></p>
    3.强调文体
    文本强调元素:small,strong,em
    对齐方式
    <p class="text-left">左对齐</p>
    <p class="text-center">左对齐</p>
    <p class="text-right">左对齐</p>
    <p class="text-justify">左对齐</p>
    

    4.列表

    <ul class="list-inline">
    	<dl class="dl-horizontal">
    		<dt>111</dt>
    		<dd>111111</dd>
    		<dt>111</dt>
    		<dd>111111</dd>
    		<dt>111</dt>
    		<dd>111111</dd>
    	</dl>
    </ul>
    

    表单

    <form action="#">
    	<div class="form-group">
    	姓名:<input class="form-control" type="text"/>
    	</div>
    	<div class="form-group">
    	邮箱:<input class="form-control" type="text"/>
    	</div>
    	<input class="form-control" type="submit" 提交/>
    </form>
    

    内联表单

    <form action="#" class="form-inline">
    <!--省略部分HTML代码-->
    </form>
    
    

    横向表单

    <form action="#" class="form-horizontal">
    	<div class="form-group">
    	<span class="col-sm-2 text-center">姓名:<span>
    	<div class="cot-sm-10">
    		<input class="form-control" type="text" placeholder="请输入你的名字">
    	</div>
    	</div>
    </form>
    
    

    验证提示状态

    1.has-warning 警告(黄色)
    2.has-error 错误(红色)
    3.has-success 成功(绿色)

    控件大小

    1.大题输入框
    2.小型输入框
    <input type="text" class="input-lg form-control" placeholder="大型输入框">
    <input type="text" class="form-contorl" placeholder="正常输入框"/>
    <input type="text" class="input-sm form-control placeholder="小型输入框"/>
    
    

    按钮

    <input type="button" class="btn btn-default" value="default(灰色)"/>
    <input type="button" class="btn btn-default btn-lg value="default (灰色)大型"/ >
    <input type="button" class="btn btn-primary " value="primary(深蓝色)默认大小"/ >
    <input type="button" class="btn btn-success btn-sm" value="success(绿色)小型"/>
    <input type="button" calss="btn btn-info btn-xs" value="info(天蓝色)超小型"/>
    
    
    

    图片

    响应式图片
    <img scr="..." class="img-responsive"/>
    图片形状
    <img src="image/1.jpg" class="img-rounded" alt=""/>
    <img src="image/1.jpg" class="img-circle" alt=""/>
    <img src="image/1.jpg" class="img-thumbnail" alt=""/>
    

    注意:
    在使用img-circle制作圆形图片的时候,必须保证图片是正方形,是否图片将变成随园形的

    展开全文
  • bootstrap基础知识

    2016-10-15 09:28:54
    第三方开源框架; 一般使用第一种方式。 2、CSS3-Media Query常见属性 device-width,device-height屏幕宽高; orientation设备方向; resolution设备分辨率; 3、一个简单的案列@media screen and (min-wi
    1、如何实现响应式?
    CSS3-Media Query最简单的实现方式;
    借助原生JAvascript;成本较高。
    第三方开源框架;
    一般使用第一种方式。
    2、CSS3-Media Query常见属性
    device-width,device-height屏幕宽高;
    orientation设备方向;
    resolution设备分辨率;
    3、一个简单的案列
    
    
    
    @media screen and (min-width:480px){
        body{ background:blue;}
    }
    
    
    css
    
    
    
    
    对应的css
    body{
        background:#900;
        }
    注意: media=”only screen and (max-width:480px)”/>是小于4.8像素时候调用外联css,此处的max-width:480px不要习惯性加“;”号。
    4、Bootstrap写非常少的代码就可以实现适用不同屏幕大小;移动优先框架。
    使用时命名一定注意,不要和原有的bootstrap里面命名重复。
    在head里面首先加入这些,进行区域搭建
    
    
    
    
    5、了解一些常用的组件
    6、实现一个实例
    (1)对bootstrap有的组件进行修改即可进行直接修改就可以使用。
    找到组件导航条,将提供的代码粘贴过去即可。即可实现导航栏,
    (2)使用列表组组件实现列表显示,把提供大代码进行粘贴。
    然后利用栅格化工具。
    
    • Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus
    • Porta ac consectetur ac
    • Vestibulum at eros

    (3)对界面进行介绍也有相关的组件,叫大屏幕介绍,可以直接粘贴复制过来。进行一定的改进即可。

    点击

    Hello, world!

    **医疗,让你更精彩!

    Learn more

                  <div class="row"><!--按行排列-->
                     <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->
                         <h2>headline</h2>
                         <p>**医疗,让你更精彩!</p>
                         <a class="btn btn-default">view detail</a>
                     </div>
                     <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->
                         <h2>headline</h2>
                         <p>**医疗,让你更精彩!</p>
                         <a class="btn btn-default">view detail</a>
                     </div>
                     <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->
                         <h2>headline</h2>
                         <p>**医疗,让你更精彩!</p>
                         <a class="btn btn-default">view detail</a>
                     </div>
                     <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->
                         <h2>headline</h2>
                         <p>**医疗,让你更精彩!</p>
                         <a class="btn btn-default">view detail</a>
                     </div>
                     <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->
                         <h2>headline</h2>
                         <p>**医疗,让你更精彩!</p>
                         <a class="btn btn-default">view detail</a>
                     </div>
                     <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->
                         <h2>headline</h2>
                         <p>**医疗,让你更精彩!</p>
                         <a class="btn btn-default">view detail</a>
                     </div>
                  </div>![最终的效果图](https://img-blog.csdn.net/20161013162204770)
    
    展开全文
  • Bootstrap知识基础

    2019-02-22 15:17:07
    Bootstrap知识 Bootatrap介绍: Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持:所有的主流浏览器都支持 Bootstrap。 ...

    Bootstrap知识

    • Bootatrap介绍:
      • Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
      • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
        浏览器支持:所有的主流浏览器都支持 Bootstrap。
        Internet Explorer Firefox Opera Google Chrome Safari
      • Bootstrap包含的e:css , 组件,js插件。
    • 安装:
      http://getbootstrap.com/
      • 当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构
        在这里插入图片描述
      • Bootstrap 源代码
        在这里插入图片描述
    <!DOCTYPE html>
    <html>
       <head>
          <title>Bootstrap 模板</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"">  //width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
    initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
    在移动设备浏览器上,通过 user-scalable=no 可以禁用其缩放(zooming)功能。
    通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
    
          <!-- 引入 Bootstrap -->  //css样式
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
          <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
          <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
          <!--[if lt IE 9]>   //  
             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->
       </head>
       <body>
          <h1>Hello, world!</h1>
     
          <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
          <script src="https://code.jquery.com/jquery.js"></script>
          <!-- 包括所有已编译的插件 -->
          <script src="js/bootstrap.min.js"></script>
       </body>
    </html>
    
    国内推荐使用 Staticfile CDN 上的库:
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    • Bootstrap CSS
    1. 响应式图片 <img src="..." class="img-responsive" alt="响应式图像">
    2. 容器 <div class="container">...</div>
    3. 网格系统 .row 和 .col-xs-或 .col-xs-4 或col-md-4 或col-lg-4 总和是12 col-md-offset-3偏移
    4. 媒体查询
        /* 超小设备(手机,小于 768px) */
    	/* Bootstrap 中默认情况下没有媒体查询 */
    	
    	/* 小型设备(平板电脑,768px 起) */
    	@media (min-width: @screen-sm-min  and (max-width: @screen-sm-max)) { ... }
    	
    	/* 中型设备(台式电脑,992px 起) */
    	@media (min-width: @screen-md-min and (max-width: @screen-md-max)) { ... }
    	
    	/* 大型设备(大台式电脑,1200px 起) */
    	@media (min-width: @screen-lg-min) { ... }	
    
    1. Bootstrap表格
    <table>	为表格添加基础样式。
    <thead>	表格标题行的容器元素(<tr>),用来标识表格列。
    <tbody>	表格主体中的表格行的容器元素(<tr>)。
    <tr>	一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
    <td>	默认的表格单元格。
    <th>	特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
    <caption>	关于表格存储内容的描述或总结。
    

    表格类

    .table	为任意 <table> 添加基本样式 (只有横向分隔线)	尝试一下
    .table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)	尝试一下
    .table-bordered	为所有表格的单元格添加边框	尝试一下
    .table-hover	在 <tbody> 内的任一行启用鼠标悬停状态	尝试一下
    .table-condensed	让表格更加紧凑
    
    1. Bootstrap表单
      form
    • 垂直或基本表单: <form role="form">
      把标签和控件放在一个带有 class .form-group 的 <div>中。这是获取最佳间距所必需的
      向所有的文本元素<input>、<textarea> 和 <select>添加 class ="form-control"
    • 内联表单: <form class="form-inline" role="form">
    • 水平表单:<form class="form-horizontal" role="form">
    • 支持的表单控件
      Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select
    1. Boootstrap按钮
    .btn	为按钮添加基本样式	
    .btn-default	默认/标准按钮	
    .btn-primary	原始按钮样式(未被操作)	
    .btn-success	表示成功的动作	
    .btn-info	该样式可用于要弹出信息的按钮
    .btn-warning	表示需要谨慎操作的按钮	
    .btn-danger	表示一个危险动作的按钮操作	
    .btn-link	让按钮看起来像个链接 (仍然保留按钮行为)	
    .btn-lg	制作一个大按钮	
    .btn-sm	制作一个小按钮	
    .btn-xs	制作一个超小按钮	
    .btn-block	块级按钮(拉伸至父元素100%的宽度)	
    .active	按钮被点击	尝
    .disabled	禁用按钮
    
    1. Bootstrap图片
    .img-rounded:添加 border-radius:6px 来获得图片圆角。
    .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
    .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
    
    1. Bootstrap响应式工具
    
                     超小屏幕               小屏幕                  中等屏幕                              大屏幕
                    手机 (<768px)	     平板 (≥768px)	       桌面 (≥992px)	                  桌面 (≥1200px)
    .visible-xs-*	可见	隐藏	隐藏	隐藏
    .visible-sm-*	隐藏	可见	隐藏	隐藏
    .visible-md-*	隐藏	隐藏	可见	隐藏
    .visible-lg-*	隐藏	隐藏	隐藏	可见
    .hidden-xs	    隐藏	可见	可见	可见
    .hidden-sm  	可见	隐藏	可见	可见
    .hidden-md  	可见	可见	隐藏	可见
    .hidden-lg	    可见	可见	可见	隐藏
    
    • Bootstrap布局组件
    1. Boootstrap字体图标
      在下载的Boootstrap包中包含了字体图标
      <span class="glyphicon glyphicon-search"></span>
      参考查找: http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
    2. Bootstrap 下拉菜单(Dropdowns)
    .dropdown	指定下拉菜单,下拉菜单都包裹在 .dropdown 里	
    .dropdown-menu	创建下拉菜单	
    .dropdown-menu-right	下拉菜单右对齐	
    .dropdown-header	下拉菜单中添加标题	
    .dropup	指定向上弹出的下拉菜单	
    .disabled	下拉菜单中的禁用项	
    .divider	下拉菜单中的分割线
    
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>
    
    1. Bootstrap 按钮下拉菜单
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">功能</a>
            </li>
            <li>
                <a href="#">另一个功能</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">分离的链接</a>
            </li>
        </ul>
    </div>
    
    1. Bootstrap 导航元素
      以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">SVN</a></li>
      <li><a href="#">iOS</a></li>
      <li><a href="#">VB.Net</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">PHP</a></li>
    </ul>
    
    .nav nav-tabs	标签页	
    .nav nav-pills	胶囊式标签页	
    .nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的
    .nav-justified	两端对齐的标签页,在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。
    .disabled	禁用的标签页	
    标签添加下拉菜单	
    带下拉菜单的胶囊式标签页	
    .tab-content	与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改	
    .tab-pane	与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
    
    1. Bootstrap 面包屑导航(Breadcrumbs)
      是一个简单的带有 .breadcrumb class 的无序列表
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li class="active">十一月</li>
    </ul>
    
    1. Bootstrap分页
      分页(Pagination),是一种无序列表
      .pagination 添加该 class 来在页面上显示分页 .disabled, .active 通过使用 .disabled 来定义不可点击的链接,通过使用 .active 来指示当前的页面。 .pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项
    2. Bootstrap标签
      使用 class .label 来显示标签
    .label label-default	默认的灰色标签	
    .label label-primary	"primary" 类型的蓝色标签	
    .label label-success	"success" 类型的绿色标签
    .label label-info	"info" 类型的浅蓝色标签
    .label label-warning	"warning" 类型的黄色标签	
    .label label-danger	"danger" 类型的红色标签
    
    1. Bootstrap 徽章(Badges)
      <a href="#">Mailbox <span class="badge">50</span></a>
    2. Bootstrap 警告(Alerts)
      并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)
    3. Bootstrap 进度条
      添加一个带有 class .progress 的 <div>
      接着,在上面的<div> 内,添加一个带有 class .progress-bar 的空的 <div>
      添加一个带有百分比表示的宽度的 style 属性,例如 style=“width: 60%”; 表示进度条在 60% 的位置
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" 
            aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
            <span class="sr-only">40% 完成</span>
        </div>
    </div>
    
    1. Bootstrap 多媒体对象(Media Object)
      如:图像、视频、音频等。 多媒体对象的样式可用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排
    <!-- 左对齐 -->
    <div class="media">
      <div class="media-left">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">RUNOOB</h4>
        <p>这是一些示例文本...</p>
      </div>
    </div>
    

    在这里插入图片描述
    21. Bootstrap 列表组
    向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。
    22. Bootstrap 面板(Panels)

    只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可
    
    • Bootstrap插件
    1. Bootstrap 模态框(Modal)插件
    <h2>创建模态框(Modal)</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
                </div>
                <div class="modal-body">在这里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    1. Bootstrap 弹出框(Popover)插件
    2. Bootstrap 警告框(Alert)插件
    3. Bootstrap 折叠(Collapse)插件
    4. Bootstrap 轮播(Carousel)插件
    展开全文
  • bootstrap基于jquery框架,使用jquery样式一)排版1)标题,副标题:&lt;h1&gt;正标题&lt;small&gt;副标题&lt;/small&gt;&lt;/h1&gt;2)段落强调()即加上class类名:&lt;p class=...
  • 1、请在使用 Bootstrap 项目的开头包含下面的代码段。 <!DOCTYPE html> <html> .... </html> 2、为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之...
  • bootstrap框架基础知识1

    2020-04-01 20:40:19
    BOOTSTRAP part1 ##1bootstrap简介 #1.什么是bootstrap 1.1bootstrap是由Twitter的Mark Otto和jacob Thornton 两位...1.3bootstrap是一个用于快速开发Web开发应用程序和网站的前 端的框架。 1.4bootstrap是基于H...
  • Bootstrap Bootstrap是一个优秀的前端框架,最近在系统地回顾一遍,记下了下面这一导图。
  • Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。为什么使用 Bootstrap?移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式...
  • bootstrap框架基础实例1

    2019-10-09 16:45:25
    bootstrap框架基础知识1 bootstrap框架基础知识2 bootstrap框架基础实例1
  • Bootstrap框架个人总结

    2016-04-13 21:55:51
    bootstrap简介bootstrap是一个支持响应式设计的前端框架。响应式设计指的是智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。 简单的说,就是一个网站能够兼容多个终端...
  • 暑期实训第一天,主要串讲了html+css的基础知识,实现了计算器的静态页面,计算器就不在这里展示了。一天的学习结束,留下了作业,实现静态的登录页面,可以借助于bootstrap框架,待实现的页面如下图所示。 不得不...
  •  Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 2.Bootstrap的优点 1.移动设备优先 自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式...
  • Bootstrap基础知识
  • Bootstrap 框架的按钮也是一个独立部分,我们同样在不同的版本之中能找到对应的代码: LESS版本:查看源文件 buttons.less Sass版本:查看源文件 _buttons.scss 已编译版本:查看源文件 bootstrap.css 文件第1992...
  • Bootstrap框架-快速上手

    2015-02-15 21:22:42
    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作开发的一套HTML、CSS和JS框架Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性...
  • 1. 什么是Bootstrap? Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架, 它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容 所有现代 Web 浏览器。 2. Flask中如何...
  • bootstrap框架知识分享

    2018-04-20 17:08:58
    一、简单介绍bootstrap框架## 简介### 什么是Bootstrap?![Bootstrap 官网](./images/cover.png)- 框架:库 lib library- jQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式- 把大家都需要的功能预先写好...
  • 1、利用BootStrap编写一个简单的旅游网页 2、BootStrap组件和栅格系统的引用 3、导航栏,轮播图,container容器,
  • 继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <...
1 2 3 4 5 ... 20
收藏数 13,893
精华内容 5,557
关键字:

bootstrap框架基础知识