BootStrap-

BootStrap:框架  响应式布局，

创建项目选择 1.Twitter Bootstrap

https://v3.bootcss.com/css/#girl  --样式介绍

Bootstrap提供许多的css样式  —— 都是通过class名字设置的样式

2.这些样式也可以通过cdn库引入 www.bootcdn.cn/bootstrap/

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  # 通过网站引入

<link rel="stylesheet" href="css/bootstrap.css">  # 创建项目自带的css文件 bootstrap.css

引入过后只需要取成对应样式的class名字就能用这个提供的样式了

需要修改提供的样式时，直接通过优先级的原理在本地修改

一：媒体查询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}div{width: 100px;height: 100px;background: blue;}/*页面大小达到500px，div样式改变*/@media screen and (min-width: 500px){div{width: 200px;height: 200px;background: red;}}/*页面大小达到800px，div样式改变*/@media screen and (min-width: 800px){div{width: 400px;height: 400px;background: yellow;}}</style>
</head>
<body><div></div>
</body>
</html>

二：布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

<body><div class="container"></div>   固定宽度并支持响应式布局的容器<div class="container-fluid"></div>    100% 宽度，占据全部视口（viewport）的容器
</body>
</html>

三：栅格系统：

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
    <div class="container"><div class="row">　　       行必须在container或者container-flud里面<div class="col-lg-6">66</div>　　列在行里<div class="col-lg-6">66</div>    <!-- 6+6=12不能超过12列  6是自己设置 -->  12代表当前行占满</div></div>

.col-lg-x 要求屏幕宽 >= 1200px

.col-md-x 要求屏幕宽 >= 992px

.col-xs-x <768px

四：排版

classname

.h1 .h2 ... .h6  给当前标签赋予h标签的属性 大小

五：表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

六：form表单

form表单里的的input用div包起来

form-group   form-control
    <form action=""><div class="form-group"><label for="Email1">邮箱</label><input type="email" class="form-control" id="Email1" placeholder="Email"></div></form>

七：按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

class="btn btn-default"    btn-default 为默认的颜色
<a class="btn btn-danger" href="#" role="button">Link</a>
<button class="btn btn-info" type="submit">Button</button>
<input class="btn bbtn-dark" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

八：辅助类

颜色有：primary info danger warning success

文本颜色  text-

    <p class="text-primary">BootStrap辅助类</p>

背景颜色 bg-

    <p class="bg-primary">BootStrap辅助类</p>

浮动

pull-left 左浮动  show 显示 hidden隐藏   clearfix 清除浮动带来的影响

    <div id="box" class="clearfix"><div class="left pull-left show"></div><div class="right pull-right hidden"></div></div>

九：组件字体图标

图标形式 相当于字体 ，用span之类的括起来使用

十：下拉菜单

引入JQ  和创见项目的js

    <script src="js/bootstrap.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

posted on 2018-03-27 20:13 .Tang 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/tangpg/p/8659889.html

BootStrap-相关推荐

  1. SpringCloud配置文件 application.yml和 bootstrap.yml区别，执行顺序

    说在前面 SpringBoot默认支持properties和YAML两种格式的配置文件.前者格式简单,但是只支持键值对.如果需要表达列表,最好使用YAML格式.SpringBoot支持自动加载约定名称 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

  3. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

  4. 基于Metronic的Bootstrap开发框架经验总结（7）--数据的导入、导出及附件的查看处理...

    在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...

  5. Bootstrap学习的点点滴滴

    1)网站: http://www.bootcss.com/ http://v3.bootcss.com/getting-started/#download https://github.com/twb ...

  6. bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  7. bootstrap跟vue冲突吗_知道微服务，但你知道微前端吗？

    在 toB 的前端开发工作中,我们往往就会遇到如下困境: 工程越来越大,打包越来越慢 团队人员多,产品功能复杂,代码冲突频繁.影响面大 内心想做 SaaS 产品,但客户总是要做定制化 不同的团队可能有 ...

  8. bootstrap 新闻列表_kuapingUI 2.2 版本发布，跨屏 UI-bootstrap 大组件 UI 框架

    kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间.朋友圈.QQ.微信.微博等分享:联系按钮组包含了 微信.QQ ...

  9. Bootstrap框架和inconfont、font-awesome使用

    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

  10. Bootstrap笔记

    Bootstrap使用: 下载Bootstrap,用于生产环境的 Bootstrap不需要安装 解压文件到任意目录 创建index.html,在该页面编写代码 页面起始位置添加<link rel ...

最新文章

  1. vim编辑文章后不能修改
  2. Flink从入门到精通100篇（六）-Flink 应用之 对Release 文档进行深度解读
  3. SAP Credit Memo Debit Memo
  4. Python 直接赋值、浅拷贝和深度拷贝区别
  5. Linux颜色所代表的文件类型
  6. php怎么重命名文件,phpstorm如何进行文件或者文件夹重命名
  7. CISA要求联邦机构修复被震网病毒攻击利用的漏洞
  8. 河南2002年计算机比赛,河南省体育局竞技体育管理信息系统(TYMIS2003)
  9. 阿尔兹海默症AD最新研究进展（2022年2月）
  10. 【转载】通过搜狗站长平台提交网站域名变更后的文章地址
  11. Android Palette 提取图片的主色调
  12. DevExpress v18.2版本亮点——Reporting篇（三）
  13. 20190916CF训练
  14. Js中调用调用打印和自动生成条形码
  15. 苹果MT4手机软件怎么下载？下载后怎么使用？
  16. win10家庭版设置远程桌面连接
  17. EasySwoole 基础入门
  18. 7-14 电话聊天狂人 (25分)
  19. 多媒体计算机探索 教案,浅论关于多媒体教学的思考和探索
  20. SpringBoot+Vue实现供销链管理系统，值得学习！

热门文章

  1. 1074: [SCOI2007]折纸origami - BZOJ
  2. 花了两天时间为我的引擎实现了性能分析的界面显示
  3. Phpcms V9全站伪静态设置方法
  4. 基于AS3的水果机小游戏
  5. JavaScript学习（三十）—事件对象
  6. ruby mysql dbi_Ruby/DBI-数据库访问接口
  7. 人生一知己，足以慰风尘吗？
  8. 女人离婚后不要孩子，你怎么看？
  9. 手机不用了，如何消除里面的数据和信息而又不被人可以恢复？
  10. 高人，不断地在营销， 有收入就是高人