Bootstrap简介

1.使用准备

1.1 Bootstrap的下载

http://www.bootcss.com,下载用于生产环境的Bootstrap即可。

1.2 Bootstrap包含的内容

● 全局CSS:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。

● 组件:无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

● JavaScript 插件:是jQuery插件,带了一些其它的功能。如:轮播图。

1.3 Bootstrap的目录结构

 

2.创建模板

2.1 Bootstrap模板文件创建步骤

只需要创建一次,以后可以直接复制这个模板使用

● 复制三个文件夹css、js、fonts到项目目录下。

● 复制jQuery框架到js目录下。

● 复制“起步 ==> 基本模板"的代码到HTML中。

2.2 模板说明

<head><!‐‐ 1. 导入bootstrap中的css样式文件 ‐‐><link href="css/bootstrap.min.css" rel="stylesheet"><!‐‐ 2. 导入jQuery框架 ‐‐><script src="js/jquery‐3.2.1.min.js"></script><!‐‐ 3. 导入bootstrap的js文件 ‐‐><script src="js/bootstrap.min.js"></script></head>

3.栅格系统

  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的特点:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适

    的排列(aligment)和内间距(padding)。

  • 通过“行(row)”在水平方向创建一组“列(column)”。

  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来

    创建。

  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整

    体另起一行排列。

 

关注微信公众号,随时随地学习

 

转载于:https://www.cnblogs.com/dintalk/p/10880032.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tomcat需要设置环境变量吗

tomcat是一款轻量级web应用服务器&#xff0c;安装的时候我们都是直接解压zip包&#xff0c;然后在bin目录下双击startup.bat就可以启动了&#xff08;当然&#xff0c;前提是本地要安装jdk并配置JAVA_HOME环境变量&#xff09; 所以我一直认为tomcat是不用配置环境变量的 但是…

钱荒下银行理财收益率角逐:邮储银行垫底

21世纪资管研究员松壑 由于银行理财的收益定价机制为设定预期收益率的“先行定价”&#xff0c;而银行对产品本金收益又保有或明或暗的兑付要求&#xff0c;其业绩往往在理财产品发行前就已决定。 因此&#xff0c;本次榜单根据已披露最高预期收益率&#xff08;下称收益率&a…

数据结构7.3_图的遍历

我们希望从图中某一顶点出发访遍图中其余顶点&#xff0c;且使每一个顶点仅被访问一次。 这一过程就叫做图的遍历。 图的遍历算法是求解图的连通性问题、拓扑排序和求关键路径等算法的基础。 然而&#xff0c;图的遍历要比树的遍历复杂得多。 因为图的任一顶点都可能和其余的顶…

HCL实验四

PC端配置&#xff1a;配置ip地址 配置网关 交换机配置&#xff1a;①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface vlan-interface 10 ip add 192.168.10.254 24 interface vlan-interface 20 ip add 192.168.20.254 24 转载于:https://www.cnblogs.com/zy5…

程序员/设计师能用上的 75 份速查表

本文由 伯乐在线 - 黄利民 翻译自 designzum。欢迎加入 技术翻译小组。转载请参见文章末尾处的要求。75 份速查表&#xff0c;由 vikas 收集整理&#xff0c;包括&#xff1a;jQuery、HTML、HTML5、CSS、CSS3、JavaScript、Photoshop 、git、Linux、Java、Perl、PHP、Python、…

GWAS: 网页版的基因型填充(genotype imputation)

在全基因组关联分析中&#xff0c;处理芯片数据时&#xff0c;必须走的一个流程就是基因型数据填充&#xff08;imputation&#xff09;。 当然&#xff0c;如果你拿到的是全测序的数据&#xff0c;请忽略这一步。 下面直奔主题&#xff0c;怎么在网页版进行基因型填充。 1 进入…

腾讯CKV海量分布式存储系统

摘要&#xff1a;腾讯CKV&#xff0c;是腾讯自主研发的高性能、低延时、持久化、分布式KV存储服务。在腾讯的微信平台、开放平台、腾讯云、腾讯游戏和电商平台广泛使用&#xff0c;日访问量超过万亿次。本文将全面剖析CKV的实现原理和技术挑战。 与Memcached和Redis等开源NoSQ…

编程之法:面试和算法心得

《编程之法&#xff1a;面试和算法心得》高清中文版PDF 含书目录 下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Kcd2bRsIfhagKZR6NaOgXg 提取码&#xff1a;054s 《编程之法&#xff1a;面试和算法心得》高清中文版PDF高清中文版PDF 含书目录&#xff0c;36…

localStorage存、取数组

localStorage存储数组时需要先使用JSON.stringify()转成字符串&#xff0c;取的时候再字符串转数组JSON.parse()。 var arr[1,2,3,4];localStorage.setItem(key,arr);console.log(localStorage(key); //打印出字符串&#xff1a;1,2,3,4 正常存储&#xff1a;localStorage.setI…

Redis原理及拓展

Redis是单线程程序。单线程的Redis为何还能这么快&#xff1f; 1、所有的数据都在内存中&#xff0c;所有的运算都是内存级别的运算&#xff08;因此时间复杂度为O(n)的指令要谨慎使用&#xff09; 2、单线程操作&#xff0c;避免了频繁的上下文切换 3、多路复用&#xff08;非…

日常问题 - 远程服务器运行Tomcat出现卡顿阻塞

问题描述&#xff1a; 远程服务器Tomcat容器运行一个WEB项目&#xff0c;浏览器访问时&#xff0c;请求一直得不到响应&#xff0c;并且除此之外没有出现任何异常&#xff0c;像是被阻塞了。查看远程Tomcat窗口&#xff0c;也没有任何报错。鼠标在Tomcat窗口右键点击后&#xf…

给技术人上的管理课:平衡和集中

摘要&#xff1a;大中型团队管理是技术人转型的巨大挑战&#xff0c;这个阶段的管理工作&#xff0c;仍然可以归为技术范畴&#xff0c;依靠的大抵是管理人的筋肉力量。是否会管理&#xff0c;要看能否管好超出自己筋肉力量规模的团队。此中的关键&#xff0c;在于把握平衡和集…

理解分布式id生成算法--雪花算法(SnowFlake)

分布式ID生成算法的有很多种&#xff0c;Twitter的SnowFlake就是其中经典的一种。 注&#xff1a; 1B就是1个字节。Byte、KB、B、MB、GB之间的关系是&#xff1a;Bit——比特 &#xff1b; B ——字节&#xff1b;KB——千字节&#xff1b;MB——兆字节&#xff1b;GB——吉字节…

注解 @PostConstruct 与 @PreDestroy 详解及实例

简介 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Java EE5 引入了PostConstruct和PreDestroy这两个作用于Servlet生命周期的注解&#xff0c;实现Bean初始化之前和销毁之前的自定义操…

PHP 安装xdebug

xdebug官网: https://xdebug.org 安装步骤如下: 使用 phpinfo() 打印出PHP相关信息, 全选, 复制 打开 xdebug 网站: https://xdebug.org/wizard.php 在图中输入框中粘贴你复制的信息, 点击 Analyse my phpinfo() output 在结果中点击下载, 然后按照它提示的步骤进行操作即可…

分布式消息中间件 : Rocketmq

简述 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 分布式消息中间件&#xff0c;主要是实现分布式系统中解耦、异步消息、流量销锋、日志处理等场景。生产中用的最多的消息队…

消息中间件:RocketMQ 介绍(特性、术语、原理、优缺点、消息顺序、消息重复)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 消息中间件的作用 1. 应用解耦 2. 异步处理 比如用户注册场景&#xff0c;注册主流程完成以后&#xff0c;需要调用邮件系统发送邮件…

使用 Intellij Idea 打包 java 工程为可执行 jar 包

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 其实还有个简单多了方法&#xff0c;见&#xff1a; 超简单方法&#xff1a; Intellij Idea 把 java 工程打成可运行的 jar 步骤&#x…

QuickStart系列:docker部署之Gitlab本地代码仓库

gitlab是可以在本地搭建的使用git作为源代码管理的仓库。 运行环境&#xff1a; win10vmware14docker7docker 1. 使用命令拉取镜像&#xff08;非必须&#xff0c;耗时比较久&#xff0c;这里以ce为准&#xff0c;ce是社区版&#xff0c;ee是企业版&#xff09;&#xff1a; do…

超简单方法: Intellij Idea 把 java 工程打成可运行的 jar

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 找到 Intellij Idea 最下面的 Terminal 选项&#xff0c;并点击进入该界面。 2. 在光标位置输入命令&#xff1a;mvn clean 。清理…