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)


相关推荐

  • 软件测试用例模板

    软件测试用例模板软件测试用例模板

  • Mybatis 模糊查询

    Mybatis 模糊查询第一种:(推荐)select*fromuserwhereusernamelike#{abc}执行保存操作List<User>users=dao.findUserByName(“保”);日志:==>Preparing:select*fromuserwhereusernamelike’%保%’;==>Parameters:DEBUGma.dao.IUserDao.findUserByName第二种:select

    2022年10月24日
  • CAS登录认证[通俗易懂]

    CAS登录认证[通俗易懂]CAS最基本的协议过程:名词解释 TicketGrangtingTicket(TGT): TGT是CAS为用户签发的登录票据,拥有了TGT,用户就可以证明自己在CAS成功登录过。TGT封装了Cookie值以及此Cookie值对应的用户信息。用户在CAS认证成功后,CAS生成cookie(叫TGC),写入浏览器,同时生成一个TGT对象,放入自己的缓存,TGT对象的ID就是cookie的值。当HTTP再次请求到来时,如果传过来的有CAS生成的cookie,则CAS以此cookie值为key

  • vs中没有vc_vs中的控件

    vs中没有vc_vs中的控件#include头文件fstream包含了ifstream、ofstream、fstream三个类,可以通过定义这三个类的对象来实现相对应的文件操作。#includeofstream//文件写操作,内存写入存储设备ifstream//文件读操作,存储设备读取到内存中fstream//读写操作,对打开的文件可进行读写操作1.打开文件函数open()public…

  • 提升效率的秘密,仅需这一篇吃透负载均衡

    提升效率的秘密,仅需这一篇吃透负载均衡写在前面写本文的目的: 对负载均衡的理解零零散散,不成体系。 阅读这篇文章需要的条件: 对OSI模型有些许了解 有耐心。本文涉及大量的知识点,且只能用文字才能讲清楚,所以文字比较多。 收获: 读完此篇文章,从宏观的角度理解了负载均衡的原理以及实现机制。加深对分布式架构的了解 主要内容: 本文首先从概念开始,讲解什么是负载均衡,以及负载均衡在分布式系统中所承担的角色以及提供的功能。 讲解负载均衡的分类。分别从软硬件角度、地域范围角度以及…

  • webstorm怎么激活-激活码分享「建议收藏」

    (webstorm怎么激活)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

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

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