BootStrap使用
2024-10-18 18:15:14
BootStrap简单使用
《深入理解BootStrap》这本书对BootStrap进行了全面的讲解包括设计思想以及源码解析对没有接触过的很有帮助
BootStrap可以说是最简单的一类框架了,使用它确实不能给我们带来一些功能上的提升,不过在一些系统开发时可以为我们的开发速度带来很大的提升。有时候会用但是用的不多,时间一长难免会忘,所以写了一些常用插件的基本使用方法,以方便查阅
样式使用
BootStrap在样式上使用的套路基本上一致的都是从统一到具体,比如按钮元素的使用为<button class="btn btn-success">ok</button>,前面的class定义了一些基本的公用的样式,后面根据我们的需要在使用特定的class
在使用BootStrap是一般我们经常使用的元素通常就是按钮、导航条、表单元素、面板+表格
按钮的使用很简单(为了语义化我们通常使用button元素或者a元素)
<button class="btn btn-success">ok</button>
按钮组
<div class="btn-group">
<button class="btn btn-success">success</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-default">default</button>
</div>
导航条
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">active</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">disabled</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
表单元素我们经常使用的就是form-group和input-group,折两种元素width都是100%所以通常结合栅格系统使用
form-group就是提示信息和输入框的结合
<div class="form-group">
<label>登录账户</label>
<input type="email" class="form-control" placeholder="请输入你的用户名或Email">
</div>
input-group是在对输入框的改变,一般是在输入框的左边或者右边添加修饰
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
面板
<div class="panel panel-default">
<div class="panel-heading">面板header</div>
<div class="panel-body">
这里是面板内容
</div>
<div class="panel-footer">面板footer</div>
</div>
表格
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>23</td>
<td>某屯</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>某庄</td>
</tr>
</tbody>
</table>
通常我们在使用方式为面板+表格,由面板提供表名,由表格提供内容
<div class="panel panel-default">
<div class="panel-heading center">
人员信息
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>23</td>
<td>某屯</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>某庄</td>
</tr>
</tbody>
</table>
最新文章
- Android Soap实例
- 【BZOJ】3434: [Wc2014]时空穿梭
- iOS多线程GCD
- Druid的使用步骤
- 使用poi解析Excel
- Windows性能计数器2
- HDU 5813 Elegant Construction (贪心)
- weak nonatomic strong等介绍(ios)
- datagrid公用字段扩展
- css盒子居中定位问题
- python爬虫入门(九)Scrapy框架之数据库保存
- zabbix之 orabbix模板监控oracle
- Presto 架构和原理简介(转)
- LeetCode题解之 Sum of Left Leaves
- Mongo如何在多个字段中查询某个关键字?
- JEECG中的validform验证ajaxurl的使用方法
- request笔记记录
- Eclipse Photon没有Server选项的问题
- Unity5.1 新的网络引擎UNET(十五) Networking 引用--下
- Algorithm1: 全排列
热门文章
- 预训练模型与Keras.applications.models权重资源地址
- Underscore.js (1.7.0)-集合(Collections)(25)
- 开发一个根据xml创建代理类的小框架
- eclipse导入Java源码
- redis—Spring中redis缓存的简单使用
- 《Java入门第二季》第四章 多态
- nodejs 8 利用原生 util.promisify() 实现 promise.delay()
- 20145307陈俊达《网络对抗》Exp3 免杀原理与实践
- linux及安全第七周总结——20135227黄晓妍
- 20145211黄志远《网络对抗》Exp9 Web安全基础实践