20170731 培训Bootstrap
Bootstrap使用
涉及培训内容框架:--1 html
html为标记语言,可以理解为容器,就是用来承载你想要展示到网页的内容的容器。版本也有很多,不同版本表示不同的标记的新增或者取代。
Bootstrap
一、 Bootstrap 是什么?
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
二、 Bootstrap 下载
地址:http://v3.bootcss.com/getting-started/
三、引进文档到项目中
主要是CSS + JS
引用JS需要注意的是,先引进Jquery
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/bootstrap-theme.min.css" />
<!--引入js -->
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
四 、如何使用
需要了解Bootstrap官网提供的使用办法
1、 http://v3.bootcss.com/components/#thumbnails
2、 http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
最主要的是栅格系统
配套使用办法:需要注意的是每行被分为12格
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
轮播:
主要用于图片播放
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="./image/" alt="First slide" style="height: 200px;background: chartreuse;width: auto">
</div>
<div class="item">
<img src="./image/" alt="Second slide" style="height: 200px;background: red">
</div>
<div class="item">
<img src="./image/" alt="Third slide" style="height: 200px;background: blue">
</div>
</div>
</div>
简单学习CSS
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成。
li strong {
font-style: italic;
font-weight: normal;
}
Bootstrap的组件
是由html+css+Js组成
所以在引用Bootstrap.js之前需要先引用Jquery
20170731 培训Bootstrap的更多相关文章
- 6.bootstrap练习笔记-缩略图和list-group
bootstrap练习笔记-缩略图 1.其实缩略图很简单,只要按照固定的格式来设计 div.container 总容器 在宽度为1200px以上 div.row 一行内容 div.col-lg-3. ...
- 3.bootstrap练习笔记-媒体内容
bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 ...
- 4.bootstrap练习笔记-内容区块
bootstrap练习笔记-内容区块 1.bootstrap中,采用的全部是div布局,把你的内容首先要包含在一个大的DIV区块当中 2.然后再写一个div.container,这个div里面存放真正 ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
- 【巩固】Bootstrap笔记一
这两天开始重新巩固一下bootstrap的学习,群里有朋友介绍说麦子学院的教程不错,特地看了一下,有2个项目练习,所以跟着做了一下,下面开始笔记. <button class="nav ...
- 全球第一本基于Bootstrap V3.x的图书《深入理解Bootstrap》终于上市了,再次免费送书15本【活动结束】
先说活动规则,再说书的事 经过将近1年的努力,终于有了第一本自己独立编写的书:<深入理解Bootstrap>,基于最新版V 3.1 ,侧重于源码详解.架构分析.插件扩展(全新开发)实战.为 ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- Bootstrap的学习以及简单运用
<!DOCTYPE html> <html> <head> <title>柠檬学院</title> <meta charset=&qu ...
- Bootstrap 与 ASP.NET MVC 4 不使用 NuGet Package 笔记
转自 http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step 单位最近做了一个Boot ...
随机推荐
- react如何监听路由url变化
"componentWillReceiveProps" "shouldComponentUpdate" "componentWillUpdate&qu ...
- 解决wireshark检测不到网卡的问题
第一步 1.打开windows设备管理器. 2.查看-显示隐藏的设备 3.非即插即用驱动程序 4.NetGroup Packet Filter Driver 右键属性---驱动程序---启动类型,修改 ...
- JavaScript变量复制
1.基本类型复制变量: var num1=5: var num2=num1: num1和num2是相互独立,不会相互影响 2.引用类型从一个变量向另一个变量复制引用类型的值 两个变量指向同一个对象,所 ...
- UML中类结构图示例
- springMVC 复选框带有选择项记忆功能的处理
前言:由于jsp管理页面经常会遇到复选框提交到JAVA后台,后台处理逻辑完成后又返回到jsp页面,此时需要记住jsp页面提交时复选框的选择状态,故编写此功能! 一.复选框的初始化 1.1.jsp页面 ...
- POJ 2442 - Sequence - [小顶堆][优先队列]
题目链接:http://poj.org/problem?id=2442 Time Limit: 6000MS Memory Limit: 65536K Description Given m sequ ...
- SQL Server 2008 事件探查器(SQL SERVER Profiler)
要想很好地优化ERP系统,可以从客户端.服务器.网络等入手,对于我们M1系统的优化来说,SQL 语句的优化就起到很重要的作用了.为此,我们展开,学习了SQL SERVER 2008的事件探查器(SQL ...
- MSSQL数据库优化经验
数据库优化的目标无非是避免磁盘I/O瓶颈.减少CPU利用率和减少资源竞争.1. 在业务密集的SQL当中尽量不采用IN操作符2. 不使用not in 因为它不能应用表的索引.用not exists 或 ...
- Instruments之Activity Monitor使用入门
Activity Monitor,官方解释为:(活动监视器)即实时显示CPU.内存和网络的使用情况,记录由虚拟内存大小测量的系统负载.用一句大白话来说,Activity Monitor类似Window ...
- [性能优化] perf 高级用法:完整记录程序性能指标,并按照时间段对程序进行有针对性的性能分析
如题: 假设你已经熟悉了基本用法,知道perf是干嘛的,以及会用 perf top [性能优化] perf 背景:目标程序在运行的某时间段内会出现性能下降,需要了解这个时间内,程序发生了什么. 方法: ...