web前端之移动端课程开发之06.bootstrap(代码片段)

关键词：

bootstarp是Twitter公司开发基于html,css,js的前端框架

为实现web应用程序快速实现开发提供了一套前端工具包 UI（userInterface用户界面）框架

响应式设计  (css媒体查询 一套样式 实现各个终端尺寸适配) pc  平板  手机端   
栅格布局
完整的类库
jQuery插件
不同的使用场景  移动设备优先 

// 官方地址
getbootstrap.com
// 中文地址
www.bootcss.com

重复 复杂 无意义的命令
结构冗余  胡乱嵌套
页面错乱

代码整洁
风格统一
美观易用

h1~h6 / .h1 ~ .h6
副标题 （small）

// 对齐
.text-left
.text-center
.text-right
.text-lowercase
.text-uppercase
.text-captitalize

.table-bordered 带边框
.table-striped  条纹状
.table-hover 悬停变色
.table-condensed 紧凑风格

.form-control 表单控件
.form-group 表单组件
.form-inline 表单水平排列

// btn
//样式： btn-default btn-primary btn-success 
// btn-info btn-warning btn-danger btn-link

//更改大小 btn-lg  btn-sm md  xs
// 激活 active  块级化 btn-block

可以给其他标签套用这些类 比如a标签

圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形  .img-thumbnail

文本颜色
.text-primary  .text-success .text-info
.text-warning  .text-danger
背景颜色
.bg-primary  .bg-success .bg-info
.bg-warning  .bg-danger
状态设置
	.close 关闭按钮
三角符号
	.caret 三角符号

@media screen and (min-width:*px) and (max-width:*px) 
  


bootstrap内部实现了 css媒体查询（Media Query） 来实现响应式布局（随着屏幕的尺寸变化而变化 rem 响应式布局的方式）
一套 栅格布局（ 12份划分 ）

基本使用

.input-group 表示控件组
.input-group-addon 添加控件组的图标

.pagination
,pagination-lg/sm
.active
.pager .previous/.next

.alert  .alert-success
.alert-info  .alert-warning
.alert-danger
.alert-dismissible 可以关闭
.alert-link 弹出框中的链接

.panel  .panel-default  
.panel-heading .panel-title 
.panel-body
.panel-footer
// .panel自带的success/warning/info/danger

.list-group  .list-group-item

// .nav 
// .nav-tabs 选项卡式
// .nav-pills 按钮式
// .nav-stacked 垂直方向按钮式
// .nav-justified 两端对齐

web前端移动端课程之canvas教程系列(代码片段)

canvascanvas介绍canvas是一个客户端浏览器里的画图技术，canvas也是h5的一个新标签，canvas标签就已经提供了一张所谓的画布，那么再通过js的canvas一些操作就可以达到最终画图的效果canvas的基本使用主要就是如何通过js操... 查看详情

web前端移动端课程之canvas教程系列(代码片段)

canvascanvas介绍canvas是一个客户端浏览器里的画图技术，canvas也是h5的一个新标签，canvas标签就已经提供了一张所谓的画布，那么再通过js的canvas一些操作就可以达到最终画图的效果canvas的基本使用主要就是如何通过js操... 查看详情

移动端web开发初探之vuejs的简单实战

...移动端全屏背景CSS移动端动画初探meta标签这点与在PC端写前端有着很大的区别，移动端的meta标签简直多。我就说说我所用到的标签。< 查看详情

web前端课程技术内容之如何做一个简单的手机端页面的翻页

【如何做一个简单的手机端页面的翻页】第一步：创建移动端页面内HTML+CSS【注】可用弹性布局但需要注意的是外层盒子的定位第二步：思考问题要实现怎样的效果？手指滑动时触发事件【左右】两个方向2.点击footer部分的下标... 查看详情

web前端课程技术内容之如何做一个简单的手机端页面的翻页

【如何做一个简单的手机端页面的翻页】第一步：创建移动端页面内HTML+CSS【注】可用弹性布局但需要注意的是外层盒子的定位第二步：思考问题要实现怎样的效果？1.手指滑动时触发事件【左右】两个方向2.点击footer部分的下标... 查看详情

前端移动端开发之rem(代码片段)

前言作为一名前端工程师，我们不仅要会PC端开发，还要会移动端开发，而且现在移动端占据主要流量，所以掌握移动端开发的技能更是必须的。 那么进行移动端的开发，什么是必须，我们想要的效果是什么？自适应。对，... 查看详情

朱朝兵《web前端开发之html5+css3快速入门》课程资料在线学习

《Web前端开发之HTML5+CSS3快速入门》【课程简介】本课程由一直专注前端技术与Discuz模板设计与制作！DZ起点网创始人朱朝兵出品，通过本课程学习，即可掌握html5的基本结构，还可以熟悉掌握CSS3新增的属性，并可以独立完成一些... 查看详情

移动web开发之flex布局(代码片段)

...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情

移动web开发之flex布局(代码片段)

...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情

前端通用框架可行性研究报告之弹窗

...用户体验，降低移动端的资源使用率。在业务和样式上，前端开发人员只需要在JS代码块头部引用需要的js库和css样式即可。在逻辑上，开发人员只需调用后端提供的接口进行读取与显示。这种技术的主要优点包括 查看详情

web前端课程大纲技术之css兼容性详解

1，兼容性是什么？同样的HTML+CSS+JS，但是表现出的外部特征还是不能达到统一，存在瑕疵。同样的代码，有的浏览器效果显示"正常"，有的显示"不正常"。就像同样的去吃大排档，就有的人吃完一点事没有，而有的... 查看详情

移动web开发之入门&视口(代码片段)

一、移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器... 查看详情

web前端培训课程需要学习哪些方面的技术

参考技术AWEB前端培训课程需要学习以下8方面的技术：1、前端核心基础：HTML+_CSS核心、【JavaScript基础语法】、JavaScript面向对象、JavaScriptDOM和BOM编程、jQuery框架。2、HTML5+CSS3+移动端核心：HTML5新特性、Canvas专列、CSS3新特性、CSS3... 查看详情

web前端培训都有哪些课程

...技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发：版本控制工具、NodeJS核心技术第四阶段前端框架：Vuejs全家桶-Vue、React框架-React、微信小程序、Flutter第五阶段小程序开发：能够独立开发小程序，提... 查看详情

前端之变：前端的困境(代码片段)

这些年，前端发生了颠覆性的变革，这种变化极大地改变了前端的生态，前端从很多年前一个不起眼的角色跨步式的演变为一个不可或缺的存在。前端的技术不仅是在前端开发本身，它的触角伸向移动开发，... 查看详情

移动端布局单位介绍之rem(代码片段)

...的计算机设备。其实就是我们常说的手机。什么是布局？前端开发中布局是将主要的html结构布置好。rem是什么？rem是一种长度单位，是而且仅是根据根元素html改变的长度单位。Rootem（REM）是CSS3中新定义的一种长度单位。和之前... 查看详情

移动前端开发项目-1_课程简介及移动端主流框架介绍

...）native-app（由Android/IOS开发，性能最好，其他三种可以由前端开发）1）bootstrap:http://www.bootcss.com/响应式布局2）css3动画http://www.haorooms.com/uploads/example/Animatecss/更多框架http://nec.netease.com/framework3）icon字体(移动端经常会用到)http://fo... 查看详情

移动前端开发之viewport的理解

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewp... 查看详情