JSRUN 用代码说话

简介

编辑教程

简介


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


什么是Bootstrap?

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

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


历史

Bootstrap是由TwitterMark OttoJacob 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 项目的中等水平。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟