首页 技术 正文
技术 2022年11月23日
0 收藏 383 点赞 4,734 浏览 1929 个字

1 安装和基本使用

  外文官网

  中文官网

  可以正常下载使用

  有三个文件夹, 分别是css, fonts, js

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

  其中名字是min是压缩后的文件

  一般引用都是使用本地的, 当然官网支持在线的

  初步的使用如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--这个是支持移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>ch01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head> <body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" >Project name</a>
</div> <div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#" rel="external nofollow" rel="external nofollow" >Home</a>
</li>
<li>
<a href="#about" rel="external nofollow" >About</a>
</li>
<li>
<a href="#contact" rel="external nofollow" >Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</body>
</html>

  更多参见官网

2 栅格系统

  栅格系统是将页面等分为12份

  栅格系统的参数

  001-Bootstrap栅格系统

  具体使用范例就是

  001-Bootstrap栅格系统

  001-Bootstrap栅格系统

  但是这由于左右还有空白, 所以原来的container可以换成container-fluid 

  001-Bootstrap栅格系统

  001-Bootstrap栅格系统

  另外占多少格子的多少从小到大是自适应的

    例如使用col-md-* 这个只有在中等及以上的时候, 显示是那个比例, 如果小于中等比例之后, 每个就独占一行了

    所以要使得全部分辨率的显示都不变的话, 可以设置col-xs-*

  可以使用col-*-offset-* 来左空格

  001-Bootstrap栅格系统

  001-Bootstrap栅格系统

  列可以嵌套, 相当于把父类部分再等分成12份在用

  001-Bootstrap栅格系统

  向右push向左pull

  001-Bootstrap栅格系统

  不同分辨率的内容可以写在一起, 谁满足谁生效

  001-Bootstrap栅格系统

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140832.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:4,994
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,472
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,281
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,282
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,840
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,072
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站