Bootstrap 简介 - 闪电教程JSRUN

简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

什么是Bootstrap？

Bootstrap是一个基于HTML，CSS，JAVASCRIPT的应用程序和网站的前端框架。

Bootstrap目前的最新版本是Bootstrap4，利用我们提供的Sass变量和大量mixin，响应式插入系统，可扩展的嵌套组件，基于jQuery的强大的插件系统，能够快速为您的想法开发出原型或建造整个应用程序。

历史

Bootstrap是由Twitter的Mark Otto和Jacob Thornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。

为什么使用Bootstrap？

移动设备优先：自举3开始，框架包含了连续于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持Bootstrap。
容易上手：只要您拥有HTML和CSS的基础知识，您就可以开始学习Bootstrap。
响应式设计：Bootstrap的响应式CSS能够自适应于台式机，平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，便于定制。
基于提供的基于Web的定制。
它是开源的。

引导程序包的内容

基本结构：Bootstrap提供了一个带有网格系统，链接样式，背景的基本结构。这将在Bootstrap基本结构部分详细讲解。
CSS：Bootstrap自带以下特性：层次的CSS设置，定义基本的HTML元素样式，可扩展的类，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
组件：Bootstrap包含了几个个可重用的组件，用于创建图像，拖放菜单，导航，警告框，放置框等等。这将在布局组件部分详细讲解。
JavaScript插件：Bootstrap包含了几个自定义的jQuery插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
定制：您可以定制Bootstrap的组件，LESS变量和jQuery插件来获得您自己的版本。

在线实例

本站的Bootstrap教程包含了上百个实例。

您可以使用我们的在线编辑器在线编辑代码，并单击运行按钮查看结果。

Bootstrap实例

<div class =“ container”>  
 <div class =“ jumbotron”>  
    <h1>我的第一个Bootstrap页面</ h1>  
    <p>重置窗口大小，查看响应式效果！</ p>  
  </ div >  
  <div class =“ row”>  
    <div class =“ col-sm-4”>  
      <h3>第1列</ h3>  
      <p>学技术，从W3Cschool开始！</ p>  
    </ div>  
    <div class =“ col-sm-4”>  
      <h3>第2列</ h3>  
      <p>学技术，从W3Cschool开始！</ p>  
    </ div>  
    <div class =“ col-sm-4”>  
      <h3>第3列</ h3>  
      <p>学技术，从W3Cschool开始！</ p>  
    </ div>  
  </ div>  
</ div>

尝试一下»

Bootstrap实例2

<div class =“ container”>  
  <p>创建具有交替单元格背景色的响应表：</ p>  

  <div class =“ table-sensitive”>  
    <table class =“ table table-striped table-bordered”>  
      < thead>  
        <tr>  
          <th>＃</ th>  
          <th>名称</ th>  
          <th>街道</ th>  
        </ tr>  
      </ thead>  
      <tbody>  
        <tr>  
          <td> 1 < / td>  
          <td>安妮真棒</ td>  
          <td>布鲁姆街</ td>  
        </ tr>  
        <tr>  
          <td> 2 </ td>  
          <td>黛比达拉斯</ td>  
          <td>休斯敦街</ td>  
        </ tr>  
        <tr>  
          < td> 3 </ td>  
          <td> John Doe </ td>  
          <td> Madison Street </ td>  
        </ tr>  
      </ tbody>  
    </ table>  
  </ div>  

</ div>

Bootstrap4实例

<div class =“ container”>  
 <div class =“ jumbotron”>  
    <h1>我的第一个Bootstrap页面</ h1>  
    <p>重置窗口大小，查看响应式效果！</ p>  
  </ div >  
  <div class =“ row”>  
    <div class =“ col-sm-4”>  
      <h3>第1列</ h3>  
      <p>学技术，从W3Cschool开始！</ p>  
    </ div>  
    <div class =“ col-sm-4”>  
      <h3>第2列</ h3>  
      <p>学技术，从W3Cschool开始！</ p>  
    </ div>  
    <div class =“ col-sm-4”>  
      <h3>第3列</ h3>  
      <p>学技术，从W3Cschool开始！</ p>  
    </ div>  
  </ div>  
</ div>

谁适合阅读本教程？

只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。

简介

简介