BootStrap常用组件及响应式开发「建议收藏」

BootStrap常用组件PS:所有的代码必须写在<class="container/container-fluid">容器当中常用组件包含内容:响应式开发为什

大家好,又见面了,我是你们的朋友全栈君。

BootStrap常用组件

 PS:所有的代码必须写在<class=”container/container-fluid”>容器当中

常用组件包含内容:

  1. 字体图标
  2. 下拉菜单
  3. 按钮组
  4. 输入框俎
  5. 导航
  6. 分页
  7. 标签和徽章
  8. 页头
  9. 缩率图
  10. 进度条
进度条示例:
var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);

function setValue() {
  if (width === 100) {
    clearInterval(theID);
  } else {
    width++;
    $d1.css("width", width+"%").text(width+"%");
  }
}

响应式开发

为什么要进行响应式开发?

随着移动设备的流行,网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发。

什么是响应式?

利用媒体查询,让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。

用到的技术:

CSS3@media查询

用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性:

  • device-width, device-height 屏幕宽、高
  • width,height 渲染窗口宽、高
  • orientation 设备方向
  • resolution 设备分辨率

语法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不同的媒体使用不同的stylesheet

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

viewport

手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
  • width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
  • height:和 width 相对应,指定高度。
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale:允许用户缩放到的最大比例。
  • minimum-scale:允许用户缩放到的最小比例。
  • user-scalable:用户是否可以手动缩放。

Bootstrap的栅格系统

  • container
  • row
  • column

注意事项: 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

JavaScript插件

常用的Bootstrap自带插件

其他常用插件

Bootstrap实例精选:

  • 封面图
  • Carousel
  • 博客页面
  • 控制台
  • 登录页
  • Offcanvas

课后习题

  • 后台管理页面(修改Dashbord)
  • 常用组件练习

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124506.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 交通信号灯控制器C语言代码,交通信号灯控制器代码及说明.doc

    交通信号灯控制器C语言代码,交通信号灯控制器代码及说明.docPAGEPAGE3课程设计报告课程名称:FPGA现代数字系统设计设计名称:交通信号灯控制器姓名:***学号:2010000379专业:通信指导教师:***起止日期:2010.12.25-2011.1.9课程设计任务书设计名称:设计要求:(1)设计一个交通信号灯控制器…

  • imx6 添加matrix keypad

    imx6 添加matrix keypadfreescale增加matrixkeypad1.添加设备树,imx6有矩阵键盘功能,支持8*8的键盘kernel_imx/arch/arm/boot/dts/imx6qdl.dtsi/*addedbyyue.zhong*/#include//键值定义的地方,这是一个链接文件,指向kernel_imx/include/dt-bindings/input/i

  • jbpm工作流

    jbpm工作流一、JBPM(javabusinessprocessmanager)1、工作流管理流程O>定义工作流(使用流程设计器生成,png和xml文件,分别面向用户和系统)>执行工作流

  • Java8新特性 stream流常用方法

    Java8新特性 stream流常用方法Java8API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据。Stream使用一种类似用SQL语句从数据库查询数据的直观方式来提供一种对Java集合运算和表达的高阶抽象。StreamAPI可以极大提高Java程序员的生产力,让程序员写出高效率、干净、简洁的代码。这种风格将要处理的元素集合看作一种流,流在管道中传输,并且可以在管道的节点上进行处理,…

  • SQL中EXISTS的用法

    SQL中EXISTS的用法比如在Northwind数据库中有一个查询为SELECTc.CustomerId,CompanyNameFROMCustomerscWHEREEXISTS(SELECTOrderIDFR

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号