正文

h5框架之bootstrap

W+7  2022-02-07  780

关键词：

接下来的时间里，我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习，以案例的形式、对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了。如果你想详细的学习Bootstrap，建议去http://noob.d8jd.com/noob/5.html这里学习，说多了，开始走两步....

第一步：下载Bootstrap

看这个大B就知道有多NB了，哈哈~~~~

英文也说它最流行的HTML，CSS和JS框架，至于它有哪些好处，谁用谁知道。

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

中文网下载地址：http://v3.bootcss.com/getting-started/#download

下载第一个哦

下载下来解压后，目录大体是这样的：

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

但是你的网站上线了，最好用它cdn里面的地址，除非你能保证你的网络特牛掰。。。

引用CDN地址，只须要在head之间加入如下代码：

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

接下来：hello word

案例来起：

<!DOCTYPE html>
<html>
<head>
  <title>在线尝试 Bootstrap 实例</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
      <h1>Hello, world!</h1>
      是不是太老套，真心不想看到它
</body>
</html>

看效果，《猛点这里》

注意，要想对手机显示友好，请在head之间加上：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

具体意思嘛：

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

再上案例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3>        
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>
</body>
</html>

看效果，《猛点这里》

-转载

关于h5框架之bootstrap的小知识

浏览器支持旧的浏览器可能无法很好的支持Bootstrap支持InternetExplorer8及更高版本的IE浏览器CSS源码研究我们不是在head里面引入了下面这些文件么<linkrel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.0/css... 查看详情

day14-前端之bootstrap框架

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前... 查看详情

10大h5前端框架，让你开发不愁

...到啥就写啥啦(作为前端，我一向都这么的任性^_^)。Bootstrap首先说Bootstrap，估计你也猜到会先说或者一定会有这个(呵呵了)，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个... 查看详情

前端之bootstrap(代码片段)

Bootstrap简介　　Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起开发的，Bootstra框架是基于HTML、CSS、JavaScript开发的，它因简洁、直观、功能强大被开发者广发使用。　　Boot... 查看详情

htmlcss和js框架之bootstrap(代码片段)

一.Bootstrap简介：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。详细参考内容：Bootstrap_v3二.Bootstrap安装：下载地址：https://v3.bootcss.com/（使用v3版，不要使用最新版）使用方法一：下载... 查看详情

前端之bootstrap框架(代码片段)

一Bootstrap简介在搭建前端页面时我们可以借用一些好的模板，为了让这些模板更好的让开发者使用，我们借助Bootstrap来实现一些常用的模板例如在看到上面这么好的模板，同学们是不是就想立刻收藏了呢？二css全局样式布局容器... 查看详情

css之bootstrap（快速布局）(代码片段)

简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootS... 查看详情

前端h5框架总结

关于单独h5网站项目，目前主要前端框架有：react、vue、bootstrap等，其中react和vue都是用mvvm模式（低耦合、可重用性、独立开发、可测试），数据实时更新，适合app里面嵌入的网页使用，但用在传统web网页上对seo不太好，因为数... 查看详情

前端之bootstrap

bootstrap介绍详情见：bootstrap布局容器使用前端框架，所有标签样式的调整，全都是通过class属性值来的<divclass="container"></div>左右两边留白<divclass="container-fluid"></div>全屏显示格栅系统<divclass="... 查看详情

bootstrap框架禁用谷歌字体

bootstrap框架禁用谷歌字体 H5框架换字体.png 查看详情

mpaas-客户端开发组件-基于h5框架-kylin框架之地址选择(代码片段)

定位:地址选择工具：vscode 、mPaaS-客户端开发组件、基于H5框架-kylin、vue2.0效果图： <template>代码：<van-fieldreadonlyclickablelabel="地址"input-align="right"size="large 查看详情

前端基础之bootstrap介绍

http://v3.bootcss.com/Bootstrap优点：下载： Bootstrap引入<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="dist/css/bootstrap.min.css"rel="stylesheet">&l 查看详情

bootstrap之bootstrapdialog

MakeuseofBootstrap‘smodalmoremonkey-friendly.参考地址：http://nakupanda.github.io/bootstrap3-dialog/模态弹框：<divclass="modalfade"><divclass="modal-dialog"><divclass="modal-content"><divcl 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

...了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

在bootstrap中怎样输入水平分割线？

参考技术A在bootstrap中输入水平分割线：<ulclass="navnav-list"> <liclass="divider"></li> </ul>Bootstrap：Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaSc... 查看详情

javaweb之bootstrap(代码片段)

...数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScript文章目录1.Bootstrap概念2.快速入门3.响应式布局4.CSS样式和JS插件4.1.全局CSS样式4.2.组件4.3.插件5.案例1.Bootstrap概念概念：一个前端开发的框架ÿ 查看详情

ten——tornado操作之使用bootstrap前端框架美化项目（bootstrap的使用及font-awesome插件的使用—图标集和工具包）+静态文件的处理

使用Bootstrap前端框架1.引言：（1）Bootstrap是什么？基于HTML，CSS，JS的简洁灵活的流行前端框架及交互组件集Bootstrap·全球最流行的HTML、CSS和JS工具库为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导... 查看详情