首页手记 HTML:新手攻略简略版。

HTML:新手攻略简略版。

标签：

Html5 前端工具

一：Bootstrap样式

一：Bootstrap整体架构
删格式布局
（1）.CSS 12栅格系统
Bootstrap的12栅格系统也就是把网页分成12份，开发人员可以自由地按份组合，以便开发出简洁方便的程序
（2）.12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式
（3）.基础布局组件
在12栅格系统的基础上，Bootstrap提供了多种基础布局组件，如排版、代码、表单按钮等
（4）jQuery
Bootstrap所有的JavaScript插件都依赖于jQuery 1.10+，如果要使用这些插件，就必须用到jQuery库
（5）响应式设计
页面的设计开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的调整
（6）CSS 组件
在最新的3.x版本里提供了20种CSS组件、分别是下拉菜单（Dropdown）、按钮组（Button group）、按钮下拉菜单（Button dropdown）、导航（Nav）、导航条（Navbar）、面包屑导航（Breadcrumb）、分页导航（Pagination）、标签（Label）、徽章（Badge）、缩略图（Thumbnail）、警告框（Alert）、进度条（Peogress-bar）、媒体对象（Media-object）
（7）JavaScript插件
JavaScript插件总共有12种，分别是动画效果（Transition）、模态框（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、弹出框（Popover）、按钮（Button）......

二：栅格系统

（1）.列组合
<div class="row">
<div class="col-md-4">第一个</div>
<div class="col-md-3">第二个</div>
<div class="col-md-4">第一个</div>
</div>
<hr>
<div class="row">
<div class="col-md-8">第一个</div>
<div class="col-md-4">第二个</div>

</div> 
<hr> 
<div class="row"> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
<div class="col-md-1">第一个</div> 
</div>

列组合就是通过更改数字来合并列，类似表格里的colspan
（2）. 列偏移
<div class="row">
<div class="col-md-4">第一个</div>

<div class="col-md-3 ">第二个</div>
<div class="col-md-4 col-lg-offset-4">第二个</div>
<div class="col-md-3 col-lg-offset-3">第一个</div>

</div>

使用.col-md-offset-*可以将列偏移到右侧
（3）. 列嵌套
<div class="row">

<div class="col-md-8"> 
Level 1:col-md-8 
<div class="row"> 
<div class="col-md-6">Level 2:col-md-6</div> 
<div class="col-md-6">Level 2:col-md-6</div> 
</div> 
</div> 
<div class="col-md-4">Level 1:col-md-4</div> 
</div>

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row）,被嵌套的行（row）所包含的列（column）的个数不能超过12
（4）. 列排序
<div class="container">
<h3>左右交替</h3>
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 ">.col-md-9</div>
<div class="col-xs-3 col-sm-3 col-md-3 ">.col-md-3</div>

<div class="col-xs-3 col-sm-3 col-md-3 ">.col-md-9</div> 
<div class="col-xs-9 col-sm-9 col-md-9 ">.col-md-3</div> 
</div> 
<br/> 
<h3>上下交替</h3> 
<div class="row"> 
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
</div> 
</div>

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离

（5）响应式栅格
<div class="container">
<div class="row cont">
<div class="col-md-4 col-xs-12 text-center">
<img class="myimg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/cont1.png" alt=""/>

<h2 class=" "> </h2> 
<p> </p> 
</div> 
<div class="col-md-8 col-xs-12"> 
<h3> </h3> 
<p> </p> 
<div class="row"> 
<ul class="col-md-6 col-xs-12"> 
<li> </li> 
<li> </li> 
<li> </li> 
</ul> 
<ul class="col-md-6 col-xs-12"> 
<li> </li> 
<li> </li> 
<li> </li> 
</ul> 
</div> 
<a href="#"> </a> 

</div> 
</div> 
<div class="row cont "> 
<div class="col-md-4 col-xs-12 col-md-push-8 text-center"> 
<img class=" " class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" " alt=""/> 
<h2 class=" "> </h2> 
<p> </p> 
</div> 
<div class="col-md-8 col-xs-12 col-md-pull-4 "> 
<h3> </h3> 
<p> </p> 
<div class="row"> 
<ul class="col-md-6 col-xs-12"> 
<li> </li> 
<li> </li> 
<li> </li> 
</ul> 
<ul class="col-md-6 col-xs-12"> 
<li> </li> 
<li> </li> 
<li> </li> 
</ul> 
</div> 
<a href="#"> </a> 

</div> 
</div> 

</div>

超小屏幕（xs）手机（<768px）
小屏幕（sm）平板（>=768）
中等屏幕（md）桌面显示器（>=992px）
大屏幕（lg）大桌面显示器（>=1200px）

三：排版

（1）基础排版

标题
页面主体
强调文本
列表

（2）表单

内联表单
横向表单
验证提示状态
控件大小

（3）按钮

按钮样式
按钮大小

（4）图片

响应式图片
通过为图片添加 .img-resposive类让图片支持响应式布局
图片形状
三种图片形状， .img-rouded（圆角）、.img-circle（圆形）、.img-thumbnail（圆角边框）。

三：Bootstrap组件

一：组件

（1.）图标是一个优秀网站不可缺少的一组元素，小图标得点缀可以使网站瞬间提升一个档次
（2）小图标
<div class="col-xs-3">
<span class="glyphicon glyphicon-gift"></span>
<span class="text">商品</span>
</div>
在任何内联元素上应用所对应的样式即可，例如
<span class=”glyphicon glyphicon-home”></span>
新版的Bootstrap icon是利用@font-face特性，并结合一定的字体，来制作Web页面中的icon图标
（3）基本下拉菜单
将下拉菜单触发器的下拉菜单包裹在.dropdown里，或者另外声明一个position：relative的元素
（4）下拉菜单包括两部分，即按钮和下拉菜单项，它们被包裹在一个.dropdown的容器
（5）分离式下拉菜单

向按钮添加下拉菜单，只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可
输入框
基本用法
只需在容器上应用.input-group样式，然后对需要再input前后显示的个性元素上应用.input-group-addon样式即可
尺寸大小
在.input-group-addon样式容器上添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸，不需要输入框组件中的每个元素重复地添加控制尺寸的类
导航
导航是一个网站最重要的组成部分，可以便于用户查找网站所提供的各项功能服务

选项卡导航
选项卡导航是最常用的一种导航方式，尤其是在多内容编辑的时候，通常都需要选项卡进行分组显示
胶囊式选项卡导航
使用.nav-pills即可变换成胶囊式选项卡
自适应导航
自适应导航可以将li元素充满整个父级容器，其样式为.nav-justified
二级导航

<ul class="nav nav-pills ">
<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 ">
<li><a href="#" </a></li>

<li><a href="#"> </a></li>

<li><a href="#"> </a></li>

<li><a href="#"> </a></li>

</ul>
</li>
</ul>

上面是一级导航，二级导航很像下拉菜单，把这二者组合起来就可以形成二级导航
导航条

基础导航条
导航条中的表单
导航条中有表单元素，如搜索框等.navbar-form可以满足这个需求
导航条中的按钮（文本、链接）
导航条还可引入文本（navbar-text）、按钮（navbar-btn）、和普通连接（navbar-link）等
顶部固定或底部固定
.navbar-fixed-top支持最顶部固定，.navbar-fixed-bottom支持最底部固定
响应式导航条
屏幕的分界点是768px,再小于768px的时候，所有菜单都会默认隐藏
缩略图
<div class="row">
<div class=" col-md-3 col-xs-6">
<div class="thumbnail">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" " alt="">
<div class="caption">
<h3> </h3>
<p> </p>
<p>
<a href="#" class="btn btn-primary" role="button"> </a>
<a href="#" class="btn btn-default" role="button"> </a>
</p>
</div>
</div>
</div>

使用.thumbnail样式，就可以使图片、文字或是视频展示得更加漂亮
媒体对象
<div class="media">
<div class="media-left">
<img class="media-object" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" " alt="">
</div>
<div class="media-body">
<h4 class="media-heading"> </h4>
<p></p>
<small> </small>
<small style="margin-left:70%;color: #f0ad4e"> 评论 | 分享 </small>
</div>
</div>

6.媒体对象：是一个抽象的样式，用来构建不同类型的组件，这些组件都具有在文本内左对齐或右对齐的图片（Twitter消息等）

7.列表组：是灵活又强大的组件，不仅能显示一组简单元素，还能用于复杂的定制内容。大部分列表都是使用ul/li来实现的，然后给它添加特定的样式即可
8.分页导航

9.默认分页
在ul上设置pagination样式即可
翻页
在ul上设置pager样式即可

三：JavaScript插件

一：引入方式

下载Bootstrap的时候里面的js文件夹，里面有单个JavaScript 插件文件，用哪个引入哪个
data属性
data属性API是Bootstrap中的一等API，你可以仅仅通过data 属性API就能使用所有的Bootstrap插件，无需写一行JavaScript
动画过渡
Bootstrop使用的动画过渡效果全部使用的是CSS的语法，所以 IE 6~IE 8不能使用过渡效果，在使用的时候可以单独引入 transition.js
模态框的滑动和渐变效果
选项卡的渐变效果
旋转轮播的滑动效果等
模态框
<div id="mymodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> </h4>
</div>
<div class="media-body">
<p></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal"> </button>
<button class="btn btn-primary"> </button>
</div>
</div>
</div>

</div>

模态框是绝大部分网站需要的交互功能，它能更加灵活地以对话框的形式出现，具有最小和最实用的功能集
默认的模态框的基本结构中包括模态框的头部（标题和关闭符号）、中间主体部分和底部（放置操作按钮）
模态框和按钮或其他组件一样也可以设置尺寸
可以使用data属性API来实现一些交互功能，除了data-toggle外，模态框还可以设置其他的data属性来完成别的功能
模态框也可以使用JavaScript进行操作，传入可以用有一部分可选参数的JavaScript对象字面量，用初始化弹窗的一些自定义属性，以便控制个性化的弹窗效果
模态框的属性和data属性类似，功能也一样，只不过是把前缀data去掉
模态框方法
所有的JavaScript组件都支持传入特定字符串执行其内部方法的用法
模态框事件
在模态框弹出前执行某个功能或者在模态框弹出后执行某个功能，所以模态框插件也给了用户提供了几种事件
选项卡
<ul class="nav nav-tabs">
<li class="active"><a href="#name1" data-toggle="tab">home</a></li>
<li><a href="#name2" data-toggle="tab">Profile</a></li>
<li><a href="#name3" data-toggle="tab">fat</a></li>

<li><a href="#name4" data-toggle="tab">mdo</a></li> 

</ul> 

<!--选项卡面板--> 
<div class="tab-content"> 
<div class="tab-pane fade in active" id="name1"> <!-- fade有淡入淡出的效果-->

选项卡导航和选项卡面板要同时有
导航链要设置data-toggle=”tab”，并且还要设置data-target 或是href=”选择符”，以便单机的时候能够找到该选择符所对应的tab-pane面板
tab-pane要放在tab-content里面，要有Id且值必须和 data-target的值或href的值相同
选项卡方法
选项卡组件也可以支持用JavaScript代码直接初始化
选项卡事件
和模态框一样，选项卡也有相关的事件，用来给选项卡面板出现前后设置一些功能
旋转轮播自定义属性
data-interval
data-pause
data-wrpe
JavaScript操作旋转轮播
在父容器上定义了data-ride=”carousel”属性，页面加载后会自动实现图片轮播效果

旋转轮播属性
interval
pause
wrap
旋转轮播方法
.carousel(‘cycle’)
.carousel(‘pause’)
.carousel(‘number’)
.carousel(‘prev’)
.carousel(‘next’)
旋转轮播事件
<div id="myCarousel" class="carousel slide" data-ride="carousel">


<div class="carousel-inner" >
<div class="item active">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" " alt="..." style="width: 100%">
<div class="carousel-caption ">
</div>
</div>
<div class="item">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" " alt="..." style="width: 100%">
<div class="carousel-caption">
<h3> </h3>
<p> </p>
</div>
</div>

</div>


<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" ></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

slide.bs.carousel
slid.bs.carousel
滚动监听
滚动监听必须包含两部分：菜单和被监听的区域
将滚动监听移到body上，监听的是整个body
JavaScript操作滚动监听
用法
$(‘滚动监听容器选择器’).scrollspy({target:’#菜单容器的选择器’})

滚动监听属性
在使用滚动监听插件的时候，可以自定义属性一样，使用它的参数，不同的是需要去除前面的data前缀
滚动监听事件

滚动监听也支持时间的订阅和触发功能，目前只支持一个 activate事件
<body data-spy="scroll" data-target="#selector" style="height:2000px">

<nav class=" navbar navbar-default navbar-fixed-top" id="selector">
<ul class="nav navbar-nav ">
<li class="active"><a href="#name1"></a></li>

<li><a href="#name2"></a></li> 

<li><a href="#name3"></a></li> 

<li><a href="#name4"></a></li> 

</ul> 
</nav> 

<h4 id="name1"></h4> 

<p> 
</p> 
<h4 id="name2"></h4> 

<p> 

</p>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

早安世界520

JAVA开发工程师

手记
篇

粉丝

40

获赞与收藏

344

关注作者，订阅最新文章

阅读免费教程

Html5 入门教程

25个小节 60138 815

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

HTML:新手攻略简略版。

二：栅格系统

三：排版

一：组件

一：引入方式

阅读免费教程