Bootstarp框架用法
Bootstrap框架
Bootstrap框架
2.X 3.X 4.X # 推荐使用3.X版本
使用框架调整页面样式一般都是操作标签的class属性即可
bootstrap需要依赖于jQuery才能正常执行(动态效果)
引入方式
本地引入(最完整的)
1.引入jQuery
2.引入bootstrap的css文件
3.引入bootstrap的js文件
CDN引入
1.引入jQuery CDN
2.引入bootstrap css的 CDN 3.4.1
3.引入bootstrap js的 CDN 3.4.1
在Bootstrap上复制别的网站的HTML代码
布局容器
"""
第一次使用该框架的时候最好采用本地导入的方式
让pycharm记住bootstrap的关键字
"""
container 左右留白
container-fluid 左右不留白
栅格系统
row 行 # 一个row就是一行 一行是固定的12份
col-md-1 中等屏幕 桌面显示器 (≥992px)
col-sm-1 小屏幕 平板 (≥768px)
col-xs-1 超小屏幕 手机 (<768px) 手机端如果发生变形就用这个类
col-lg-1 大屏幕 大桌面显示器 (≥1200px)
.col-md-offset-* 列偏移
######可以在小份中再次分12份####
<div class="container">左右留白
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-lg-6 c1"></div>
<div class="col-lg-4 c1"></div>
<div class="col-lg-2 c1"></div>
</div>
</div>
<div class="col-md-6 c1"></div>
<div class="col-lg-4 c1"></div>
<div class="col-lg-8 c1"></div>
<div class="col-lg-2 c1"></div>
<div class="col-lg-8 c1"></div>
<div class="col-lg-2 c1"></div>
<div class="col-lg-8 c1">
<div class="row">
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
</div>
</div>
<div class="col-lg-4 c1"></div>
</div>
</div>
表格与表单
表格
关键类名:
text-center 文字居中
table table-striped table-bordered table-hover 给table用的
success danger warning 改变框颜色
<div class="container">左右留白
<div class="row">
<div class="col-md-8 col-lg-offset-2">
<h2 class="text-center">用户数据</h2>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="success">
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>jason</td>
<td>18</td>
<td>读书</td>
</tr>
<tr class="warning">
<td>tony</td>
<td>20</td>
<td>电影</td>
</tr>
<tr>
<td>kevin</td>
<td>25</td>
<td>美女</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
表单
关键类名:
form-control #input框变长
btn btn-danger btn-block 修改submit提交按钮的样式
注意:
radio和checkbox不要加form-control !!!
<h2 class="text-center">用户注册</h2>
<form action="">
<p>username:
<input type="text" class="form-control"></p>
<p>password:
<input type="password" class="form-control"></p>
<p>
<select name="" id="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select></p>
<input type="submit" class="btn btn-danger btn-block">
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
按钮组
a标签变成按钮
类名:btn btn-primary
其他按钮
类名:btn btn-info btn-block 样式 (修改其css调整颜色)
btn-lg btn-sm 大小
<a href="" class="btn btn-primary">点我</a>
<input type="reset" class="btn btn-info">
<input type="reset" class="btn btn-info btn-sm">
<input type="reset" class="btn btn-info btn-lg">
<input type="reset" class="btn btn-info btn-block">
图片
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
图标
bootstrap自带的
加个span标签
通过span标签修改class属性值(下图选中的就是class)
fontawesome网站
专门提供图标库 # 完美兼容bootstrap框架
先下载
然后解压后cv进pycharm
用link引入后就可以随意使用了
复制图标的源码然后添加
例如:
<i class="fa fa-bath" aria-hidden="true">
颜色可以用style直接修改颜色
导航条
直接在bootstrap里复制源码
颜色可改
其他
直接取拷
elementui
类似bootstrap框架 用法一致
Bootstarp框架用法的更多相关文章
- 关于comparable与comparator的用法(即自定义集合框架用法 )
package javastudy; import java.util.Comparator; import java.util.Iterator; import java.util.TreeSet; ...
- iframe框架用法
1.iframe标签: <iframe src="demo1.html" name="qiuqiu_Page" frameborder="0&q ...
- dubbo分布式rpc框架用法
dubbo是阿里巴巴开源的分布式服务框架,致力于提供高性能和透明化的rpc远程服务调用方案,以及soa服务治理方案,如果没有分布式需求,是不需要dubbo的,分布式环境dubbo的使用架构官方给出了一 ...
- SQLAlchemy框架用法详解
介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DBAPI之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数据API执行SQL并获取执 ...
- SSH框架用法,及作用(在一位菜鸟使用半年之后归纳的总结)
SSH框架从接触以来改变了我对代码的编写方式,从最初开始学习到勉强掌握可以说得到不少心得,以下内容出自java初学者对SSH的理解,如有不对的地方还请谅解,希望可以提出来与我交流,谢谢! SSH顾名思 ...
- python Bootstarp框架和inconfont、font-awesome使用
http://www.bootcss.com/ http://www.runoob.com/bootstrap/bootstrap-panels.html 查找基本的没问题 https://www. ...
- Hibernate框架用法
一,Hibernate框架介绍 没有Hibernate之前,使用jdbc来连接数据库时,需要反射加载驱动,再获取连接 在连接上获取sql承载块,传入sql语句执行,获取结果集,解析结果 Hiberna ...
- requirejs模块化框架用法分享
我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一 ...
- ButterKnife注入注解框架用法
Android 依赖注入 ButterKnife 基本使用 - 渐行渐远渐无声 - 博客园http://www.cnblogs.com/fansen/p/5653887.html ButterKnif ...
随机推荐
- async-validator 源码学习笔记(三):rule
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 rule 主要实现的是校验规则,文件结构为下图: 一.rul ...
- 如何在MySQL中增加一列
如果想在一个已经建好的表中添加一列,可以使用诸如: alter table TABLE_NAME add column NEW_COLUMN_NAME varchar(255) not null; 这 ...
- weblogic重要漏洞记录
(PS:之前在freebuf发过,这里直接复制过来的,所以有些图片会有水印) 前言 T3协议存在多个反序列化漏洞CVE-2015-4852/CVE-2016-0638/CVE-2016-3510/CV ...
- 什么是springcloud?springcloud断路器的作用是什么?springcloud的核心组件有什么?
一.什么是springcloud 1.springcloud概述 Spring Cloud是一个微服务框架,相比Dubbo等RPC框架, Spring Cloud提供的全套的分布式系统解决方案. Sp ...
- Filter是什么?有什么作用?
Filter是过滤器,在请求到达Servlet之前或者响应到达客户端之前截获请求或者响应,对之进行相应的处理.Struts2的控制器就是使用一个Filter实现的.
- 监听watch?
对应一个对象,键是观察表达式,值是对应回调.值也可以是methods的方法名,或者是对象,包含选项.在实例化时为每个键调用 $watch()
- CentOS7防火墙开启与关闭以及开放6379,3306,80等端口
CentOS7用firewall防火墙替代了原来的iptables,所以我们应该使用firewall的一些命令.如下:1.关闭防火墙 systemctl stop firewalld.service ...
- phpstorm 快捷生成函数
在函数上一行键入 /** /** * @param $a * @param $b * @return mixed */ function abc($a, $b) { $c = $a + $b; ret ...
- Java 线程具有五中基本状态 ?
1.新建状态(New):当线程对象对创建后,即进入了新建状态,如:Thread t = new MyThread(): 2.就绪状态(Runnable):当调用线程对象的 start()方法(t.st ...
- SublimeText 建立构建Node js系统
Sublime Text 3 构建系统:https://www.sublimetext.com/docs/3/build_systems.html 注意: 文档中出现的 shell_cmd 和 cmd ...