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,一经查实,立即删除!

相关文章

用TortoiseGit时的实用git命令

生成并获取 sshkey&#xff1a; ssh-keygen -t rsa -C "xxxxxxxxxx.com" cat ~/.ssh/id_rsa.pub 克隆仓库&#xff1a; git clone xxxxxx/xxx.git 重命名文件&#xff1a; mv file_name new_file_name git目录区分大小写&#xff1a; git config core.ignorecase fal…

有一种失败叫瞎忙

很多时候&#xff0c;我们都在不知不觉的瞎忙&#xff0c;为了避免这样的瞎忙&#xff0c;特为大家分享一个小的故事。 在一个山谷的禅房里有一位老禅师&#xff0c;他发现自己有一个徒弟非常勤奋&#xff0c;不管是去化缘&#xff0c;还是去厨房洗菜&#xff0c;这个徒弟从…

解决:org.apache.rocketmq.client.exception.MQClientException: No route info of this topic, TopicTest

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 原因1&#xff1a;启动 broker 方式不对。 我完全是按照官方文档操作的&#xff0c;在网上看到说这一步是错误的启动 broker 方式&#…

tomcat需要设置环境变量吗

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

Intro OpenCL Tutorial

Benedict R. Gaster, AMD Architect, OpenCL™ OpenCL™ is a young technology, and, while a specification has been published (www.khronos.org/registry/cl/), there are currently few documents that provide a basic introduction with examples. This article helps…

雷林鹏分享:codeigniter框架文件上传处理

CodeIgniter 框架input表单的重新填充&#xff0c;主要是针对text、radio、checkbox、select等input表单&#xff0c;那么对于文件上传表单file该如何处理呢? 自己的处理方式&#xff1a; //设置文件上传属性 $webroot $_SERVER[DOCUMENT_ROOT]; $time time(); $year date(…

jQuery基本使用

一.what 1&#xff09;.一个优秀的JS函数库&#xff1b; 2&#xff09;.中大型WEB项目开发的首选&#xff1b; 3&#xff09;.使用了jQuery的网站超过90%&#xff1b; 4&#xff09;.http://jquery.com/; 二.why(即jq的好处) html元素选取&#xff08;选择器&#xff09;&#…

解决:-bash: telnet: command not found

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 报错如题 -bash: telnet: command not found只是因为没有安装这个命令&#xff0c;不识别。 安装命令&#xff1a; yum install telne…

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

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

数据结构7.3_图的遍历

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

CentOS7 使用 firewalld 打开关闭防火墙与端口

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1、firewalld的基本使用 启动&#xff1a; systemctl start firewalld关闭&#xff1a; systemctl stop firewalld查看状态&#xff1a…

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、…

移动端真机测试怎么做

准备工作&#xff1a; 1、必须安装了node 环境和npm&#xff1b; 2、手机和电脑在同一个热点或者wifi下&#xff1b; 3、知道你的IP地址&#xff1b; 步骤一、 启动cmd&#xff0c;进入项目根目录&#xff0c;使用指令&#xff1a;npm i -g live-server 进行全局安装 步骤二、 …

Linux 下清空或删除大文件内容的 5 种方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 下面的这些方法都是从命令行中达到清空文件的目的。 使用名为 access.log 的文件作为示例样本。 1. 通过重定向到 Null 来清空文件内容…

管理飞扬跋扈的技术部

摘要&#xff1a;有的管理人员认为最头疼的就是技术部的管理。因为技术工作看起来棘手&#xff0c;管理人员不能轻易了解技术工作的内涵&#xff0c;技术人员也觉得很难和管理人员沟通。要管理好技术人员&#xff0c;就一定要懂技术&#xff0c;这是其他管理方法都无法替代的。…

rocketmq 解决:There is insufficient memory for the Java Runtime Environment to continue

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.场景描述 linux 安装 rocketmq 启动 mqnameserver、mqbroker 以及运行测试类生产者时报错。 运行命令为&#xff1a; nohup sh bin…

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

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

【案例】图片无缝轮播效果

知识点&#xff1a; 1、scrollLeft属性 2、克隆节点 3、定时器 4、鼠标移入移除事件 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>无缝轮播</title> <style> *{ margin: 0; padding:…

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

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