bootstrap实现pc屏幕五等分

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>屏幕五等分</title> <meta name="generator" content="EverEdit" /&g…

众所周知,bootstrap的栅格系统是基于十二等分的,今天拿到设计的设计稿一看,发现一个图片list上只有8张图片,然后上网查资料,发现只能自己写css代码实现,故写博客记录代码. 以下是八等分的代码 <style type="text/css"> .col-xs-1-8, .col-sm-1-8, .col-md-1-8, .col-lg-1-8{ position: relative; min-height: 1px; margin-right: 10px; marg…

Bootstrap <基础二十五>警告（Alerts）

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale…

Droid@screen：在PC屏幕上显示Android手机屏幕

这里介绍一款工具——Droid@screen,用来获取手机屏幕,显示在PC屏幕上.它集截图.录像等多种功能于一体. 安装 1. 下载地址:http://droid-at-screen.org/download.html,下载后是一个jar包,放到某个目录就可以. 2. 安装JDK6或以上版本 3. 安装Android SDK(从Android官方下载一个完整包解压即可) 4. 设置ANDROID_HOME环境变量指向AndroidSDK主目录(这步如果不做,则需要在dro…

Bootstrap入门（十五）组件9：面板组件

Bootstrap入门(十五)组件9:面板组件虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 4.代表格的面板 5.带列表组的面板先引入本地的CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 1.基本实例我们先来创建一个基本的面板实例,在容器div中新建一个属性为panel,样式制定为…

Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示？

Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示? 公司开发款APP,要给领导演示,总不能用手机面对面演示吧.所以找了好久,找到一款体验超好的: Total Control-帮助你使用电控制手机(自行下载,精简版免费). 其实这个软件主要是用来用电脑来操控手机屏幕的,功能强大,也完全满足将手机屏幕的操作同步到pc屏幕或投影仪,而且不卡顿,而且还是免费的.使用比较简单,在pc上安装控制软件,安装好后,usb连接数据线,按提示走就ok了,傻瓜式操作.因为不卡顿,所以很多动画效果都…

bootstrap注意事项（五）表单

1.基本实例单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列. <!DOCTYPE HTML><html><head> <link rel="stylesheet" hr…

Bootstrap环境及屏幕适配-（一）

一.环境搭建 1.目录结构需要引用的文件有, jquery.js.bootstrap.min.js 和 bootstrap.min.css 文件,下面看下在线的文档Hello Word <!DOCTYPE html> <html> <head> <title>在线尝试 Bootstrap 实例</title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/b…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：屏幕阅读器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 屏幕阅读器</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&…

bootstrap移动 pc 响应轮播

PC端效果 width100% 移动端 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&q…

[Bootstrap]全局样式（五）

辅助样式 1.情景文本色 .text-muted .text-primary .text-success .text-info .text-warning .text-danger {color} 2.情景背景色 .bg-primary .bg-success .bg-info .bg-warning .bg-danger {color/background-color} 3.关闭按钮 .close × {padding/cursor/background/bor…

Bootstrap<基础十五> 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &…

Bootstrap <基础五>表格

Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的表格单元格. <t…

Bootstrap框架的学习（一）

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点完美的支持H5和CSS3,以及支持移动端浏览器四.内容可以参考一下官方文档http://v3.…

前端开发 - Bootstrap

一.bootstrap简介插件 == js 在js 的基础上写了一些功能一个插件就是一个功能/方法组件 = js + css + html 组件包含着插件官网: http://www.bootcss.com/下载: v3.3.7css / fonts / js 引入项目中 https://v3.bootcss.com/起步 / 全局CSS样式 / 组件 / JavaScript插件二.起步 https://v3.bootcss.com/getting-started/ 基本模板(inde…

【温故知新】——Bootstrap响应式知识点复习

前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm ======================================== 一.什么是响应式网页 Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在PC浏览器中浏览,也可以在手机/平板中浏览.并且配合不同设备有不同的响应结果响应式网页的特点: 1.页面上的图片和…

了解Bootstrap和开发响应式网站

什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. [1]. 简单来说Bootst…

web开发：Bootstrap应用及内存管理

一.栅格系统二.移动端适配三.栅格系统案例四.表格五.表单六.循环应用一.栅格系统 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>栅格系统</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css&qu…

Bootstrap<基础十六> 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实…

Bootstrap<基础十> 响应式实用工具

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换. 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见隐藏隐藏隐藏 .visible-sm-* 隐藏可见隐藏隐藏 .visible-…

Bootstrap<基础九>辅助类

Bootstrap 中的一些可能会派上用场的辅助类. 文本以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类描述 .text-muted "text-muted" 类的文本样式 .text-primary "text-primary" 类的文本样式 .text-success "text-success" 类的文本样式 .text-info "text-info" 类的文本样式 .text-…

Bootstrap<基础三> 排版

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &…

Bootstrap<基础二> 网格系统

Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法. 简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载. 什么…