bootStrap简述及其模板创建

最新推荐文章于 2022-08-18 21:39:46 发布

拂晓CsDn

最新推荐文章于 2022-08-18 21:39:46 发布

阅读量518

点赞数

分类专栏： bootStrap 文章标签： bootStrap模板创建

本文链接：https://blog.csdn.net/zjxlove341817/article/details/103637864

版权

bootStrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、BootStrap 简述：

BootStr 是集中了HTML、JavaScript、CSS的样式库，是一个工具包。使用bootStrap不仅可以构建非常优美的HTML页面，而且占用资源也非常小，使用gzip压缩后，10kb左右，并且bootStrap在跨浏览器兼容也非常的好。

基本功能：

· 全局 CSS 样式：提供了格栅系统、表格、表单、按钮等集成样式。

· 组件：提供了下拉菜单、输入框、导航、列表组等组件。

· 插件：提供了模态框、滚动监听、警告框、弹出框等插件。

Bootstrap 官网及下载地址

· Bootstrap 官网：http://getbootstrap.com

· Bootstrap 下载地址：http://getbootstrap.com/getting-started/#download

2、BootStrap的两种使用方式：

1、一种是直接下载bootStrap的资源包，导入工程项目进行使用。

2、一种是用CDN加速服务，引用网络资源，例如：https://www.bootcdn.cn/ 开源项目CDN加速服务

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

3、模板创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--IE兼容模式---bootStrap不支持老版本的IE,将IE运行在最新的渲染模式中展示-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--viewport  适配各种不同设备的浏览-响应式布局必须设置的-->
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1,minimum-scale-1,maximum-scale=5,user-scalable=1">
    <title>Title</title>
    <!--引入bootStrap的CSS样式文件-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--html5shiv.min.js    针对IE8及其之前版本对H5新推出的各种语义化标签的兼容-->
    <!--respond.min.js      针对E8及其之前版本对CSS3对媒体查询media的兼容-->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![end if]-->
</head>
<body>


<!--因为bootStrap是依赖于JQuery实现的核心JS功能，想要使用bootstrap插件，必须之前引入jQuery库-->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

box-sizing 引发的问题解决方式：

Bootstrap 默认使用的盒子模型是 border-box，可能会和一些第三方组件冲突。

为了避免 Bootstrap 设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。

· 覆盖单个页面元素

/* 通过 CSS 代码覆盖单个页面元素的盒模型 */

.element {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

· 重置整个区域

/* 通过 CSS 代码重置整个区域 */

.reset-box-sizing,

.reset-box-sizing *,

.reset-box-sizing *:before,

.reset-box-sizing *:after {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

拂晓CsDn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootStrap简述及其模板创建

1、BootStrap 简述：BootStr 是集中了HTML、JavaScript、CSS的样式库，是一个工具包。使用bootStrap不仅可以构建非常优美的HTML页面，而且占用资源也非常小，使用gzip压缩后，10kb左右，并且bootStrap在跨浏览器兼容也非常的好。基本功能：· 全局 CSS 样式：提供了格栅系统、表格、表单、按钮等集成样式。·...
复制链接

扫一扫