移动端网站开发与网页开发区别,手机微网站价,南县中国建设银行网站,物流网站html5模板✨✨ 欢迎大家来到景天科技苑✨✨
#x1f388;#x1f388; 养成好习惯#xff0c;先赞后看哦~#x1f388;#x1f388;
所属的专栏#xff1a;前端泛海 景天的主页#xff1a;景天科技苑 文章目录 Bootstrap1.Bootstrap介绍2.简单使用3.布局容器4.Bootstrap实现轮播…
✨✨ 欢迎大家来到景天科技苑✨✨ 养成好习惯先赞后看哦~
所属的专栏前端泛海 景天的主页景天科技苑 文章目录 Bootstrap1.Bootstrap介绍2.简单使用3.布局容器4.Bootstrap实现轮播图 Bootstrap
Bootstrap官网
1.Bootstrap介绍 一、什么是Bootstrap bootstrap是一个基于HTML、CSS和Javascript语言编写的框架具有简单、灵活的特性拥有样式库、组件和插件bootstrap常用来开发响应式布局和移动设备优先的Web项目能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年来自Twitter公司是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的简洁灵活使得Web开发更加快捷 概述Bootstrap是一个建立一个页面就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架让web开发更迅速、更容易上手。 封装了常用的css样式js动态效果。直接调用 使用bootstrap的宗旨就是 ctrl c / ctrl v 三、如何使用Bootstrap 1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)
2.页面中引入库 jquery-3.3.1.jsjQuery库【注意必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.cssBootstrap核心样式【添加到head标签中】
使用最新版
下载 并且提供CDN加速在线引入
解压后包含两个文件夹
不管是css还是js带min的都是压缩过的。生产中使用压缩过的
解压后在项目中引入
2.简单使用
!DOCTYPE html
html langen
headmeta charsetUTF-8适配IE浏览器的edge浏览器meta http-equivX-UA-Compatible contentIEedge适配手机端自适应手机屏幕大小调整分辨率方便手机观看 meta nameviewport contentwidthdevice-width, initial-scale1.0titlebootstrap简单使用/titlescript srcjquery.js/script!-- 引入外部bootstrap样式--link relstylesheet hrefbootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css /
/head没做手机屏幕适配之前很小看不清
做了手机屏幕适配后等比例缩放但是这样缩放可能会导致页面显示不完内容。因此这就需要做响应式
我们不用设置任何样式只需引入bootstrap自带的css样式即可 bodytable classtable table-hover table-stripedtheadtrth姓名/thth性别/thth年龄/th/tr/theadtbodytrtd孙坚/tdtd男/tdtd18/td/trtrtd王涛/tdtd男/tdtd20/td/trtrtd王舒展/tdtd女/tdtd20/td/trtrtd刘亦菲/tdtd女/tdtd24/td/tr/tbody/table
/body浏览器显示效果
/html3.布局容器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefbootstrap-3.3.7-dist/css/bootstrap.min.cssmeta nameviewport contentwidthdevice-width, initial-scale1style.c1{background-color:tan;height:100px;}.c2{background-color:pink;height:100px;}.c3{background-color:green;height:100px;}/style
/head
body
!-- container-fluid占满整个屏幕 --!-- container 左右两边有留白 --div classcontainer-fluiddiv classrow
!-- // col-md-offset-3 栅格偏移,向右偏移3个栅格的意思--
!-- // col-md-6 占6个栅格,默认从左边开始--div classcol-md-6 c1 col-md-offset-3div classrowdiv classcol-md-6 c3/div/div/div
!-- div classcol-md-8 c2/div--/div/div
!--div classcontainer c1/div--栅格单位铺满是12个栅格各占6个
如果是占不满留空白
如果两个加起来超过12个则第二个换行
新版的栅格偏移默认从左边开始设置了栅格偏移可以从指定栅格开始
具体使用方法可以参照官网使用说明很详细
缩小屏幕等分不会换行
/body
script srcjquery.js/script
/html4.Bootstrap实现轮播图
轮播图必须引入在bootstrap.js之前引入jQuery.js 设置轮播图轮换图片间隔时间默认是5秒
还可以通过js方法控制轮播时间
轮播图完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图/titlescript srcjquery.js/scriptlink relstylesheet hrefbootstrap-4.6.2-dist/css/bootstrap.min.css /script srcbootstrap-4.6.2-dist/js/bootstrap.min.js/script/headbodydividcarouselExampleCaptionsclasscarousel slidedata-ridecarouselol classcarousel-indicatorslidata-target#carouselExampleCaptionsdata-slide-to0classactive/lili data-target#carouselExampleCaptions data-slide-to1/lili data-target#carouselExampleCaptions data-slide-to2/li/oldiv classcarousel-innerdiv classcarousel-item activeimg src1.jpg classd-block w-100 alt... /div classcarousel-caption d-none d-md-blockh5First slide label/h5pSome representative placeholder content for the first slide./p/div/divdiv classcarousel-itemimg src2.jpg classd-block w-100 alt... /div classcarousel-caption d-none d-md-blockh5Second slide label/h5pSome representative placeholder content for the second slide./p/div/divdiv classcarousel-itemimg src3.jpg classd-block w-100 alt... /div classcarousel-caption d-none d-md-blockh5Third slide label/h5pSome representative placeholder content for the third slide./p/div/div/divbuttonclasscarousel-control-prevtypebuttondata-target#carouselExampleCaptionsdata-slideprevspan classcarousel-control-prev-icon aria-hiddentrue/spanspan classsr-onlyPrevious/span/buttonbuttonclasscarousel-control-nexttypebuttondata-target#carouselExampleCaptionsdata-slidenextspan classcarousel-control-next-icon aria-hiddentrue/spanspan classsr-onlyNext/span/button/div/bodyscript$(.carousel).carousel({interval: 2000,});/script
/html效果图片轮换播放
