2019-10-09 16:45:25 weixin_45541388 阅读数 14
  • Bootstrap4基础入门到精通

    从Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。

    2522 人正在学习 去看看 黄菊华

目录:

  1. bootstrap框架基础知识1
  2. bootstrap框架基础知识2
  3. bootstrap框架基础实例1

配件样式
在这里插入图片描述
按钮样式

		<!--默认样式  large  大 lg   small 小  sm    xs   xsmall 加小 -->
<input type="button" class="btn btn-default btn-lg" value="default(灰色)大型"/><br /><br />
<!--表示成功或正使用的按钮,绿色-->
<input type="button" class="btn btn-success btn-sm" value="success(绿色)小型"/><br /><br />
<!--表示提示信息,天蓝色-->
<input type="button" class="btn btn-info btn-xs" value="info(天蓝色)超小型"/><br /><br />
<!--提供视觉加重,深蓝色-->
<input type="button" class="btn btn-primary " value="primary(深蓝色) 默认大小"/><br /><br />
<!--警告 橙色-->
<input type="button" class="btn btn-warning" value="warning(黄色)"/><br /><br />
<!--危险,红色-->
<input type="button" class="btn btn-danger" value="danger(红色)"/><br /><br />
<!--看起来像链接一样-->
<input type="button" class="btn btn-link" value="link(链接)"/><br /><br />

在这里插入图片描述

导航

	<body>
		</div>
    <!--导航-->
<nav class="container">
    <ul class="myNav ">
        <li class="active">
            <a class="intercept" href="#" >
                <i class="glyphicon glyphicon-home"></i> 首页
            </a>
        </li>
        <li>
            <a class="intercept" href="#">
                <i class="glyphicon glyphicon-gift"></i> 通用英语
            </a>
        </li>
        <li>
            <a class="intercept" href="#" >
                <i class="glyphicon glyphicon-pencil"></i> 海外考试
            </a>
        </li>
        <li class=" hidden-sm">
            <a class="intercept" href="#">
                <i class="glyphicon glyphicon-globe"></i>青少英语
            </a>
        </li>
        <li class=" hidden-sm">
            <a class="intercept" href="#">
                <i class="glyphicon glyphicon-bishop"></i> 行业英语
            </a>
        </li>
        <li class=" hidden-sm">
            <a class="intercept" href="#" >
                <i class="glyphicon glyphicon-shopping-cart"></i> 在线购买
            </a>
        </li>
        <li class=" hidden-md hidden-sm">
            <a class="intercept" href="#">
                <i class="glyphicon glyphicon-user"></i> 全球师资
            </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><a href="#">英语胶囊</a></li>
                <li><a href="#">精彩动态</a></li>
            </ul>
        </li>
    </ul>
</nav>

<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
	</body>

在这里插入图片描述
模态框

<body>

		<a href="#mymodal" class="btn btn-primary" data-toggle="modal">点击按钮触发弹框</a>
		<!--
    	作者:offline
    	时间:2019-09-23
    	描述:
    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal"></button>
	-->
		<div id="mymodal" class="modal fade">
			<div class="modal-dialog">
				<!--模态 对话框-->
				<div class="modal-content">
					<!-- 模态框的内容边框、边距、背景色、阴影效果-->
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button> &times;&otimes;&aacute;&thetasym;
					</div>
				</div>
			</div>
		</div>
	</body>

在这里插入图片描述

在这里插入图片描述

图片形状

<body>
<div class="container">
   <img src="image/1.jpg" class="img-responsive" alt=""/>
    <!--
    	作者:offline
    	时间:2019-05-20
    	描述:图片的圆角
    -->
    <img src="image/2.jpg" class="img-rounded " alt=""/>
    <!--
    	作者:offline
    	时间:2019-05-20
    	描述:circle 代表圆圈    圆形的图
    -->
    <img src="image/1.jpg" class="img-circle " alt=""/>
       <!--
    	作者:offline
    	时间:2019-05-20
    	描述:相框的图
    -->
    <img src="image/1.jpg" class="img-thumbnail " alt=""/>

</div>
	</body>

在这里插入图片描述
下拉菜单

<body>
			<!--
    	作者:offline
    	时间:2019-05-21
    	描述:
    	dropdown 代表下拉  open 打开
    	toggle  代表切换
    -->
<div class="container">
<div class="dropdown open"> 
	<!-- open控制菜单收缩展开  default默认的-->
    <button class="btn btn-default" data-toggle="dropdown" >
    	  <!--caret 代表的是 向下小三角-->
        下拉列表  <span class="caret"></span>    
    </button>
    <!--
    	作者:offline
    	时间:2019-05-21
    	描述:dropdown-menu  下拉菜单
    	      active        活动
    -->
    <ul class="dropdown-menu">
	    <li><a href="#">张三</a></li>  
        <li  class="active"><a href="#">里斯</a></li>
        <!--divider  
        	分界线-->
        <li class="divider"></li>        
    </ul>
</div>
  <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <!--
    	作者:offline
    	时间:2019-05-21
    	描述:dropup open  上拉
    -->
    <div class="dropup open">  <!-- open控制菜单收缩展开-->
        <button class="btn btn-primary " data-toggle="dropdown" >
            上拉 列表
            <!-- 向下小三角-->
            <span class="caret"></span>    
        </button>
        <!--
        	作者:offline
        	时间:2019-05-21
        	描述:dropdown-menu  下拉列表
        -->
        <ul class="dropdown-menu">
        	<!-- active 默认是选中状态-->
            <li class="active"><a href="#">者行者</a></li> 
            <li><a href="#">孙悟空</a></li>
             <!-- divider分界线-->
             <li class="divider"></li>          
            <li><a href="#">孙行者</a></li>
            <li><a href="#">行者孙</a></li>
        </ul>
    </div>
</div>

  


<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
	</body>

在这里插入图片描述
小图标

<body>
		
	<!--
    	作者:offline
    	时间:2019-05-21
    	描述:小图标   glypyhicon  图标   
    	      class  glyphicon-backward 后退   〈〈   	 
    	             glyphicon-home     回到首页
    	             glyphicon-home(代表 家)
    	             glyphicon-gift (代表礼物)
    	             glyphicon-user(代表用户)
    -->
<div class="container">
    <div class="row text-center mylist">
        <div class="col-md-3">
            <span class="glyphicon glyphicon-home"></span>
            <span class="text">首页</span>
        </div>
        <div class="col-md-3">
            <span class="glyphicon glyphicon-arrow-left"></span>
            <span class="text">服务</span>
        </div>
        <div class="col-md-3">
            <span class="glyphicon glyphicon-gift"></span>
            <span class="text">商品</span>
        </div>
        <div class="col-md-3">
            <span class="glyphicon glyphicon-user"></span>
            <span class="text">我的联通</span>
        </div>
    </div>
</div>
</body>

在这里插入图片描述

2019-09-06 15:56:29 weixin_45541388 阅读数 20
  • Bootstrap4基础入门到精通

    从Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。

    2522 人正在学习 去看看 黄菊华

##1bootstrap简介

#1.什么是bootstrap

1.1bootstrap是由Twitter的Mark Otto和jacob Thornton 两位设计式开发的
1.2bootstrap 是2011年八月在GitHub上发布的开源产品.
1.3bootstrap是一个用于快速开发Web开发应用程序和网站的前 端的框架。
1.4bootstrap是基于HTML,css,javascript的。
1.5bootstrap简洁灵活,使用web开发更加快捷。
1.6bootstrap可以构建出非常优雅的前端界面,而且占用资源非常小。

2.为什么使用bootstrap?
2.1移动设备优先。框架包含了贯穿整个库的移动设备优先的样式。
2.2浏览器支持。所有的主流浏览器都支持。
2.3容易上手。只有你具备HTML,css,Js基础知识,就可以开始学习。
2.4响应式设计。bootstrap的响应式css能够自适应台式机,平板电脑和手机。

##bootstrap环境安装

1.bootstrap下载
1.1下载的中文地址:http://v3.bootcss.com/

用于生产环境的bootstrap
编译并压缩后的css,Javascript和字体
文件。不包含文档和源代码文件。
下载bootstrap 推荐使用

bootstrap源码
less ,Javascript和字体文件的源码,并
且有文档。需要less编译器和一些设置工作。
下载源码

sass
这是bootstrap从less到sass的源码移动
值项目,用于快速的在Rails,compass,
或者只针对Sass的项目中引入
下载Sass 项目

1.2使用bootstrap中文网提供的免费CDN服务
1.1.1bootstrap中文网为bootstrap专门构建了自己的免费CSD加速服务。
基于国内云厂商的CDN服务,访问速度更快,加速效果更明显,没有速度和带
宽限制,永久免费。bootstrap中文网还对大量的前端开源工具库提供了CSD
加速服务,请进入bootcdn(http://www.bootchdn.cn)主页查看更多可用的工具库。

1.3什么是CDN加速服务?
1.1CSD的全称是Content Delivery Network,即内容分发网络。其基本思路是
尽可能避开互联网上有可能影响数据传输和稳定性的瓶颈和环节,
使用内容传输的更快,更稳定。

bootstrap基本模板
1.bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5的。
2.bootstrap文件当字符集设置,也要遵循HTML5的规范。
3.设置IE浏览器兼容模式(X-UA-Compatible)。
4.设置模板,适应于所有平台(viewport)。
5.引入bootstrap的css主文件(bootstrap.min.css)
6.引入jQuery插件的文件(jQuery)
7.引入bootstrap的js主文件(bootstrap.mim.js)

2019-10-02 12:53:15 weixin_45541388 阅读数 13
  • Bootstrap4基础入门到精通

    从Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。

    2522 人正在学习 去看看 黄菊华

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制作圆形图片的时候,必须保证图片是正方形,是否图片将变成随园形的

2017-10-16 11:10:35 cq7421 阅读数 585
  • Bootstrap4基础入门到精通

    从Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。

    2522 人正在学习 去看看 黄菊华

Bootstrap基础知识

1.1基本概念

bootstrap是什么?
bootstrap是一个HTML、CSS和JavaScript的一个前端框架,应用非常广泛。用于响应式、移动设备优先的web项目。

1.2 安装 —— http://www.bootcss.com/

1.3 基本模板

由于bootstrap是基于jQuery,所以引用bootstrap.js之前一定要引用jQuery.js.

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>模拟对话框</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- IE9以下版本使用HTML5需要使用两个文件:html5shiv.min.js和respond.min.js -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

2 Bootstrap CSS

2.1概述

前端开发人员习惯使用全局css文件,bootstrap也是如此。
body

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
a
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

2.2栅格系统

bootstrap的响应式页面解决方案重点就是栅格系统。所谓的栅格就是将整个屏幕划分成若干个(一般是12)等宽的列。Bootstrap中定义了一系列的预定义类用于实现栅格系统。
案例:

    <style>
        div{
            background: aqua;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                .col-md-2
            </div>
            <div class="col-md-2">
                .col-md-2
            </div>
            <div class="col-md-2">
                .col-md-2
            </div>
            <div class="col-md-2">
                .col-md-2
            </div>
            <div class="col-md-2">
                .col-md-2
            </div>
            <div class="col-md-2">
                .col-md-2
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                .col-md-6
            </div>
            <div class="col-md-6">
                .col-md-6
            </div>
        </div>
    </div>
</body>

显示结果随着浏览器尺寸(实际中是根据设备不同)在自动调整布局,当屏幕尺寸小于992时纵向排列,
这里写图片描述
而当屏幕尺寸超过992时横向布局。

这里写图片描述
查看一下相关类的定义
(1)container

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
在bootstrap中定义了容器的内外边距,同时根据屏幕尺寸的不同设置不同的宽度。
.row {
  margin-right: -15px;
  margin-left: -15px;
}
通过设置负值的外边距,抵消了容器的内边距
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}

列预定义类的命名规则:
(1)col表示列的含义
(2)sm是表示屏幕尺寸类型的一种
这里写图片描述
(3)最后数字表示占整个容器宽度的十二分之一的倍数。
总结一下响应式布局的原理:
(1)容器的宽度是和屏幕尺寸相关,通过媒体查询来实现
(2)当屏幕尺寸达到大小要求时,可以使用特定的列的预定义类(如col-md-2)。
(3)列定义成靠左浮动,且宽度是利用百分比来设置的。

案例:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-8">col1</div>
        <div class="col-xs-6 col-sm-4">col2</div>
    </div>
</div>

给列添加了多个类,可以控制在不同的尺寸下比例的自适应。
当尺寸屏幕小于768时,两列的宽度是1:1,实际上是col-xs-6在起作用,
而当尺寸大于768时,列宽比为2:1,也就是col-sm-8和col-sm-4在起作用。
案例:

<div class="container">
    <div class="row">
        <div class="col-sm-5">col1</div>
        <div class="col-sm-5">col2</div>
        <div class="col-sm-5">col3</div>
    </div>
</div>

当一行的各列超过总宽度时,bootstrap会将超过的部分放在下一行,

案例:偏移

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">col1</div>
        <div class="col-xs-6">col2</div>
    </div>
</div>

container-fluid和container类的区别是container是定义了固定的宽度,所以会随着父容器的变换而变化。

案例:

<div class="container">
    <div class="row">
        <div class="col-xs-6">col1</div>
        <div class="col-xs-3 col-xs-offset-3">col2</div>
    </div>
</div>

col-xs-offset-3是表示偏移3个单位

案例:嵌套

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            col1
            <div class="row">
                <div class="col-xs-8">col1-1</div>
                <div class="col-xs-4">col1-2</div>
            </div>
            <div class="row">
                <div class="col-xs-8">col2-1</div>
                <div class="col-xs-4">col2-2</div>
            </div>
        </div>
        <div class="col-xs-6">col2</div>
    </div>
</div>

所谓的嵌套,是在某个栅格中在安排一个或多个row

案例:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-6">col1</div>
        <div class="col-xs-3 col-xs-pull-6">col2</div>
    </div>
</div>

col-xs-push-6表示后推6个单元
col-xs-pull-6表示前拉6个单元

案例:禁用状态

<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
    </label>
</div>

disabled的加input后面,表示这个多选按钮选不了,但是放在div后面表示只要一移动到这块元素上,这块都是禁用状态

2.3表格

表格类
下表样式可用于表格中:
这里写图片描述
下表的类可用于表格的行或者单元格:

这里写图片描述

上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
这里写图片描述

这些类可被应用到 tr、td>或 th。

2.4按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:
以下样式可用于, , 或 元素上:

2.5辅助类

3 Bootstrap组件

4 Bootstrap插件

1、模拟对话框

<body>
    <!--调用对话框:属性控制-->
    <button class="btn btn-warning" data-toggle="modal" data-target="#dialog1">删除</button>
    <!--调用对话框:JS控制-->
    <button class="btn btn-warning" id="btn_delete">删除</button>
    <!--创建对话框-->
    <div class="modal" id="dialog1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">数据删除提示</h4>
                </div>
                <div class="modal-body">确定要删除吗?</div>
                <div class="modal-footer">
                    <button class="btn btn-default">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $("#btn_delete").click(function(){
        $("#dialog1").modal("show");
    })
</script>

2、下拉菜单
3、滚动监听

<body data-spy="scroll" data-target="#nav" data-offset="30">
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
    <div class="container-fluid">
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#sector1">第一节</a></li>
                <li><a href="#sector2">第二节</a></li>
            </ul>
        </div>
    </div>
</nav>

4、

2018-04-07 21:11:47 w_bu_neng_ku 阅读数 56
  • Bootstrap4基础入门到精通

    从Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。

    2522 人正在学习 去看看 黄菊华

Bootstrap

Bootstrap是一个优秀的前端框架,最近在系统地回顾一遍,记下了下面这一导图。

这里写图片描述

Bootstrap知识基础

阅读数 124

没有更多推荐了,返回首页